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 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.
01
AGORA É COM VOCÊ
Siga os passos
PASSO 1
P1 — Desenhe o caminho do cliente
Continue usando os arquivos da Aula 1. Adicione uma nova section dentro de main e apresente quatro momentos: entrar na página, conhecer o delivery, visualizar os produtos e escolher como pedir. Use uma lista organizada. Não crie carrinho, cadastro, login ou múltiplos estabelecimentos.
PASSO 2
P2 — Escolha um componente de apresentação
Escolha uma opção: Badge do modelo de delivery ou Card de informação do delivery. Copie o HTML para o local indicado dentro de main e acrescente o CSS ao final de assets/css/style.css. Personalize o conteúdo e mantenha as classes do componente.
Código de apoioBadge do modelo de delivery
Identificação visual simples para destacar o tipo do projeto.
Código de apoioCard de informação do delivery
Card reutilizável para apresentar uma decisão do projeto.
PASSO 3
P3 — Destaque a utilidade do delivery
Abra Bloco de destaque do delivery e adapte os textos para apresentar o principal diferencial da equipe. O Botão ilustrativo de pedido é um upgrade opcional: ele ainda não executará nenhuma ação e representa uma função futura.
Código baseBloco de destaque do delivery
Seção reutilizável para apresentar o principal diferencial do projeto.
SugestãoBotão ilustrativo de pedido
Botão visual para representar a futura ação de fazer um pedido.
PASSO 4
P4 — Revise, teste e apresente
Salve os arquivos, abra index.html e revise fechamento das tags, indentação, classes, caminho do CSS e organização das sections. Depois apresente o estabelecimento, o público, os produtos, o caminho do cliente e as escolhas visuais da equipe.
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.