Entenda o ponto de partida
Conheça uma base organizada, personalize a apresentação de um pequeno delivery e aprenda HTML e CSS por meio do código utilizado.
ACESSO LIVREVocê pode fazer o projeto sem entrar
IdentificarO checklist fica neste aparelho. Identifique-se apenas se quiser sincronizar e permitir o acompanhamento.
OLÁ! PRONTO PARA COMEÇAR?
Delivery Umburatiba — Aula Conceito 0 — V2
Conheça uma base organizada, personalize a apresentação de um pequeno delivery e aprenda HTML e CSS por meio do código utilizado.
SEU CAMINHO
Aulas do projeto
Abra uma aula, siga os passos e marque o que concluiu.
0 de 29 itensProgresso salvo neste dispositivo
01
AULA 1
02Aula 1 — Conheça a base e apresente a ideia
Copie uma base organizada, reconheça sua estrutura e personalize o primeiro conceito do delivery.
Começar aulaAULA 2
03Aula 2 — Organize o caminho e evolua a apresentação
Continue a mesma página, represente o caminho do cliente e acrescente componentes sem misturar os arquivos.
Começar aulaAULA 3 · CONTINUAÇÃO · OBRIGATÓRIA
Parte 3 — Laboratório de CSS
Nesta aula, continue utilizando o mesmo index.html e o mesmo assets/css/style.css das etapas anteriores. A missão é experimentar o acervo sem substituir o trabalho já realizado. Em uma aula, escolha um layout,…
Começar aula Ver todas as aulas
AULA ATUAL0 itens concluídos
Aula 1 — Conheça a base e apresente a ideia
Copie uma base organizada, reconheça sua estrutura e personalize o primeiro conceito do delivery.
01
AGORA É COM VOCÊ
Siga os passos
PASSO 1
P1 — Entenda antes de modificar
HTML organiza o conteúdo; CSS controla a aparência. O index.html é o arquivo principal e assets/css/style.css guarda os estilos. Nesta aula, a equipe criará a apresentação de um único delivery. Leia a missão e observe a estrutura das pastas antes de começar.
PASSO 2
P2 — Crie as pastas e copie a base
No VS Code, crie aula-delivery-0/index.html e aula-delivery-0/assets/css/style.css. Abra BASE — Aula Delivery 0 e copie cada aba para o arquivo indicado pelo mesmo nome. Salve os dois arquivos e abra index.html no navegador antes de alterar o conteúdo.
Código baseBASE — Aula Delivery 0
Página inicial completa e comentada para a primeira aula do projeto Delivery Umburatiba.
PASSO 3
P3 — Reconheça a estrutura do código
No index.html, localize title, link, header, main, as quatro sections, footer, as classes e os comentários DICA. Depois abra style.css e localize as variáveis de cores e os blocos numerados. Não apague nem renomeie esses elementos nesta etapa.
PASSO 4
P4 — Personalize as informações
Siga os comentários DICA do index.html. Altere o title, nome, slogan, tipo de estabelecimento, proposta, três produtos, público principal e nomes dos integrantes. Mude somente os textos indicados e mantenha as tags, classes e indentação da base.
PASSO 5
P5 — Escolha as cores e teste
No início de style.css, escolha novas cores para --cor-principal e --cor-secundaria. Salve, atualize o navegador e confira o cabeçalho, as quatro seções e o rodapé. Escolhas da equipe: nome, slogan, segmento, produtos, público e cores. Desafio extra: adicione um quarto produto copiando um li existente, sem criar novas classes.
PERGUNTA DA AULA · OPCIONAL
Confira o fundamento em 1 minuto
Responder não impede seu avanço. Se acertar, esta revisão também entra no progresso do projeto.
Tempo01:00
APRENDA E CONFIRA
Pergunta da aula
Uma pergunta de cada vez. Responda, confira a explicação e avance no seu ritmo.
1/ 5
Qual é o caminho correto do arquivo de estilos utilizado na base?
Revise a explicação do conteúdo e tente novamente.
Qual tag conecta assets/css/style.css ao arquivo index.html?
Revise a explicação do conteúdo e tente novamente.
Qual é a função da tag <main> na página do delivery?
Revise a explicação do conteúdo e tente novamente.
Por que a base utiliza várias tags <section> dentro de <main>?
Revise a explicação do conteúdo e tente novamente.
Para que servem classes como class="cabecalho__titulo"?
Revise a explicação do conteúdo e tente novamente.
O minuto terminou. Você pode tentar novamente quando quiser.