📚Módulo 5

🎨 Layout e Posicionamento

💻 Aula 13 👉 Layout Responsivo Completo com Grid, Flexbox e Media Queries.

🎯 Objetivos da Aula

● Integrar Grid + Flexbox + Media Queries em um mesmo layout;

● Criar uma estrutura com cabeçalho, menu lateral, conteúdo e rodapé;

● Deixar tudo 100% adaptável a diferentes tamanhos de tela;

● Aplicar variáveis CSS para facilitar ajustes e temas;

● Encerrar com um modelo de layout profissional pronto para uso real.

🧱 1. A Estrutura do Projeto

Nosso layout será composto por:

● Header (cabeçalho) — com logo e navegação;

● Sidebar (menu lateral) — que se recolhe no mobile;

● Main (conteúdo principal) — onde ficam cards e artigos;

● Footer (rodapé) — com créditos e links simples.

Visualizando mentalmente:

+----------------------------+

| HEADER |

+------------+---------------+

| SIDEBAR | MAIN |

+------------+---------------+

| FOOTER |

+----------------------------+

📄 2. Criando o HTML Base

<!DOCTYPE html>

<head>

<title>Layout Responsivo Completo</title>

</head>

<body>

<aside>

<nav>

<a href="#">Início</a>

<a href="#">Serviços</a>

<a href="#">Portfólio</a>

<a href="#">Contato</a>

</nav>

</aside>

<main>

<h1>Bem-vindo!</h1>

</section>

</main>

</div>

</body>

</html>

🎨 3. Declarando Variáveis Globais

📄 style.css

:root {

--cor-primaria: #0077ff;

--cor-secundaria: #00c6ff;

--cor-bg: #f4f7fb;

--cor-branco: #fff;

--cor-texto: #333;

--raio: 12px;

--sombra: 0 8px 20px rgba(0,0,0,0.08);

--trans: all 0.3s ease;

--espacamento: 20px;

--largura-sidebar: 220px;

}

Essas variáveis permitem ajustar o layout inteiro com facilidade — se um cliente pedir “mude o tema pra roxo”, basta alterar uma única linha.

🧱 4. Criando a Grade com CSS Grid

Nosso container geral vai usar Grid para definir as áreas.

body {

font-family: 'Poppins', sans-serif;

background: var(--cor-bg);

color: var(--cor-texto);

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

.container {

display: grid;

grid-template-areas:

"header header"

"aside main"

"footer footer";

grid-template-columns: var(--largura-sidebar) 1fr;

grid-template-rows: 70px auto 60px;

width: 90%;

max-width: 1200px;

background: var(--cor-branco);

border-radius: var(--raio);

box-shadow: var(--sombra);

overflow: hidden;

}

💡 Aqui usamos áreas nomeadas e definimos o layout principal da página.

🧭 5. Estilizando Cada Seção

header {

grid-area: header;

background: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria));

color: white;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

font-weight: 600;

}

aside {

grid-area: aside;

background: #e5efff;

padding: var(--espacamento);

}

main {

grid-area: main;

padding: var(--espacamento);

}

footer {

grid-area: footer;

background: var(--cor-primaria);

color: white;

display: flex;

justify-content: center;

align-items: center;

}

🧭 6. Menu Lateral com Flexbox

nav {

display: flex;

flex-direction: column;

gap: 12px;

}

nav a {

text-decoration: none;

color: var(--cor-texto);

background: #f8faff;

padding: 10px 15px;

border-radius: var(--raio);

transition: var(--trans);

}

nav a:hover {

background: var(--cor-primaria);

color: white;

}

👉 O menu lateral se adapta facilmente e responde a eventos de hover com transições suaves.

📦 7. Cards com Flexbox Interno

.cards {

display: flex;

flex-wrap: wrap;

gap: var(--espacamento);

}

.card {

flex: 1 1 250px;

background: #ffffff;

box-shadow: var(--sombra);

padding: 20px;

border-radius: var(--raio);

text-align: center;

transition: transform 0.3s;

}

.card:hover {

transform: translateY(-8px);

}

💡 Assim, os cards se ajustam automaticamente conforme o espaço disponível — sem precisar de Grid dentro da seção.

📱 8. Responsividade com Media Queries

Agora adaptaremos o layout para telas menores.

/* Tablets */

