Curso de HTML5 e CSS3 do curso em vídeo. Estou aprendendo à criar sites no curso em vídeo, com o professor Gustavo Guanabara. Espero que aprenda bastante.
Veja os exercícios e os desafios:
| Imagem | Nome | Descrição | Acesso |
| ——— |—-|——-| ——– |
|
| Ex001 | Projeto inícial Com o famoso olá mundo, usando tags como h1, p, e hr.| aqui |
|
| Ex002 | Aprendendo HTML entities e quebra de linha com br. | aqui |
|
| Ex003 | Aprendendo a colocar imagens em HTML com img. | aqui |
|
| Ex004 | Colocando favicons em HTML. | aqui |
|
| Ex006 | Aprendendo hierarquia de títulos h1 até h6. | aqui |
|
| Ex007 | aprendendo a diferença do HTML4 e HTML5, com a semântica. | html4, html5 |
|
| Ex008 | fazendo formatações de textos de forma semântica e não semântica | aqui |
|
| Ex008b | Outras formatações de texto. | aqui |
|
| Ex009 | aprendendo listas html: ol, ul, dl. | aqui |
|
| Ex010 | Aprendendo à usar links em HTML: a. | index, pag002, pag003 |
|
| Ex011 | Aprendendo à fazer imagens responsivas e colocar áudio no HTML. | ex011 |
|
| Ex011b | Aprendendo à colocar vídeo em HTML, a partir de um arquivo interno, do Youtube ou Vimeo | aqui |
|
| Ex012 | Estilos in-line CSS. | aqui |
|
| Ex012b | Estilos internos CSS. | aqui |
|
| Ex012c | Estilos externos CSS. | aqui, pagina2 |
|
| Ex013 | Aprendendo cores, harmonia, formas de representa-la, gradiente com css e criamos um pequeno projeto, com tudo isso. | cor01, cor02, cor03 |
|
| Ex014 | Aprendendo à formatar fontes | fonte01, fonte02 |
|
| Ex014b | Aprendendo à usar fontes externas tanto pelo Google Fonts, ou baixada: ttf(truetype), otf(opentype) | fonte01, fonte02 |
|
| Ex015 | Aprendendo a diferença de class e id. E como seleciona-los no CSS. | aqui |
|
| Ex015b | Aprendendo pseudo-elementos e pseudo-classes. | hover, links, pseudo-classe |
|
| Ex016 | Aprendendo Box-model: box-shadow, padding, margin, border, outline, content, width, height, div, outras divs só que semântica, article, section, footer, main, header e etc. | caixa01, caixa02, caixa03 |
|
| Ex017 | Aprendendo as propriedades do background-image, e como alinhar uma caixa verticalmente, com position relative e absolute. | fundo001, fundo002, fundo003, fundo004, fundo005, fundo005b, fundo006, fundo007. |
|
| Tabelas | Aprendendo várias propriedades de tabelas. De forma Semântica. | Tabela001, Tabela002, Tabela003, Tabela004, Tabela005, Tabela006. |
|
| Iframes | Aprendendo a usar iframes. | iframe001, iframe002, iframe003, iframe004, iframe005, iframe006. |
|
| Formulários. | Aprendendo tecnicas de formulário, tipos de input e outros. | form001, form002, form003, form004, form005, form006, form007, form008, form009, form010 |
|
| Media Queries. | Aprendendo à usar media queries com CSS, para fazer adtaptações entre media types e features. | mq001, mq002, mq003, mq004, mq005. |
| Sem Imagem | Display flex | Aprendizagem dos conceitos do display: flex. | flex-001 flex-002 flex-003 flex-004 flex-005 flex-006 flex-007 flex-008 flex-009 flex-010 flex-011 flex-012 |
| Imagem | Nome | Descrição | Acesso |
|---|---|---|---|
![]() |
Desafio 001 | Desafio de quebra de linha e parágrafo. | aqui |
![]() |
Desafio 002 | Imagens em HTML. | aqui |
![]() |
Desafio 003 | Imagens e quebra de linha HTML. | aqui |
![]() |
Desafio 004 | Emojis e listas HTML. | aqui |
![]() |
Desafio 005 | Redes sóciais - links e descrição | aqui |
![]() |
Desafio 006 | Abreviações e listas HTML. | aqui |
![]() |
Desafio 007 | Imagens flexiveis com a tag picture | aqui |
![]() |
Desafio 008 | Navegação com links e cores. | aqui |
![]() |
Desafio 009 | Navegação entre alguns vídeos de curso. | aqui |
![]() |
Desafio 010 feito por mim | Desafio da história do Android, sem a ajuda do curso, no formato de vídeo. | aqui |
![]() |
Desafio 010 feito em vídeo | Desafio do Android feito junto em curso. | aqui |
![]() |
Desafio 011 | Desafio do astronauta no centro. | aqui |
![]() |
Desafio 012 feito por mim. | Desafio do projeto do Cordel de Milton Duarte. | aqui |
![]() |
Desafio 012 feito junto em vídeo | Projeto Cordel Moderno, com poema criado por Milton Duarte. | aqui |
![]() |
Desafio de tabelas mescladas. | Desafios de tabelas. | Tabela 1, tabela 2, tabela 3 |
![]() |
Desafio das redes sóciais. | Desafio feito no curso, usando a tecnológia de iframes, mostrando as redes sóciais. | aqui |
![]() |
Desafio de login. | Desafio feito sozinho. | aqui |
![]() |
Desafio de Login. | Desafio de Login feito junto em vídeo. | aqui |