HTML5 & CSS3

Bem vindo(a) ao meu 'grimório' de estudos em desenvolvimento web! 🌐✨ Aqui tem exercícios, projetos hands-on
e anotações pra revisar os fundamentos essenciais de HTML5 e CSS3 de um jeito organizado e direto ao ponto.
O conteúdo daqui vem do curso "HTML5 e CSS3", oferecido pelo Curso em Video e ministrado pelo Gustavo Guanabara! 🚀

---

Tecnologias Utilizadas:

📌 HTML5 • CSS3 • Git • GitHub • Markdown • VSCode

📂 Organização do repositório:

A navegação das pastas deste repositório segue a estrutura abaixo:

/html-css
  ├── ex001-nome/               # Pasta do primeiro projeto
  │      ├── index.html         # Página principal
  │      ├── style.css          # Estilos do projeto
  │      ├── script.js          # Código JavaScript (se houver)
  │      ├── files/             # Pasta para imagens e mídias
  ├── ex002-outro/              # Outro projeto
  │      ├── index.html
  │      └── outros-arquivos...
  └── README.md                 # Documentação do repositório

Note

Sabia que para visualizar os projetos daqui no seu pc, é fácil?!✨ Basta clonar este repositório e abrir os arquivos .html em seu navegador favorito.

📚 Conteúdo Programático

👉🏼 O curso foi dividido em 5 módulos, começando com os fundamentos de HTML e CSS e indo até skills avançadas de design, versionamento
e responsividade. Aqui embaixo tem o conteúdo organizado por módulo:

📖 Módulo 1 – Fundamentos do HTML e CSS

✔️ Estrutura básica do HTML
✔️ Uso de imagens, links e listas
✔️ Hierarquia de títulos e semântica
✔️ Introdução ao CSS (inline, interno e externo)

🎨 Módulo 2 – Design e Estilização Avançada

✔️ Psicologia das cores e paletas
✔️ Tipografia e fontes personalizadas
✔️ Modelo de caixas e pseudo-classes
✔️ Introdução à responsividade

🛠️ Módulo 3 – Versionamento, Backgrounds e Tabelas

✔️ Git e GitHub: versionamento, repositórios e GitHub Pages
✔️ Imagens de fundo: posição, tamanho e efeitos
✔️ Projeto Prático: Parallax completo
✔️ Criação e estilização de tabelas responsivas

🌍 Módulo 4 – Formulários, Iframes e Responsividade

✔️ Uso e segurança do iframe
✔️ Construção de formulários completos (inputs, labels, GET/POST)
✔️ Criação de menus e telas de login responsivas

📐 Módulo 5 – Flexbox e Grid Layout

✔️ Introdução ao Flexbox
✔️ Introdução ao Grid Layout
✔️ Direções, eixos e alinhamento

---

Important

O módulo 5 tem alguns updates pendentes, mas assim que o Profº Guanabara liberar os novos episódios do curso, vou atualizar aqui!

🔗 Links Úteis

Aqui estão alguns links que turbinaram meu aprendizado e complementaram o curso:

• 🎓 Curso HTML5 e CSS3 - Curso em Vídeo
• 📚 Documentação Oficial do HTML5
• 🎨 Documentação Oficial do CSS3
• 🛠️ Can I Use – Para conferir compatibilidade de CSS
• 🔥 Flexbox Froggy – Jogo para aprender Flexbox
• 🏗️ CSS Grid Garden – Jogo para aprender Grid Layout

🔑 Projeto: Página de Login

Note

O projeto abaixo faz parte do curso de HTML5 e CSS3 do Curso em Video e está localizado na pasta 'ex021-projeto-login' deste repositório.

Esse projeto é uma página de login feita 100% com HTML e CSS para treinar media queries!✨ No momento dessa prática, Flexbox e Grid Layout ainda não tinham sido abordados no curso, então usamos float para garantir a responsividade.

✨ O que tem de legal no projeto:

• Design minimalista: Só o essencial, sem excessos.
• Responsividade: A página fica ótima tanto no celular quanto no desktop.
• Usabilidade: O formulário é bem intuitivo e fácil de usar.
  
  

Tip

Para aplicar o que aprendi de Flexbox, eu refiz esse projeto em uma versão moderninha... quer ver a nova versão?
O código tá lá no meu repositório: GitHub - Login Screen
E a versão ao vivo é só clicar aqui: Login Screen Demo

🔓 Sobre o uso do repositório:

🏆 MIT License na área!

Esse repositório é open-source, então pode pegar, adaptar e distribuir sem crise!
Só não esquece que o conteúdo original pertence ao Profº Gustavo Guanabara e ele merece os créditos! 😉

Feito com 🩷 por Isabelli Mocci

📬 Entre em contato: LinkedIn - Isabelli Cristina Mocci Email - isabellimocci.tech@gmail.com