💡 Economize: Este curso já está incluso no pacote completo Hashtag Treinamentos - Pacote Completo com mais 44 cursos por apenas R$ 79,90.Ver Pacote Completo →
HTML & CSS Impressionador
Curso completo ministrado por Hashtag Treinamentos
124 alunos86h 11min · 399 aulasAutor / Escola: Hashtag Treinamentos
Sobre o curso
HTML & CSS Impressionador, produzido por Hashtag Treinamentos, disponível na plataforma Mestre dos Cursos.
Ementa
21 módulos · 399 aulas01. O que é Desenvolvimento Web12:04
02. O que você vai aprender11:48
03. 2 dicas para todo programador7:17
04. Baixando e configurando nosso editor de códigos12:16
01. O que é o HTML📎 12:47
02. Estrutura de um documento HTML16:13
03. Elementos de texto13:19
04. Ênfase, Importância e Formatação de Textos10:49
05. Listas ordenadas e não ordenadas5:32
06. Hiperlinks - Parte 19:54
07. Hiperlinks - Parte 27:31
08. Imagens e seus atributos no HTML10:18
09. Ferramentas do Programador4:18
10. Desafio 1 - Apresentando o Desafio📎 19:16
11. Desafio 1 - Construindo o Desafio do Zero - Parte 1📎 18:10
12. Desafio 1 - Construindo o Desafio do Zero - Parte 26:29
13. Desafio 1 - Construindo o Desafio do Zero - Parte 37:05
14. Desafio 2 - Home da Hashtag Treinamentos7:10
15. Desafio 2 - Criando o Cabeçalho - Parte 111:03
16. Desafio 2 - Criando o Cabeçalho - Parte 212:14
17. Desafio 2 - Criando a Seção Hero3:58
18. Desafio 2 - Criando a Seção Conteúdos Gratuitos - Parte 19:16
19. Desafio 2 - Criando a Seção Conteúdos Gratuitos - Parte 29:58
20. Desafio 2 - Criando a Seção Diferenciais11:58
21. Desafio 2 - Criando a Seção O que falam5:10
22. Desafio 2 - Criando a Seção Na mídia2:09
23. Desafio 2 - Criando a Seção Blog da Hashtag9:24
24. Desafio 2 - Criando a Seção Como ajudar4:17
25. Desafio 2 - Criando a Seção Minicurso2:06
26. Desafio 2 - Criando o Rodapé13:48
01. O que é CSS📎 13:34
02. As três formas de escrever CSS - Parte 18:16
03. As três formas de escrever CSS - Parte 27:47
04. Seletores no CSS14:38
05. Combinando seletores13:14
06. Estilizando textos - Parte 110:51
07. Estilizando textos - Parte 27:08
08. Trabalhando com cores10:29
09. Estilizando hiperlinks6:36
10. Desafio 1 - Formatando uma página em HTML📎 14:13
11. Desafio 1 - Resolvendo o Desafio📎 115:55
12. Desafio 2 - Formatando a Home da Hashtag4:48
13. Desafio 2 - Formatando o Cabeçalho - Parte 19:30
14. Desafio 2 - Formatando o Cabeçalho - Parte 29:16
15. Desafio 2 - Formatando a Seção Hero7:39
16. Desafio 2 - Formatando a Seção Conteúdos Gratuitos12:37
17. Desafio 2 - Formatando a Seção Diferenciais12:14
18. Desafio 2 - Formatando a Seção O que falam4:49
19. Desafio 2 - Formatando a Seção Na mídia1:10
20. Desafio 2 - Formatando a Seção Blog da Hashtag6:01
21. Desafio 2 - Formatando a Seção Como ajudar7:36
22. Desafio 2 - Formatando a Seção Minicurso3:11
23. Desafio 2 - Formatando o Rodapé8:35
01. Apresentação do Módulo📎 14:43
02. Citações, Abreviações e Detalhes de contato11:08
03. Códigos e Datas10:11
04. Entrando mais a fundo na estrutura dos documentos15:26
05. Formulários16:59
06. Input Pattern + Regex9:53
07. Tabelas - Parte 18:37
08. Tabelas - Parte 28:57
09. iFrames8:06
10. Dialog4:05
11. selectedcontent7:47
12. Desafio 1 - Apresentando o Desafio📎 13:33
13. Desafio 1 - Construindo juntos - Parte 1📎 18:01
14. Desafio 1 - Construindo juntos - Parte 28:33
15. Desafio 1 - Construindo juntos - Parte 39:33
16. Desafio 2 - Explicando as novidades1:54
17. Desafio 2 - Completando o Cabeçalho4:30
18. Desafio 2 - Completando a Seção Hero8:43
19. Desafio 2 - Completando a Seção Conteúdos Gratuitos4:51
20. Desafio 2 - Completando a Seção Diferenciais3:10
21. Desafio 2 - Completando a Seção O que falam e Na mídia3:05
22. Desafio 2 - Completando a Seção Blog da Hashtag2:06
23. Desafio 2 - Completando a Seção Como ajudar1:33
24. Desafio 2 - Completando a Seção Minicurso6:37
25. Desafio 2 - Completando o Rodapé5:24
01. Apresentação do Módulo📎 12:45
02. Especificidade no CSS11:31
03. Trabalhando com espaçamentos11:06
04. Dimensões e unidades no CSS - Parte 110:47
05. Dimensões e unidades no CSS - Parte 211:08
06. Dimensões e unidades no CSS - Parte 36:09
07. Pseudo-classes10:15
08. Pseudo-elementos8:57
09. Seletor universal e herança de estilos11:43
10. Box Model no CSS11:14
11. Sombras13:22
12. Novas unidades no CSS (svh, lvh, dvh)8:23
13. Elementos arredondados3:52
14. Tipos de visualização15:20
15. Tipos de posicionamento - Parte 113:48
16. Tipos de posicionamento - Parte 27:56
17. Background Color e Image15:22
18. Desafio 1 - Evoluindo a página de Exercício📎 12:59
19. Desafio 1 - Gabarito - Parte 1📎 110:42
20. Desafio 1 - Gabarito - Parte 28:22
21. Desafio 1 - Gabarito - Parte 313:33
22. Desafio 2 - Aprofundando no Desafio 2📎 13:20
23. Desafio 2 - Aprofundando o Cabeçalho - Parte 111:44
24. Desafio 2 - Aprofundando o Cabeçalho - Parte 211:15
25. Desafio 2 - Aprofundando o Cabeçalho - Parte 313:33
26. Desafio 2 - Aprofundando a Seção Hero - Parte 114:31
27. Desafio 2 - Aprofundando a Seção Hero - Parte 214:43
28. Desafio 2 - Aprofundando a Seção Hero - Parte 38:00
29. Desafio 2 - Aprofundando a Seção Conteúdos Gratuitos - Parte 112:59
30. Desafio 2 - Aprofundando a Seção Conteúdos Gratuitos - Parte 214:24
31. Desafio 2 - Aprofundando a Seção Conteúdos Gratuitos - Parte 39:02
32. Desafio 2 - Aprofundando a Seção Diferenciais - Parte 111:25
33. Desafio 2 - Aprofundando a Seção Diferenciais - Parte 217:09
34. Desafio 2 - Aprofundando a Seção Diferenciais - Parte 39:48
35. Desafio 2 - Aprofundando a Seção O que falam - Parte 114:01
36. Desafio 2 - Aprofundando a Seção O que falam - Parte 214:19
37. Desafio 2 - Aprofundando a Seção O que falam - Parte 311:23
38. Desafio 2 - Aprofundando a Seção Na mídia4:46
39. Desafio 2 - Aprofundando a Blog da Hashtag - Parte 112:13
40. Desafio 2 - Aprofundando a Blog da Hashtag - Parte 29:18
41. Desafio 2 - Aprofundando a Seção Como ajudar - Parte 110:58
42. Desafio 2 - Aprofundando a Seção Como ajudar - Parte 28:38
43. Desafio 2 - Aprofundando a Seção Minicurso - Parte 18:48
44. Desafio 2 - Aprofundando a Seção Minicurso - Parte 211:03
45. Desafio 2 - Aprofundando o Rodapé - Parte 111:07
46. Desafio 2 - Aprofundando o Rodapé - Parte 214:59
47. Desafio 2 - Aprofundando o Rodapé - Parte 37:03
48. Exercícios Extras - CSS Diner1:47
01. Apresentação do Módulo📎 12:53
02. O que é e como usar o Flexbox10:28
03. Espaçamento entre os elementos7:03
04. Mudar a direção do Flexbox7:42
05. Tamanho dos elementos19:10
06. Alinhamento e Posicionamento dos elementos19:25
07. Desafio 1 - Construindo Layouts com Flexbox📎 14:09
08. Desafio 1 - Gabarito📎 128:15
09. Desafio 2 - Flexbox na Home da Hashtag📎 11:08
10. Desafio 2 - Flexbox no Cabeçalho31:49
11. Desafio 2 - Flexbox na Seção Hero14:05
12. Desafio 2 - Flexbox na Seção Conteúdos Gratuitos23:58
13. Desafio 2 - Flexbox na Seção Diferenciais39:09
14. Desafio 2 - Flexbox na Seção O que falam10:50
15. Desafio 2 - Flexbox na Seção Na mídia3:50
16. Desafio 2 - Flexbox na Blog da Hashtag12:26
17. Desafio 2 - Flexbox na Seção Como ajudar11:28
18. Desafio 2 - Flexbox na Seção Minicurso8:23
19. Desafio 2 - Flexbox no Rodapé23:56
20. Exercícios Extras - Flexbox Froggy2:11
01. Apresentação do Módulo📎 15:21
02. Paginação - Apresentando o Desafio2:16
03. Paginação - Resolução 12📎 125:52
04. Paginação - Resolução 22 + CSS Nesting10:25
05. Acordeão - Apresentando o Desafio2:03
06. Acordeão - Resolução27:49
07. Popup - Apresentando o Desafio2:08
08. Popup - Resolução45:50
09. Carrossel - Apresentando o Desafio2:38
10. Carrossel - Resolução 1242:13
11. Carrossel - Resolução 2218:42
12. Desafio 2 - Criando o Popup da Home da Hashtag📎 11:38
13. Desafio 2 - Gabarito20:53
01. Apresentação do Módulo📎 11:31
02. Como usar o Grid8:33
03. Definindo as linhas da Grade11:57
04. Definindo as colunas da Grade7:53
05. Propriedade Grid10:17
06. Posicionando os elementos15:09
07. Espaçamento entre os elementos3:50
08. Áreas dentro da Grade12:09
09. Alinhamento dos elementos6:24
10. Propriedade place-items4:27
11. Auto-fit e Auto-fill para criar Grids Responsivas9:02
12. Grid vs Flexbox4:59
13. Desafio 1 - Construindo um layout com Grid📎 13:15
14. Desafio 1 - Gabarito📎 121:26
15. Desafio 2 - Usando Grid na Seção Blog📎 11:45
16. Desafio 2 - Gabarito4:33
17. Exercícios Extras - Grid Garden1:54
01. Apresentação do Módulo📎 11:13
02. Transições - 1-223:45
03. Transições - 2-216:46
04. Efeitos 2D33:55
05. Efeitos 3D35:11
06. Keyframes9:48
07. Animation e suas propriedades22:14
08. (prefers-reduced-motion)3:20
09. Desafio 1 - Criando um Elementos Animado📎 12:59
10. Desafio 1 - Gabarito📎 120:39
11. Desafio 2 - Transições na Home da Hashtag📎 11:14
12. Desafio 2 - Gabarito24:29
01. Apresentação do Módulo📎 14:10
02. Media queries13:18
03. Desktop x Mobile First5:28
04. Escolhendo as Media Queries10:54
05. Imagens responsivas - Tag Img - 1235:10
06. O que é DPR7:36
07. Imagens responsivas - Tag Img - 2214:51
08. Imagens responsivas - Tag Picture9:11
09. Imagens responsivas - CSS17:45
10. Variáveis no CSS16:06
11. Importando Fontes23:08
12. Fontes Variáveis3:47
13. Font-stacking para otimização de fontes7:09
14. Lazy Loading7:11
15. Carregamento do CSS e Arquivos de Estilização10:55
16. Desafio 2 - Deixando a Home da Hashtag responsiva📎 14:16
17. Desafio 2 - Criando a primeira Media Query📎 128:10
18. Desafio 2 - Alterando a página inteira mudando uma única coisa29:58
19. Desafio 2 - Alterando o Layout da Seção Hero12:00
20. Desafio 2 - Alterando o Layout da Seção Conteúdos Gratuitos16:24
21. Desafio 2 - Alterando o Layout da Seção Diferenciais13:08
22. Desafio 2 - Alterando o Layout da Seção O que falam26:05
23. Desafio 2 - Alterando o Layout da Seção Na mídia7:24
24. Desafio 2 - Alterando o Layout da Seção Blog6:03
25. Desafio 2 - Finalizando o Layout da Media Query de 767 a 48017:22
26. Desafio 2 - Última Media Query para a Seção Hero e Conteúdos17:34
27. Desafio 2 - Última Media Query para as Seções Diferenciais, O que falam e Na mídia15:45
28. Desafio 2 - Finalizando a última Media Query27:42
29. Desafio 2 - Criando a Navegação Mobile27:09
30. Desafio 2 - Finalizando a Navegação Mobile23:52
31. Desafio 2 - Otimizando a Home da Hashtag45:24
32. Desafio 2 - Deploy - Colocando a nossa página no ar5:09
01. Apresentação do Módulo📎 13:15
02. Como usar as propriedades float e clear17:32
03. Desafio - Construindo um layout com float📎 11:16
04. Desafio - Gabarito📎 122:06
01. Apresentação do Módulo📎 12:00
02. Como funciona a Metodologia11:16
03. Exemplos da Metotologia8:03
04. Vantagens, Desvantagens e Conclusão14:22
05. Cuidados e Observações7:39
06. Exemplo prático📎 125:47
07. Desafio - Apresentação📎 11:34
08. Desafio - Gabarito📎 126:14
01. Apresentação do Módulo📎 12:39
02. O que é SASS5:21
03. O que é NodeJS e o que é NPM2:51
04. Instalando o NodeJS, NPM e SASS7:31
05. Criando e compilando nosso primeiro código11:15
06. Variáveis13:20
07. Nesting x Native Nesting13:42
08. Functions5:55
09. Mixins e Includes10:07
10. Extends10:20
11. Content e If21:42
12. Build Compile, Prefix and Compress17:04
13.7:47
14. Padrão 7-17:17
01. Apresentação do ProjetoDesafio4:12
02. Configurando o nosso projeto📎 17:50
03. Configurando o Padrão 7-112:08
04. Seção Hero - Parte 119:49
05. Seção Hero - Parte 220:02
06. Seção Hero - Parte 321:08
07. Seção Disclaimer12:48
08. Seção Passo - Parte 121:23
09. Seção Passo - Parte 216:39
10. Seção Aprender13:34
11. Seção Quem23:39
12. Rodapé8:51
13. Popup26:20
14. JavaScript para abrir e fechar o Popup22:22
15. Responsividade da página - Parte 122:56
16. Responsividade da página - Parte 211:11
17. Responsividade da página - Parte 324:28
18. Otimizações da página24:27
19. Finalizando as otimizações e Deploy do Projeto23:56
01. Apresentação do Projeto4:42
02. Configurações iniciais📎 211:15
03. Criando o Cabeçalho13:19
04. Estilizando o Cabeçalho - 117:13
05. Estilizando o Cabeçalho - 219:02
06. Criando o menu secundário do Cabeçalho - 112:49
07. Criando o menu secundário do Cabeçalho - 214:03
08. Finalizando o Cabeçalho - 117:27
09. Finalizando o Cabeçalho - 235:01
10. Criando o Carrossel da Home - 116:09
11. Criando o Carrossel da Home - 211:53
12. Criando o Carrossel da Home - 39:49
13. Banners da Home16:24
14. Criando o rodapé - 120:16
15. Criando o rodapé - 225:49
16. Criando o rodapé - 319:40
17. Criando o rodapé - 424:41
18. Finalizando o rodapé26:11
19. Configurando a responsividade da Home19:41
20. Home até 1280px16:47
21. Home até 950px - 119:45
22. Home até 950px - 226:16
23. Home até 950px - 322:44
24. Home até 950px - 436:34
25. Home até 950px - 518:14
26. Home até 950px - 625:34
27. Home até 480px e Finalização da Página13:22
28. Iniciando a Loja13:14
29. Menu lateral da Loja - 141:01
30. Menu lateral da Loja - 229:22
31. Finalizando o Menu lateral da Loja33:27
32. Cabeçalho dos produtos da Loja19:23
33. Finalizando os produtos da Loja34:31
34. Responsividade da Loja - 130:54
35. Responsividade da Loja - 218:55
36. Finalizando a responsividade da Loja14:26
37. Tela de Produto - 120:23
38. Tela de Produto - 224:48
39. Finalizando a Tela de Produto44:48
40. Iniciando o Carrinho13:26
41. Construindo o Carrinho38:13
42. Finalizando o Carrinho35:02
43. Iniciando o Checkout23:54
44. Construindo o Checkout23:23
45. Finalizando o Checkout39:55
46. Tela de Minha Conta29:42
47. Tela de Meus Pedidos13:12
48. Detalhes finais do projeto18:57
01. Apresentação do Módulo📎 15:19
02. Instalação via CDN9:23
03. Instalando via Package Manager (npm)8:06
04. Usando componentes prontos11:06
05. Como encontrar elementos e classes4:32
06. Containers e Breakpoints9:34
07. Grid System16:36
08. CSS Grid e Flexbox5:36
01. Apresentação do Desafio📎 25:27
02. Configurações Iniciais + Seção Hero18:33
03. Seção Disclaimer + Dark Mode15:58
04. Seção Features21:48
05. Seção Para Quem10:46
06. Seção Quem5:07
07. Rodapé9:20
08. Modal15:13
09. Responsividade13:22
10. Considerações Finais sobre o Bootstrap6:58
01. Apresentação do Módulo e do Tailwind📎 17:40
02. Instalação via CDN4:48
03. Instalação via Package Manager (npm)8:58
04. Layout da página com Flex e Grid13:41
05. Cores, Fontes e Tamanhos + Tailwind Fold19:52
06. Border-radius, Text-decoration e Ajustes na primeira dobra15:13
07. List-style, Posicionamento absoluto e Finalizando o Desktop6:35
08. Responsividade17:03
01. Apresentando o Desafio📎 28:34
02. Configurando o Projeto + Dica de organização13:40
03. Cabeçalho - 1-417:09
04. Cabeçalho - 2-421:31
05. Cabeçalho - 3-415:46
06. Cabeçalho - 4-47:44
07. Cabeçalho - Responsividade22:37
08. Hero - 1-415:58
09. Hero - 2-414:48
10. Hero - 3-422:50
11. Hero - 4-46:09
12. Hero - Responsividade25:21
13. Sob medida - 1-319:50
14. Sob medida - 2-318:05
15. Sob medida - 3-36:58
16. Sob medida - Responsividade - 1-321:13
17. Sob medida - Responsividade - 2-322:02
18. Sob medida - Responsividade - 3-36:31
19. Design5:12
20. Aproximação21:20
21. Artesanal22:42
22. Artesanal - Responsividade9:20
23. Clientes17:54
24. Clientes - Responsividade4:33
25. Online + Rodapé27:01
26. Considerações Finais sobre o Tailwind9:25
Assista às primeiras aulas de amostra
Cadastre-se para assistir às aulas de amostra e acessar o material.
Autor / Escola: Hashtag Treinamentos. Idioma: pt-BR.
R$ 17,90
Acesso imediato