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 3 · CONTINUAÇÃO0 itens concluídos
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,…
01
AGORA É COM VOCÊ
Siga os passos
Continue do ponto em que a aula anterior terminou. Cada passo acrescenta um conteúdo novo ao mesmo projeto.
PASSO 1 · Atenção
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, um efeito de hover e um recurso de identidade visual. Depois personalize os valores, teste a página e explique o que modificou.
PASSO 2 · Material de apoio
Antes de copiar: mantenha os arquivos organizados
Abra a página no navegador e confirme que ela funciona antes de modificar. No Código Pronto, identifique qual trecho pertence ao HTML e qual pertence ao CSS. Acrescente o HTML no local escolhido dentro de index.html e coloque o CSS ao final de assets/css/style.css. Não apague as classes antigas, não substitua o arquivo inteiro e não copie o CSS usado somente na prévia.
PASSO 3 · Explicação
Entenda Grid, fr e gap
display: grid transforma um contêiner em uma grade. grid-template-columns define as colunas. Em 1fr 1fr, as duas colunas dividem o espaço igualmente. Em 2fr 1fr, a primeira recebe duas partes e a segunda recebe uma. gap controla o espaço entre os itens. Quando houver uma regra @media, confira como as colunas ficam em uma tela pequena.
PASSO 4 · Desafio extra
Escolha um layout para organizar as seções
Abra o Acervo de Códigos e escolha somente uma opção: Seções lado a lado — CSS Grid; Colunas com larguras diferentes — Grid com fr; ou Blocos adaptáveis — Grid responsivo com minmax(). Aplique o código em uma parte da página e modifique pelo menos dois valores, como largura, quantidade de colunas ou espaçamento. Em seguida, reduza a largura do navegador e confirme que o conteúdo continua legível.
PASSO 5 · Explicação
Hover, transform e transition
:hover aplica um estilo quando o ponteiro passa sobre o elemento. transform pode mover ou ampliar o componente. transition deixa a mudança gradual. Escolha uma opção do acervo: Seção que se eleva — Hover com transform; Seção iluminada — Hover com box-shadow; ou Mudança suave de cor — Hover com transition. Acrescente a classe somente à seção que receberá o efeito e personalize a duração, a distância ou a cor.
PASSO 6 · Explicação
Brilho na caixa e brilho nas palavras
box-shadow cria uma sombra ou brilho ao redor da caixa do elemento. text-shadow cria sombra ou brilho nas letras. Para experimentar o texto, procure Palavra com brilho — text-shadow. Para experimentar a caixa, procure Seção iluminada — Hover com box-shadow. Troque a cor e a intensidade, mas mantenha contraste suficiente para o texto continuar fácil de ler.
PASSO 7 · Desafio extra
Personalize um título ou badge
Escolha um recurso de identidade visual. Para títulos, consulte Título marcado em amarelo — Efeito marca-texto, Palavra com brilho — text-shadow, Título em degradê — background-clip ou Sublinhado animado — Pseudo-elemento ::after. Para badges, escolha Badge preenchido — Solid badge, Badge contornado — Outline badge, Badge com ponto — Status badge, Badge em degradê — Gradient badge ou Badge em faixa — Ribbon badge. Use somente uma opção principal, troque o texto e combine as cores com o delivery.
PASSO 8 · Atenção
Revisão final do laboratório
Antes de concluir: salve os arquivos; abra index.html; teste o efeito de hover; confira a página em tela grande e pequena; verifique se outras seções não foram alteradas; confirme que HTML e CSS continuam em arquivos separados; e explique pelo menos três propriedades utilizadas. Como exploração livre, encontre no acervo um código CSS que não foi indicado diretamente pela atividade e anote seu nome em português e seu nome técnico.