.jpg)
Seja muito bem-vindo à Academy Code Christ!
| 🌍 Este site está disponível em vários idiomas. Fique à vontade para usar o tradutor no topo da página e aprender no seu idioma. |
Olá! 👋
🚧 Estamos preparando este Poster!
Estamos trabalhando no conteúdo para que ele seja apresentado de forma clara, prática e organizada, assim como as aulas anteriores.
💻 Continue praticando.
🧠 Revise o que você já aprendeu.
🚀 E prepare-se para o próximo passo.
A página será atualizada assim que o conteúdo estiver pronto.
Obrigado pela sua paciência e por fazer parte da Academy Code Christ! ❤️
🧱 Estrutura
de Pastas
📁 projeto-final/
│
├── index.html
│
├── css/
│ ├── base/
│ │ ├── reset.css
│ │ ├── variables.css
│ │ ├── typography.css
│ ├── layout/
│ │ ├── header.css
│ │ ├── footer.css
│ │ ├── grid.css
│ ├── components/
│ │ ├── buttons.css
│ │ ├── cards.css
│ │ ├── theme-switcher.css
│ ├── pages/
│ │ └── home.css
│ └── main.css
│
├── js/
│ └── theme.js
│
└── imagens/
📄 Estrutura HTML (index.html)
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Portfólio - Desenvolvedor Front-End</title>
<!-- CSS crítico inline -->
<style>
body {font-family: 'Poppins', sans-serif; background: #f4f7fb; color: #222; margin:0;}
header {background: linear-gradient(90deg, #0077ff, #00c6ff); color:white; text-align:center; padding:20px;}
</style>
<!-- CSS Principal -->
<link rel="preload" href="css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/main.css"></noscript>
<link rel="icon" href="imagens/favicon.png">
</head>
<body>
<header>
<h1>Olá, eu sou <span>João Silva</span></h1>
<p>Front-End Developer | Criador de Experiências Digitais</p>
<button class="theme-switcher" id="toggleTheme">🌙 Alterar Tema</button>
</header>
<main>
<section class="sobre">
<h2>Sobre Mim</h2>
<p>Sou um desenvolvedor front-end apaixonado por design limpo, performance e experiências intuitivas. Domino CSS moderno, Flexbox, Grid e animações suaves.</p>
</section>
<section class="projetos">
<h2>Projetos Destaque</h2>
<div class="grid-projetos">
<div class="card">Landing Page Responsiva</div>
<div class="card">Dashboard com Tema Escuro</div>
<div class="card">Animações CSS Modernas</div>
</div>
</section>
<section class="contato">
<h2>Entre em Contato</h2>
<button class="button">Enviar Mensagem</button>
</section>
</main>
<footer>
<p>© 2024 João Silva — Feito com HTML5 + CSS3</p>
</footer>
<script src="js/theme.js"></script>
</body>
</html>
🎨 Variáveis e Estilos Globais (css/base/variables.css)
:root {
--clr-primary: #0077ff;
--clr-secondary: #00c6ff;
--clr-bg: #f4f7fb;
--clr-surface: #ffffff;
--clr-text: #222;
--clr-light: #fafafa;
--radius: 12px;
--shadow: 0 8px 20px rgba(0,0,0,0.08);
--transition: all 0.3s ease;
}
/* Tema Escuro */
body.dark {
--clr-bg: #111827;
--clr-surface: #1f2937;
--clr-text: #f3f4f6;
--shadow: 0 8px 20px rgba(0,0,0,0.4);
}
💎 Layout Principal (css/layout/grid.css)
main {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
padding: 40px;
}
.sobre, .projetos, .contato {
background: var(--clr-surface);
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow);
}
🧩 Componentes e Interatividade
css/components/cards.css
.grid-projetos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
text-align: center;
font-weight: 500;
transition: var(--transition);
}
.card:hover {
transform: translateY(-6px);
background: linear-gradient(145deg, var(--clr-primary), var(--clr-secondary));
color: white;
}
css/components/buttons.css
.button {
background: var(--clr-primary);
color: white;
border: none;
padding: 12px 30px;
border-radius: var(--radius);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.button:hover {
background: var(--clr-secondary);
}
css/components/theme-switcher.css
.theme-switcher {
background: var(--clr-light);
border: none;
color: var(--clr-text);
border-radius: var(--radius);
padding: 10px 20px;
cursor: pointer;
box-shadow: var(--shadow);
transition: var(--transition);
}
body.dark .theme-switcher {
background: var(--clr-surface);
color: #fff;
}
💡 Tema Dinâmico (Modo Escuro) — js/theme.js
const toggleBtn = document.getElementById("toggleTheme");
toggleBtn.addEventListener("click", () => {
document.body.classList.toggle("dark");
toggleBtn.textContent = document.body.classList.contains("dark") ? "☀️ Modo Claro" : "🌙 Modo Escuro";
});
📱 Responsividade com Media Queries (css/pages/home.css)
@media (max-width: 768px) {
main {
padding: 20px;
grid-gap: 20px;
}
header h1 {
font-size: 1.5rem;
}
.button,
.theme-switcher {
width: 100%;
}
}
⚙️ Otimização Final
Minificar todos os arquivos CSS
csso css/main.css --output
css/main.min.css
1.
Remover CSS não utilizado
npx purgecss --css css/main.min.css
--content index.html --output css/
2.
3.
Ativar compressão GZIP no servidor ou
hospedagem.
4.
Carregar o CSS principal de forma assíncrona (já
configurado no HTML).
📚 Continue aprendendo CSS:
📌🎨 Aula 1 — Introdução ao CSS
📌🎨 Aula 2 —Sintaxe, Seletores e Propriedades Essenciais
📌📦 Aula 3 — Box Model, Display e Posicionamento
📌✍️ Aula 4 — Tipografia, Cores eFundos Avançados
📌🧭 Aula 5 — Bordas,Sombreamentos e Efeitos Visuais
📌🧠 Aula 6 — Pseudo-Classes ePseudo-Elementos
📌🧩 Aula 7 — Flexbox: LayoutsFlexíveis e Responsivos
📌🧮 Aula 8 — CSS Grid: Layouts de Grade Avançados
📌📱 Aula 9 — Responsividade eMedia Queries
📌🎬 Aula 10 — Transições eAnimações no CSS
📌🎨 Aula 11 — Efeitos VisuaisAvançados: Gradientes, Sombras e Estilo Translúcido
📌🧮 Aula 12 — Variáveis eFunções no CSS (CSS Custom Properties)
📌📐 Aula 13 — Layout ResponsivoCompleto com Grid, Flexbox e Media Queries
📌🗂️ Aula 14 — Boas Práticas,Organização e Estrutura Profissional de Projeto CSS
📌⚡ Aula 15 — Performance, Otimização e Boas Práticas Avançadas de CSS
📌PROJETO FINAL — Você está nessa Aula
.png)
.png)
Postar um comentário