@media (max-width: 900px) {

.container {

grid-template-columns: 180px 1fr;

}

/* Celulares */

@media (max-width: 650px) {

.container {

grid-template-areas:

"header"

"main"

"aside"

"footer";

grid-template-columns: 1fr;

grid-template-rows: 70px auto auto 60px;

}

aside {

text-align: center;

}

nav {

flex-direction: row;

justify-content: center;

flex-wrap: wrap;

}

nav a {

flex: 1 1 45%;

}

💥 Resultado:

● Em telas grandes, sidebar à esquerda;

● Em tablets, sidebar menor;

● Em smartphones, sidebar vai para baixo do conteúdo e o menu vira horizontal responsivo!

🧠 9. Relembrando o Que Acontece Aqui

✔️ Grid define o layout principal (estrutura global);
✔️ Flexbox organiza menus e cards (componentes internos);
✔️ Media Queries tornam tudo adaptável;
✔️ Variáveis controlam o design globalmente.

💬 É exatamente assim que os layouts profissionais reais são construídos.

🧩 10. Melhorando com um Tema Escuro (Bônus)

Podemos reaproveitar variáveis para adicionar um modo escuro:

body.dark {

--cor-bg: #111827;

--cor-branco: #1f2937;

--cor-texto: #f3f4f6;

--sombra: 0 8px 20px rgba(0,0,0,0.4);

}

Depois, com JavaScript simples:

document.body.classList.toggle('dark');

💡 Troque o tema e o layout inteiro muda automaticamente.

💎 11. Dicas Profissionais

✅ Use Grid para layout global e Flexbox para componentes internos;
✅ Sempre defina espaçamento e sombras via variáveis;
✅ Pense mobile first;
✅ Mantenha o design modular — cada seção deve funcionar isoladamente;
✅ Teste em diferentes dispositivos (modo responsivo dos navegadores).

🧠 12. O Que Você Aprendeu Hoje

✔️ Criar layouts complexos e adaptativos com CSS moderno;
✔️ Integrar Grid e Flexbox de forma eficiente;
✔️ Aplicar variáveis e media queries para responsividade real;
✔️ Criar componentes reutilizáveis e elegantes;
✔️ Montar um projeto completo, funcional e escalável.

🚀 Próxima Aula: Boas Práticas, Organização e Estrutura Profissional de Projeto CSS

Na próxima aula, você aprenderá a:

● Organizar pastas e arquivos de CSS profissionalmente;

● Criar arquiteturas escaláveis (BEM, SMACSS);

● Adotar convenções e padrões de código;

● Montar um design system pessoal para crescer como desenvolvedor front-end.

💻 Aula 14 👉 Boas Práticas, Organização e Estrutura Profissional de Projeto CSS.

🎯 Objetivos da Aula

● Aprender a organizar pastas e arquivos CSS em projetos grandes;

● Compreender metodologias como BEM e SMACSS;

● Evitar conflitos e redundâncias no CSS;

● Criar um código consistente, modular e escalável;

● Estruturar um Design System CSS simples e eficiente.

🧱 1. Por Que a Organização é Essencial

Quando só temos uma ou duas páginas, usar um único arquivo style.css pode funcionar.
Mas em projetos reais — com centenas de componentes, múltiplas páginas e times de programação — o CSS pode se tornar um caos.

Problemas comuns:

● Estilos se sobrescrevem por acidente;

● Classes confusas (.menu2-blue-new 🤯);

● Dificuldade em alterar cores ou espaçamentos globais;

● Códigos longos e difíceis de dar manutenção.

💡 A boa organização é o que diferencia um CSS amador de um CSS profissional.

🧩 2. Estrutura de Pastas e Arquivos

Vamos aprender uma estrutura base — simples, modular e profissional.

📁 css/

│

├── base/

│ ├── reset.css

│ ├── variables.css

│ ├── typography.css

│

├── layout/

│ ├── header.css

│ ├── footer.css

│ ├── grid.css

│

├── components/

│ ├── buttons.css

│ ├── cards.css

│ ├── forms.css

│

├── pages/

│ ├── home.css

│ ├── about.css

│ ├── contact.css

│

└── main.css

💡 Como Funciona

● base/ → estilos globais e fundacionais

● layout/ → estrutura da página, como cabeçalhos e rodapés

● components/ → elementos reutilizáveis (botões, cards etc.)

● pages/ → personalizações específicas de páginas

● main.css → arquivo principal, que importa todos os outros.

📥 3. Arquivo Principal — main.css

Esse arquivo central importa tudo:

/* Arquivos base */

@import url('base/reset.css');

@import url('base/variables.css');

@import url('base/typography.css');

/* Estruturas */

@import url('layout/header.css');

@import url('layout/footer.css');

@import url('layout/grid.css');

/* Componentes reutilizáveis */

@import url('components/buttons.css');

@import url('components/cards.css');

@import url('components/forms.css');

/* Páginas individuais */

@import url('pages/home.css');

@import url('pages/about.css');

@import url('pages/contact.css');

💬 Assim, cada parte do código tem sua responsabilidade definida, e alterações são isoladas e seguras.

🧠 4. Metodologia BEM (Block, Element, Modifier)

Um dos métodos mais usados para organizar classes CSS de forma semântica e previsível.

🌐 Estrutura:

.blocos__elemento--modificador

✅ Exemplo:

<h3 class="card__titulo">Título</h3>

<p class="card__texto">Conteúdo do card</p>

</div>

📄 CSS

.card {

background: #fff;

padding: 20px;

border-radius: 12px;

box-shadow: 0 8px 20px rgba(0,0,0,0.1);

}

.card--destaque {

background: linear-gradient(to right, #0077ff, #00c6ff);

color: white;

}

.card__titulo {

font-size: 1.3rem;

font-weight: 600;

}

.card__texto {

font-size: 1rem;

}

💡 Vantagens do BEM:

● Nenhum conflito de classes;

● Estrutura coerente e fácil de entender;

● Isolamento de componentes (módulos independentes);

● Escalabilidade e legibilidade.

💬 Com BEM, você sabe exatamente o que cada classe faz, e seu CSS cresce de forma controlada.

🔮 5. Metodologia SMACSS (Scalable and Modular Architecture for CSS)

Outro sistema de organização, mais abrangente, focado em separar o CSS por função.

Estrutura Básica SMACSS

Categoria O que contém Exemplo

Base → Estilos globais (tags HTML) → html, body, a

Layout → Estrutura (header, footer, sidebar) → .l-header, .l-footer

Module → Componentes reutilizáveis → .btn, .card, .slider

State → Estados especiais → .is-active, .is-open

Theme → Variações de cor e estilo → .theme-dark, .theme-light

💬 Você pode combinar SMACSS com BEM — essa é uma prática comum em times profissionais.

💎 6. Reset e Normalize

Todo projeto profissional começa com um reset de estilos básicos, para garantir consistência entre navegadores.

Simples reset.css:

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

img {

max-width: 100%;

height: auto;

}

a {

text-decoration: none;

color: inherit;

}

ul { list-style: none; }

Ou, se quiser algo mais robusto, você pode usar Normalize.css — um reset profissional mantido pela comunidade.

🎨 7. Criando um Design System Simples

Seu Design System é o coração visual do projeto — uma coleção de:

● Cores 📘

● Tipografia ✍️

● Espaçamento e tamanhos 📏

● Componentes padronizados 🎛️

📄 Exemplo de arquivo: base/variables.css

:root {

/* Cores */

--clr-primary: #0077ff;

--clr-secondary: #00c6ff;

--clr-bg: #f4f4f4;

--clr-text: #222;

/* Tipografia */

--font-base: 'Poppins', sans-serif;

--fs-large: 2rem;

--fs-medium: 1.2rem;

--fs-small: 0.9rem;

/* Espaçamento */

--space-s: 8px;

--space-m: 16px;

--space-l: 24px;

/* Bordas */

--radius: 12px;

}

📄 Exemplo de uso no components/buttons.css:

.button {

background: var(--clr-primary);

color: white;

border-radius: var(--radius);

padding: var(--space-m) var(--space-l);

font-size: var(--fs-medium);

cursor: pointer;

transition: background 0.3s ease;

}

.button:hover {

background: var(--clr-secondary);

}

💡 Qualquer ajuste no Design System refletirá em todo o projeto automaticamente.

🧩 8. Nomeando Classes de Forma Inteligente

Dicas para nomes de classes claros e consistentes:

Ruim Melhor

.azul-botao-novo .button--primary

.textoGrd .heading--large

.menu2 .nav--secondary

.blocoA .card

👉 Sempre use nomes semânticos (o que o elemento é, não como ele parece).

⚡ 9. Convenções e Boa Escrita

✅ Use letras minúsculas e hífens (.menu-item);
✅ Uma classe = uma função clara;
✅ Organize CSS em seções e comentários;
✅ Priorize legibilidade, não abreviação;
✅ Nunca repita propriedades desnecessárias.

💬 Seu código é lido por outros — pense nele como um texto técnico.

🚀 10. Ferramentas Profissionais

Para projetos grandes, você pode integrar ferramentas modernas:

● Sass/SCSS — pré-processador com variáveis, mixins e heranças;

● PostCSS — adiciona compatibilidade e otimizações;

● Autoprefixer — garante suporte para navegadores antigos;

● Stylelint — verifica erros e mantém o código padronizado.

Essas ferramentas aceleram o fluxo e trazem qualidade industrial ao seu CSS.

🧠 11. O Que Você Aprendeu Hoje

✔️ Organizar e escalar projetos CSS com pastas e módulos;
✔️ Escrever código claro e reutilizável com BEM e SMACSS;
✔️ Criar um design system modular com variáveis CSS;
✔️ Aplicar boas práticas de nomenclatura, reset e consistência;
✔️ Preparar seus projetos para manutenção e crescimento real.

🎓 Próximos Aula: Performance, Otimização e Boas Práticas Avançadas de CSS

Na próxima (e última) aula da série, você vai aprender a:

● Otimizar o CSS para carregamento rápido;

● Usar técnicas de minificação e compressão;

● Implementar o CSS crítico (Critical CSS) para SEO e velocidade;

● Eliminar código não usado (CSS purge);

● Atingir nível profissional de performance e qualidade.

💻 Aula 15 👉 Performance, Otimização e Boas Práticas Avançadas de CSS.

🎯 Objetivos da Aula

● Entender o impacto da performance do CSS no carregamento do site;

● Aprender a minificar e comprimir arquivos CSS;

● Implementar CSS crítico (Critical CSS);

● Eliminar estilos não utilizados (CSS purge);

● Aplicar boas práticas avançadas para SEO e eficiência;

● Aprender como integrar o CSS otimizado em projetos profissionais.

🚀 1. Por Que a Performance Importa

A velocidade do site é fator de ranqueamento no Google e impacta diretamente a experiência do usuário.
Estudos mostram que cada segundo extra de carregamento pode reduzir 20% das conversões. 😬

👉 Quanto mais rápido o seu CSS carregar, melhor será a nota do Google Lighthouse, o engajamento do usuário e a taxa de retenção.

⚙️ 2. Minificação de CSS

A minificação remove espaços, quebras e comentários desnecessários, reduzindo o tamanho do arquivo sem mudar sua função.

Antes (não minificado):

body {

background: #fff;

color: #333;

}

h1 {

font-size: 2rem;

}

Depois (minificado):

body{background:#fff;color:#333}h1{font-size:2rem}

💡 Ferramentas para Minificar

Você pode usar:

● CSS Minifier (online e rápido);

● VS Code Extensions — como “Minify” ou “Live Sass Compiler”;

● Build Tools — pelo terminal, com Gulp, Webpack ou Parcel.

📦 Exemplo com NPM:

npm install csso-cli -g

csso style.css --output style.min.css

🎯 Resultado: arquivos menores = site mais rápido e eficiente.

🪶 3. Compressão GZIP e Brotli

Além de minificar, comprimir via servidor reduz ainda mais o tamanho dos arquivos transferidos.

● GZIP → compatível com quase todos os navegadores;

● Brotli → mais moderno e eficiente (usado por Google e Cloudflare).

💡 Se estiver hospedando em um servidor como Netlify, Vercel ou Firebase, essas compressões já vêm ativadas.

Para servidores próprios, adicione este código no .htaccess (Apache):

# Compressão GZIP

AddOutputFilterByType DEFLATE text/css text/html application/javascript

🧠 4. CSS Crítico (Critical CSS)

O Critical CSS é o estilo necessário para renderizar a parte visível da página imediatamente.
Ele é carregado inline no <head>, para que o conteúdo apareça rápido, e o restante do CSS é carregado depois.

💬 Exemplo:

<head>

<style>

/* CSS crítico - apenas o essencial */

body { font-family: 'Poppins', sans-serif; background: white; color: #333; }

header { background: #0077ff; color: white; padding: 20px; }

</style>

</head>

💡 Assim, o usuário vê o conteúdo instantaneamente, enquanto o restante do CSS é carregado assíncronamente.

🔧 Ferramentas para Gerar Critical CSS

● Critical by Addy Osmani (Node.js tool);

● Ferramentas online como CriticalCSS.com;

Plugins para Webpack ou Gulp, como critical-webpack-plugin.

🧹 5. Removendo CSS Não Utilizado (CSS Purge)

Muitos sites acabam com estilos não usados — de bibliotecas, templates antigos ou componentes desativados.
Esses estilos desnecessários deixam os arquivos lentos.

💎 Ferramenta para limpar o CSS:

● PurgeCSS

📦 Instalação e uso:

npm install purgecss --save-dev

npx purgecss --css style.css --content index.html --output css/

💬 Isso cria uma nova versão do CSS, contendo apenas o que seu HTML realmente usa.

🧩 6. Dividindo o CSS (Code Splitting)

Outra tática de performance é dividir o CSS conforme a necessidade.
Por exemplo:

● Um arquivo leve para o layout principal;

● Arquivos separados para páginas específicas (home.css, about.css etc.).

Assim, o navegador carrega apenas o necessário em cada página, reduzindo o peso total.

⚡ 7. Carregamento Assíncrono de CSS

Por padrão, os navegadores bloqueiam o carregamento da página até o CSS ser processado.
Para otimizar isso, você pode usar o carregamento assíncrono:

💡 Essa técnica melhora o tempo até a primeira renderização (First Paint) e é recomendada por ferramentas como o Google PageSpeed Insights.

🧠 8. Boas Práticas de Performance

✅ Mais importante no topo: estilos críticos primeiro, extras depois;
✅ Evite “@import” indevido dentro de CSS (use no HTML principal);
✅ Agrupe seletores semelhantes para reduzir repetições;
✅ Prefira classes a seletores complexos (.menu é mais rápido que ul li a);
✅ Evite aninhamento desnecessário;
✅ Adie scripts e fontes externas não essenciais;
✅ Use cache do navegador para arquivos CSS estáticos.

💬 Pequenas otimizações podem reduzir segundos inteiros no carregamento final.

📊 9. Ferramentas de Medição de Performance

Após otimizar, sempre teste com:

● ⚙️ Google Lighthouse — integrado ao DevTools do Chrome.

● ⚡ GTMetrix — análise completa do carregamento.

● 🚀 WebPageTest — relatórios detalhados por região e rede.

💡 Estas ferramentas mostram exatamente o impacto das melhorias no tempo de renderização, SEO e usabilidade.

💎 10. Otimização Visual e Design System

Combine performance com consistência:

● Use variáveis CSS em vez de repetições;

● Prefira ícones SVG em vez de imagens pesadas;

● Comprima imagens com TinyPNG ou Squoosh;

● Padronize espaçamentos e cores (usa menos CSS e mais reuso de componentes).

💬 Quanto mais consistente o design, menor o tamanho do CSS necessário.

🧩 11. Prática — Otimizando um Projeto Real

Um mini roteiro para aplicar no seu projeto final:

1. Consolidar variáveis e estilos comuns;

2. Separar CSS utilizado por sessão/página;

3. Minificar todos os arquivos (style.min.css);

4. Aplicar Critical CSS inline no <head>;

5. Ativar compressão no servidor (GZIP/Brotli);

6. Realizar teste de performance com Lighthouse;

7. Corrigir gargalos e repetir o processo.

🏁 Seu objetivo: atingir nota superior a 90 em Performance CSS.

📈 12. Boas Práticas Avançadas para Times

Em equipes grandes:

● Use controle de versão (Git) para rastrear mudanças de estilos;

● Integre linting automático com Stylelint para manter consistência;

● Documente padrões em um arquivo STYLEGUIDE.md;

● Integre testes automatizados (Visual Regression Testing);

● Use pipelines de CI/CD para minificação automática e purge de CSS.

💡 Isso garante padrão, qualidade e escalabilidade em projetos corporativos.

🧠 13. O Que Você Aprendeu Nesta Aula

✔️ Como minificar, comprimir e dividir CSS;

✔️ O uso de Critical CSS para renderização instantânea;

✔️ Como eliminar estilos mortos com PurgeCSS;

✔️ Estratégias de carregamento assíncrono e cache;

✔️ Ferramentas e métricas de performance reais;

✔️ Como construir código CSS leve, rápido e de nível profissional.

🎓 Parabéns!

🎉 Você concluiu com sucesso o Curso Completo de CSS Moderno e Profissional!
Agora você domina:

● CSS moderno (Flexbox, Grid, Variáveis, Animações, Media Queries);

● Estrutura e organização profissional (BEM, SMACSS, Design Systems);

● Performance e otimização real (Critical CSS, Purge, Minificação);

● Diretrizes de design e eficiência usadas pelas grandes empresas.

📚 Adquira Nosso Livro Impresso

A venda de livros e materiais didáticos é destinada exclusivamente à manutenção e expansão da Academy Code, permitindo que mais jovens tenham acesso à educação tecnológica de qualidade e preparação para o mercado de trabalho.

🛒 Adquira nossos livros

📚Módulo 5

🎨 Layout e Posicionamento

💻 Aula 13 👉 Layout Responsivo Completo com Grid, Flexbox e Media Queries.

🎯 Objetivos da Aula

🧱 1. A Estrutura do Projeto

📄 2. Criando o HTML Base

🎨 3. Declarando Variáveis Globais

🧱 4. Criando a Grade com CSS Grid

🧭 5. Estilizando Cada Seção

🧭 6. Menu Lateral com Flexbox

📦 7. Cards com Flexbox Interno

📱 8. Responsividade com Media Queries

🧠 9. Relembrando o Que Acontece Aqui

🧩 10. Melhorando com um Tema Escuro (Bônus)

💎 11. Dicas Profissionais

🧠 12. O Que Você Aprendeu Hoje

🚀 Próxima Aula: Boas Práticas, Organização e Estrutura Profissional de Projeto CSS

💻 Aula 14 👉 Boas Práticas, Organização e Estrutura Profissional de Projeto CSS.

🎯 Objetivos da Aula

🧱 1. Por Que a Organização é Essencial

🧩 2. Estrutura de Pastas e Arquivos

💡 Como Funciona

📥 3. Arquivo Principal — main.css

🧠 4. Metodologia BEM (Block, Element, Modifier)

🌐 Estrutura:

✅ Exemplo:

💡 Vantagens do BEM:

🔮 5. Metodologia SMACSS (Scalable and Modular Architecture for CSS)

Estrutura Básica SMACSS

💎 6. Reset e Normalize

Simples reset.css:

🎨 7. Criando um Design System Simples

🧩 8. Nomeando Classes de Forma Inteligente

⚡ 9. Convenções e Boa Escrita

🚀 10. Ferramentas Profissionais

🧠 11. O Que Você Aprendeu Hoje

🎓 Próximos Aula: Performance, Otimização e Boas Práticas Avançadas de CSS

💻 Aula 15 👉 Performance, Otimização e Boas Práticas Avançadas de CSS.

🎯 Objetivos da Aula

🚀 1. Por Que a Performance Importa

⚙️ 2. Minificação de CSS

Antes (não minificado):

Depois (minificado):

💡 Ferramentas para Minificar

🪶 3. Compressão GZIP e Brotli

🧠 4. CSS Crítico (Critical CSS)

💬 Exemplo:

🔧 Ferramentas para Gerar Critical CSS

🧹 5. Removendo CSS Não Utilizado (CSS Purge)

🧩 6. Dividindo o CSS (Code Splitting)

⚡ 7. Carregamento Assíncrono de CSS

🧠 8. Boas Práticas de Performance

📊 9. Ferramentas de Medição de Performance

💎 10. Otimização Visual e Design System

🧩 11. Prática — Otimizando um Projeto Real

📈 12. Boas Práticas Avançadas para Times

🧠 13. O Que Você Aprendeu Nesta Aula

🎓 Parabéns!

🎉 Você concluiu com sucesso o Curso Completo de CSS Moderno e Profissional! Agora você domina:

📚 Adquira Nosso Livro Impresso

A venda de livros e materiais didáticos é destinada exclusivamente à manutenção e expansão da Academy Code, permitindo que mais jovens tenham acesso à educação tecnológica de qualidade e preparação para o mercado de trabalho.

🎉 Você concluiu com sucesso o Curso Completo de CSS Moderno e Profissional!
Agora você domina: