📚 Estudos de HTML

🎯 Visão Geral

Este repositório contém meus estudos completos de HTML5 e CSS3, organizados de forma estruturada com aulas teóricas e exercícios práticos. O objetivo é desenvolver uma base sólida em desenvolvimento web front-end.

📁 Estrutura do Projeto

Estudos-HTML/
├── README.md (este arquivo)
├── Aulas/
│   ├── README.md (documentação do curso)
│   ├── Modulo-1/ (Fundamentos do HTML)
│   ├── Modulo-2/ (Introdução ao CSS)
│   └── Modulo-3/ (Projetos Práticos)
└── Exercicios/
    ├── exercicio_1/ (Portfólio básico)
    ├── exercicio_2/ (Página com imagens)
    ├── exercicio_3/ (Listas e links)
    ├── exercicio_4/ (Formulários)
    ├── exercicio_5/ (CSS básico)
    ├── exercicio_6/ (Layout com CSS)
    ├── exercicio_7/ (Flexbox)
    ├── exercicio_8/ (Layout responsivo)
    ├── exercicio_9/ (Projeto intermediário)
    └── exercicio_10/ (Landing page completa)

📖 Conteúdo dos Módulos

🎯 Módulo 1: Fundamentos do HTML

Status: ✅ Concluído

Aulas:

• Aula 1: Introdução ao HTML e estrutura básica
• Aula 2: Elementos básicos (texto, listas, links, imagens)
• Aula 3: Tabelas e formulários
• Aula 4: Elementos semânticos e boas práticas

Habilidades desenvolvidas:

• ✅ Criar páginas HTML estruturadas
• ✅ Trabalhar com texto, listas e links
• ✅ Inserir imagens e criar formulários
• ✅ Aplicar boas práticas de HTML semântico

🎨 Módulo 2: Introdução ao CSS

Status: ✅ Concluído

Aulas:

• Aula 5: Introdução ao CSS e seletores básicos
• Aula 6: Propriedades de texto e layout
• Aula 7: Flexbox e layouts responsivos
• Aula 8: Projeto prático - Página de portfólio

Habilidades desenvolvidas:

• ✅ Aplicar estilos CSS em elementos HTML
• ✅ Criar layouts com Flexbox
• ✅ Desenvolver páginas responsivas
• ✅ Organizar código CSS de forma profissional

🚀 Módulo 3: Projetos Práticos

Status: ✅ Concluído

Aulas:

• Aula 9: Landing page completa
• Aula 10: Projeto final - Site responsivo

Habilidades desenvolvidas:

• ✅ Criar landing pages profissionais
• ✅ Desenvolver sites responsivos completos
• ✅ Organizar projetos de forma estruturada
• ✅ Implementar boas práticas de desenvolvimento

💻 Exercícios Práticos

📝 Exercício 1: Portfólio Básico

Arquivo: exercicio_1/index.html

• Criação de uma página HTML básica
• Estrutura fundamental com DOCTYPE, html, head e body
• Uso de tags de texto (h1, p, br)

🖼️ Exercício 2: Página com Imagens

Arquivo: exercicio_2/index.html

• Inserção de imagens em páginas HTML
• Uso de atributos alt para acessibilidade
• Organização de conteúdo com imagens

📋 Exercício 3: Listas e Links

Arquivo: exercicio_3/index.html

• Criação de listas ordenadas e não ordenadas
• Implementação de links internos e externos
• Navegação entre páginas

📝 Exercício 4: Formulários

Arquivo: exercicio_4/index.html

• Criação de formulários HTML
• Diferentes tipos de inputs
• Validação básica de formulários

🎨 Exercício 5: CSS Básico

Arquivo: exercicio_5/index.html e exercicio_5/style.css

• Introdução ao CSS
• Seletores básicos
• Propriedades de texto e cores

📐 Exercício 6: Layout com CSS

Arquivo: exercicio_6/index.html e exercicio_6/style.css

• Layouts com CSS
• Box model
• Posicionamento de elementos

🔄 Exercício 7: Flexbox

Arquivo: exercicio_7/index.html e exercicio_7/style.css

• Layout com Flexbox
• Alinhamento e distribuição de elementos
• Layouts responsivos básicos

📱 Exercício 8: Layout Responsivo

Arquivo: exercicio_8/index.html e exercicio_8/style.css

• Media queries
• Design responsivo
• Adaptação para diferentes dispositivos

🎯 Exercício 9: Projeto Intermediário

Arquivo: exercicio_9/index.html e exercicio_9/style.css

• Projeto prático intermediário
• Aplicação de conceitos aprendidos
• Layout mais complexo

🚀 Exercício 10: Landing Page Completa

Arquivo: exercicio_10/index.html e exercicio_10/style.css

• Landing page profissional completa
• HTML semântico avançado
• CSS responsivo e moderno
• Acessibilidade (ARIA labels)
• Formulário funcional

🛠️ Tecnologias Utilizadas

• HTML5: Estruturação de conteúdo
• CSS3: Estilização e layout
• Flexbox: Layout responsivo
• Google Fonts: Tipografia
• Git: Versionamento de código

📊 Progresso dos Estudos

Módulo	Status	Conclusão
Módulo 1 - HTML Básico	✅ Concluído	100%
Módulo 2 - CSS Básico	✅ Concluído	100%
Módulo 3 - Projetos	✅ Concluído	100%
Exercícios Práticos	✅ Concluído	100%

🎯 Objetivos Alcançados

✅ Conhecimentos Técnicos

• Estruturação de páginas web com HTML5
• Estilização avançada com CSS3
• Layout responsivo com Flexbox
• Boas práticas de acessibilidade
• HTML semântico

✅ Habilidades Práticas

• Criação de landing pages profissionais
• Desenvolvimento de sites responsivos
• Organização de código limpo e estruturado
• Versionamento com Git
• Debugging e otimização

✅ Projetos Desenvolvidos

• 10 exercícios práticos progressivos
• 1 landing page completa e profissional
• Múltiplos layouts responsivos
• Formulários funcionais
• Páginas com acessibilidade

📚 Recursos de Aprendizado

🔗 Documentação Consultada

• MDN Web Docs
• W3Schools
• CSS-Tricks

🛠️ Ferramentas Utilizadas

• Editor: VS Code
• Navegador: Chrome DevTools
• Validador: W3C HTML Validator
• Versionamento: Git

🚀 Próximos Passos

Com a base sólida em HTML e CSS, os próximos objetivos são:

1. JavaScript: Aprender programação front-end
2. Frameworks CSS: Bootstrap, Tailwind CSS
3. Frameworks JS: React, Vue.js
4. Backend: Node.js, APIs
5. Deploy: GitHub Pages, Netlify, Vercel

📞 Contato

Para dúvidas sobre os estudos ou colaboração:

• 📧 Email: [email protected]
• 💻 GitHub: https://github.com/Thiago-Tertuliano
• 📱 LinkedIn: https://www.linkedin.com/in/thiago-tertuliano/

---

🎯 Nota: Este repositório documenta minha jornada de aprendizado em desenvolvimento web. Cada exercício representa um passo na evolução das habilidades técnicas e práticas.