html-css-curso-em-video
👽 Olá, Mundo!
Projetos do Curso de HTML5 e CSS3
Este repositório serve como meu diário de bordo para o curso de HTML5 e CSS3 do Curso em Vídeo, ministrado pelo professor Gustavo Guanabara. Aqui, você encontrará todos os exercícios, desafios e projetos que desenvolvi, documentando meu progresso e aprendizado com o objetivo de criar um portfólio prático e solidificar meus conhecimentos em desenvolvimento web.
🛠️ Tecnologias e Conceitos Abordados
Durante o curso, explorei os principais fundamentos do desenvolvimento web. Abaixo estão os temas abordados até o momento:
📄 HTML5
| Tópico | O que foi aprendido |
|---|---|
| Estrutura básica | Uso das tags <html>, <head>, <body> e organização do conteúdo da página. |
| HTML Semântico | Uso de <header>, <nav>, <main>, <article>, <aside>, <footer> para estruturar o conteúdo. |
| Títulos e parágrafos | Hierarquia com <h1> até <h6>, e escrita com <p>. |
| Imagens e mídias | Inserção de imagens com <img>, áudios e vídeos com <audio> e <video>. |
| Links e navegação | Criação de links internos, externos e âncoras com <a>. |
| Listas | Listas ordenadas <ol>, não ordenadas <ul> e listas de definição <dl>. |
| Tabelas | Criação e mesclagem de células com <table>, colspan e rowspan. |
| Iframes | Inserção de conteúdos externos (como vídeos do YouTube ou mapas do Google). |
| Formulários | Criação de formulários com <form>, <input>, <select>, <textarea>, <output>. |
🎨 CSS3
| Tópico | O que foi aprendido |
|---|---|
| Seletores | Seletores por tag, classe, id, pseudo-classes (:hover) e pseudo-elementos. |
| Cores e fontes | Cores (hex, rgb), fontes externas (@font-face) e tipografia web. |
| Gradientes e Sombras | Uso de linear-gradient, box-shadow e text-shadow para efeitos visuais. |
| Box Model | Conceito de conteúdo, padding, borda e margem. |
| Fundos Avançados | Imagens de fundo, posicionamento, tamanho e efeito parallax (background-attachment). |
| Variáveis CSS | Definição e uso de variáveis com :root e var() para um código mais manutenível. |
| Flexbox | Criação de layouts flexíveis e alinhamento de itens em um contêiner. |
| CSS Grid | Criação de layouts complexos baseados em grid de duas dimensões. |
| Responsividade | Uso de Media Queries (@media) e a abordagem Mobile First para adaptação de tela. |
🚀 Status do Curso
✅ Finalizei o Módulo 1
✅ Finalizei o Módulo 2
✅ Finalizei o Módulo 3
✅ Finalizei o Módulo 4
🔄 Em andamento: Módulo 5
📚 Exercícios por Módulo
📁 Acesse todos os projetos aqui
🔹 Módulo 1
| Exercício | Link |
|---|---|
| ex001 | Acessar |
| ex002 | Acessar |
| ex003 | Acessar |
| ex004 | Acessar |
| ex005 | Acessar |
| ex006 | Acessar |
| ex007a | Acessar |
| ex007b | Acessar |
| ex008 | Acessar |
| ex008b | Acessar |
| ex009 | Acessar |
| ex010 | Acessar |
| ex011 | Acessar |
| ex012 | Acessar |
| ex013 | Acessar |
| ex014 | Acessar |
| ex015 | Acessar |
🔹 Módulo 2
| Exercício / Desafio | Link |
|---|---|
| ex017 - fonte01 | Acessar |
| ex018 - seletor01 | Acessar |
| ex019 - seletor01 | Acessar |
| ex020 - hover | Acessar |
| ex020 - links | Acessar |
| ex020 - pseudoclasse | Acessar |
| ex021 - caixa01 | Acessar |
| ex021 - caixa02 | Acessar |
| cor03 - cor03 | Acessar |
| Desafio 010 - Android | Acessar |
🔹 Módulo 3
| Exercício / Desafio | Link |
|---|---|
| fundo001 | Acessar |
| fundo002 | Acessar |
| fundo003 | Acessar |
| fundo004 | Acessar |
| fundo005 | Acessar |
| fundo006 | Acessar |
| fundo007 | Acessar |
| tabela001 | Acessar |
| tabela002 | Acessar |
| tabela003 | Acessar |
| tabela004 | Acessar |
| tabela005 | Acessar |
| tabela006 | Acessar |
| Desafio 012 - Cordel | Acessar |
| Desafio 013 - Mesclagens d_tabela01 | Acessar |
| Desafio 013 - Mesclagens d_tabela02 | Acessar |
| Desafio 014 - Tabela média notas | Acessar |
🔹 Módulo 4
| Exercício / Desafio / Estudos | Link |
|---|---|
| iframe001 | Acessar |
| iframe002 | Acessar |
| iframe003 | Acessar |
| iframe004 | Acessar |
| iframe005 | Acessar |
| iframe006 | Acessar |
| Desafio 015 - pjt-redes-sociais | Acessar |
| form001 | Acessar |
| form002 | Acessar |
| form003 | Acessar |
| form004 | Acessar |
| form005 | Acessar |
| form006 | Acessar |
| form007 | Acessar |
| form008 | Acessar |
| form009 | Acessar |
| form010 | Acessar |
| mq001 | Acessar |
| mq002 | Acessar |
| mq003 | Acessar |
| mq004 | Acessar |
| mq005 | Acessar |
| projeto-login | Acessar |
🔹 Módulo 5
| Exercício / Desafio | Link |
|---|---|
| flex001 | Acessar |
| flex002 | Acessar |
| flex003 | Acessar |
| flex004 | Acessar |
| flex005 | Acessar |
| flex006 | Acessar |
| flex007 | Acessar |
| flex008 | Acessar |
| flex009 | Acessar |
| flex010 | Acessar |
| flex011 | Acessar |
| flex013 | Acessar |
| flex014 | Acessar |
| grid001 | Acessar |
| grid002 | Acessar |
| grid003 | Acessar |
| grid004 | Acessar |
| grid005 | Acessar |
| grid006 | Acessar |
| Desafio 017 - Grid-Layout | Acessar |
⚠️ Lista em atualização conforme avanço do curso.
🔗 Links úteis
🛠️ Pré-requisitos
Para visualizar ou editar os projetos, é recomendado ter:
- Um navegador moderno (Google Chrome, Mozilla Firefox, etc.)
- Um editor de código (Visual Studio Code, Sublime Text, etc.)
📥 Clonando o Repositório
```bash git clone https://github.com/LucasMB21/html-css-curso-em-video.git