Curso HTML5 e CSS3: Módulo 5 de 5 [40 HORAS]
O que vamos aprender no módulo 5?
O que vamos aprender no módulo 5 do Curso em Vídeo de HTML5 e CSS3? Veja nesse vídeo os principais tópicos do nosso primeiro módulo do curso.
Tópicos desse vídeo:
00:00 - Começa aqui o módulo 5
00:58 - O que aprendemos até aqui?
02:05 - O que aprenderemos no Módulo 5
02:22 - Conhece as caixas flexíveis?
04:23 - Conheça os layouts em grade
05:37 - O projeto final do curso
06:39 - Quer certificado desse curso?
07:45 - Passo-a-passo pra fazer o curso pelo site
11:20 - Passo-a-passo pra conseguir o certificado
12:35 - Dica pra economizar em créditos
14:16 - E se eu quiser tirar dúvidas do curso?
15:45 - Encerramento
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A00
Primeiros passos com Flexbox CSS
Como usar Flexbox com HTML e CSS? O que é um contêiner? O que são itens do Flexbox? Como criar um exemplo simples de site usando Flexbox? Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - Duas perguntas malucas
00:55 - Você conhece o curso completo?
01:55 - Educação muda vidas
03:06 - CSS Flexible Box Module Level 1
04:20 - CSS Grid Layout Module Level 1/2
05:02 - Outros Layouts mais antigos
06:30 - Qual é o formato da água?
08:25 - Entendendo Flexbox
09:44 - Limitações do display:block
10:32 - Comportamento do display:flex
11:50 - Comportamento de caixas flexíveis
12:27 - Caixas adaptáveis
12:49 - Eixo principal na direção vertical
13:29 - Quem é o pai?
14:23 - Faça os módulos pelo site
14:58 - Colocando a mão na massa
17:09 - Primeiro exemplo prático Flexbox
20:09 - O que veremos a seguir?
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A01
Direções e Eixos Flexbox CSS
Você sabe definir as direções e eixos do Flexbox? Sabe configurar a propriedade flex-direction de um Container Flexível? Sabe a diferença entre row, row-reverse, column e column-reverse? Sabe identificar o eixo principal e transversal? Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - Direções e Eixos Flexbox
00:27 - O que vimos até aqui
01:13 - Construtores de site
02:24 - Contêiner e itens
03:06 - Configurando o flex-direction
05:08 - Direção row-reverse
05:35 - Direção column
06:24 - Direção column-reverse
07:01 - Entendendo os eixos
07:37 - Eixo principal
08:09 - Eixo transversal
08:56 - Um resumo muito valioso
11:10 - A importância de conhecer tudo isso
12:01 - Faça outros cursos grátis
12:40 - Exemplo prático
17:26 - A importância dessa teoria
18:30 - O que vem na próxima aula?
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A02
Empacotamento e fluxo no Flexbox CSS
Você sabe como usar a propriedade flex-wrap dentro do container Flex do seu site? Sabe qual é a diferença entre nowrap, wrap e wrap-reverse? Sabe como funciona o flex-flow para simplificar? Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - Direções e Eixos Flexbox
00:52 - O que aprendemos até aqui
01:27 - Quer aprender a programar?
02:42 - Entendendo o flex-wrap
04:05 - O valor nowrap do flex-wrap
05:18 - O valor wrap do flex-wrap
06:40 - O valor wrap-reverse do flex-wrap
08:04 - Um resumo muito importante! Anote!
10:08 - Quer um notebook para desenvolvedor?
11:04 - Exemplo prático com flex-wrap
16:00 - Simplificando tudo com flex-flow
16:49 - Usando o flex-flow na práti ca
17:39 - Usando o flex: auto
22:06 - O que vamos ver a seguir?
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A03
Alinhamento nos eixos Flexbox
Você sabe usar as propriedades Flexbox justify-content e align-items? Sabe a diferença entre valores de alinhamento flex-start, flex-end, center, space-between, space-evenly e space-around? Sabe como fazer o alinhamento nos eixos principal e transversal do Flexbox? Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - Alinhamento nos eixos Flexbox
01:53 - Cursos que podem ajudar na sua carreira
02:52 - Uma revisão rápida
04:25 - Alinhamento no eixo principal
05:34 - justify-content: flex-start
07:00 - justify-content: flex-end
07:38 - justify-content: center
08:31 - justify-content: space-between
09:22 - justify-content: space-evenly
10:08 - justify-content: space-around
11:01 - Comparando os resultados
12:10 - E quando muda a direção dos eixos?
13:53 - Ajude o projeto do Curso em Vídeo
14:32 - Exercício prático com alinhamentos
16:03 - Testando os alinhamentos que aprendemos
18:09 - Alinhamento no eixo transversal
19:07 - align-items: stretch
19:44 - align-items: flex-start
20:24 - align-items: flex-end e center
21:16 - Teste prático do align-items
22:22 - Está tendo alguma dificuldade?
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A04
Centralização absoluta com Flexbox
Você sabe centralizar os elementos usando Flexbox? Sabe como fazer uma centralização absoluta dos componentes usando CSS Flexbox? Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - Centralização com Flexbox
01:33 - Quer aprender as linguagens C e C# ?
02:26 - Centralizando um item
04:23 - Lembrando do justify-content e align-items
05:36 - Exemplo prático para centralização
08:39 - Alinhamento da section
11:47 - Atualizando o repositório remoto
13:06 - Acompanha a gente nas redes sociais
13:52 - O que vem a seguir?
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A05
Alinhamento de elementos empacotados no Flexbox
Você sabe alinhar os elementos empacotados usando Flexbox? Sabe como fazer vários tipos de alinhamento dos componentes empacotados usando CSS Flexbox? Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - Alinhando conteúdo com Flexbox
02:08 - Hospedagem de sites com cursos
03:11 - O que é conteúdo empacotado?
05:33 - Entendendo a propriedade align-content
06:03 - Diferença align-content, align-items e justify-content
06:48 - align-content: stretch
08:31 - align-content: flex-start
09:13 - align-content: flex-end
09:46 - align-content: center
10:22 - align-content: space-between
11:12 - align-content: space-evenly
11:58 - align-content: space-around
12:45 - Precisa de um computador pra estudar?
13:41 - Exemplo prático
17:10 - Testando cada valor de align-content
21:39 - O que vem a seguir?
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A06
Anatomia dos itens Flexbox
Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - Anatomia dos itens Flexbox
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A07
Propriedade flex
Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - Usando o flex-basis
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A08
Controle do tamanho de itens flexíveis
Você sabe como controlar o tamanho dos itens dentro de um container flexível? Sabe como usar as propriedades flex-shrink e flex-grow? Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - Tamanhos de itens flexíveis
01:54 - Quer tirar dúvidas do curso?
03:20 - Propriedades que se aplicam aos itens
05:14 - Configurando o flex-basis
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A09
A propriedade flex
Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - ???
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A10
Criando um menu com Flexbox (parte 1)
Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - ???
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A11
Criando um menu com Flexbox (parte 2)
Veja nesse vídeo a resposta para essas e muitas outras perguntas.
Tópicos desse vídeo:
00:00 - ???
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A12
Menu Responsivo com Flexbox e Media Queries na Prática
Este vídeo é uma aula prática sobre a criação de um menu responsivo com flexbox e media queries em HTML e CSS. O instrutor demonstra como adaptar o layout do menu para diferentes tamanhos de tela, garantindo uma experiência de usuário ideal em dispositivos móveis, tablets e desktops.
Assuntos Abordados:
0:00 - Introdução ao exercício de menu responsivo com flexbox
0:36 - Importância de entender a teoria antes da prática
1:02 - Adição de media queries para telas menores
1:24 - Discussão sobre a combinação de flexbox e media queries
2:13 - Anúncio do curso de análise de dados com BI da Recode
3:13 - Demonstração do projeto em diferentes tamanhos de tela
3:50 - Identificação do problema de quebra do menu em telas pequenas
4:18 - Implementação de media queries para corrigir o layout em dispositivos móveis
6:31 - Mudança na direção do menu para telas menores
7:04 - Ajuste no layout do cabeçalho para telas menores
8:35 - Menção ao exercício anterior sobre menu hambúrguer
9:27 - Adição de sombra ao texto
10:00 - Comparação de diferentes opções de layout de menu
10:46 - Revisão do código HTML e CSS
11:21 - Chamada para interação com o vídeo (curtir, comentar, compartilhar)
11:58 - Conclusão e convite para o próximo exercício
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A13
Conteúdo flexível apenas com Flexbox (parte 1)
Aprenda como utilizar Flexbox em CSS para organizar o conteúdo de um site de forma eficiente e responsiva, sem usar Media Queries. O Guanabara vai demonstrar como criar um layout onde os elementos se adaptam a diferentes tamanhos de tela, incluindo a inversão da ordem de elementos (texto e mídia) em dispositivos móveis.
Assuntos Abordados e Tempo:
0:00 - Introdução ao exercício de Flexbox
0:30 - Hospedagem profissional com Hostnet
2:36 - Apresentação do layout do site a ser construído
5:03 - Início da construção do projeto
10:44 - Estrutura do código HTML
14:21 - Reset CSS e estilos iniciais
16:11 - Estilização do header e section
17:55 - Preparação para a próxima aula
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A14
Conteúdo flexível apenas com Flexbox (parte 2)
Este vídeo dá continuidade a um projeto de desenvolvimento web utilizando Flexbox em CSS. O Guanabara vai demonstrar como criar um layout flexível onde os elementos se adaptam a diferentes tamanhos de tela, com foco na organização de conteúdos (texto e mídia) e no comportamento dos elementos ao redimensionar a tela. Ele também aborda a importância da prática no aprendizado de desenvolvimento web e apresenta cursos complementares de hardware e redes.
Assuntos Abordados e Tempo:
0:00 - Continuação do projeto Flexbox
0:32 - Cursos de hardware e redes no Estudonauta
2:46 - Revisão do HTML da aula anterior
3:25 - Estilização com Flexbox: parte 1
10:00 - Estilização com Flexbox: parte 2 (justify-content)
10:48 - Estilização das mídias (imagens e vídeos)
14:21 - Ajustes finais e considerações sobre o layout
16:00 - Revisão do código HTML e CSS
16:58 - Publicação do projeto no GitHub
17:11 - Apresentação de máquina para desenvolvimento (Vivobook Asus)
18:12 - Considerações finais e encorajamento à prática
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C27A15
O que é Grid Layout?
Você sabe o que é Grid Layout? Neste vídeo, vamos iniciar um novo assunto, falando sobre Grid Layout em CSS, contrastando-o com Flexbox e explicando sua importância no design de interfaces de usuário. Ele utiliza o site do G1 como exemplo prático para demonstrar como o Grid Layout organiza o conteúdo em linhas e colunas, facilitando a criação de layouts responsivos. Além disso, o vídeo aborda a evolução do design web, desde o uso de tabelas e frames até a adoção do Grid Layout, destacando as vantagens desta nova tecnologia.
Assuntos Abordados e Tempo:
0:00 - Introdução ao Grid Layout e comparação com Flexbox
0:37 - Patrocínio da Recode e depoimento de um aluno
1:49 - Definição de Grid Layout e sua aplicação em interfaces de usuário
2:30 - Referência à documentação do W3C
3:37 - Explicação do conceito de contêiner e itens no Grid Layout
4:52 - Exemplo prático de Grid Layout no site do G1
9:06 - Uso de Media Queries com Grid Layout para responsividade
9:31 - Evolução do design web: tabelas, frames e tableless
13:06 - Introdução ao Grid Layout e seus benefícios
13:32 - Preparação para a próxima aula sobre anatomia do Grid
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A01
A Anatomia de um Grid
Conheça a anatomia do Grid Layout em CSS, explicando os principais elementos que compõem um Grid. Veremos a diferença entre Grid Rows e Grid Lines, definimos o que é um Grid Container e Grid Item, e explicamos o conceito de Grid Tracks (Row Tracks e Column Tracks). Além disso, o vídeo ensina como as Grid Lines são numeradas (tanto positiva quanto negativamente) e introduz o conceito de Grid Area e Grid Gap. O objetivo é fornecer uma base sólida para a compreensão e utilização do Grid Layout em CSS.
Assuntos Abordados e Tempo:
0:00 - Introdução ao Grid Layout e anatomia de um Grid
0:35 - Patrocínio da Hostnet
2:42 - Explicação sobre Grid Rows e Grid Lines
4:06 - Definição de Grid Container e Grid Item
5:23 - Explicação sobre Grid Tracks (Row Tracks e Column Tracks)
12:00 - Numeração das Grid Lines (positiva e negativa)
23:00 - Definição de Grid Area
24:00 - Explicação sobre Grid Gap
26:00 - Divulgação do canal do Telegram
30:00 - Comparação entre Grid Layout e Flexbox
31:00 - Preparação para a próxima aula sobre propriedades do Grid Container
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A02
Propriedades de container para Grids (parte 1)
Neste vídeo, vamos continuar a explicar o Grid Layout em CSS, focando nas propriedades que se aplicam ao Grid Container. Vamos revisar o conceito de Grid Container e, em seguida, detalhar quatro propriedades essenciais: display: grid, grid-template-columns, grid-template-rows e grid-gap. O vídeo demonstra como essas propriedades são utilizadas para definir a estrutura do Grid, o número de colunas e linhas, e o espaçamento entre os elementos. O objetivo é fornecer um entendimento prático de como configurar um Grid Container para criar layouts complexos e responsivos.
Assuntos Abordados e Tempo:
0:00 - Introdução às propriedades do Grid Container
0:35 - Patrocínio do Estudonauta
2:10 - Propriedade display: grid
7:20 - Propriedade grid-template-columns
9:23 - Propriedade grid-template-rows
10:43 - Propriedade grid-gap
12:19 - Incentivo à inscrição no canal
13:03 - Continuação das propriedades do Grid Container em próximos vídeos
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A03
CSS Grid Layout na prática (parte 1)
Aprenda na prática os fundamentos do CSS Grid Layout! Nesta aula do curso de HTML5 e CSS3, Gustavo Guanabara guia você na criação da sua primeira grade (grid), explicando propriedades essenciais como display: grid, grid-template-columns, grid-template-rows e gap. Descubra também como usar a ferramenta Grid View do Google Chrome DevTools para visualizar e entender melhor a estrutura do seu grid. Essencial para quem quer dominar layouts modernos na web!
Assuntos Abordados (Capítulos):
00:00 - Introdução ao Grid Layout: Mão na massa!
00:42 - Pré-requisitos: Aulas anteriores sobre Grid Layout são essenciais.
01:30 - Apresentando o Grid View: Ferramenta poderosa do Google Chrome.
03:06 - Preparando o Ambiente: GitHub Desktop e VS Code.
03:36 - Estrutura do Projeto: Criando pastas e arquivo HTML.
04:12 - HTML Básico: Criando o contêiner e os itens com divs.
04:40 - Dica de VS Code: Criando divs com classes rapidamente (Emmet).
05:34 - CSS Básico: Estilizando o contêiner e os itens com bordas.
06:32 - Aplicando display: grid: O primeiro passo essencial (e frustrante?).
07:51 - Configurações Iniciais: Definindo altura e padding.
08:51 - grid-template-columns: Definindo as colunas da grade.
09:48 - grid-template-rows: Definindo as linhas da grade.
10:32 - grid-gap vs gap: Atenção à propriedade atualizada para espaçamento!
11:55 - Usando o Grid View na Prática: Inspecionando o grid no DevTools.
13:24 - Ativando o Grid Overlay: Visualizando linhas e colunas numeradas.
14:37 - Painel de Layout no DevTools: Explorando opções de alinhamento (prévia).
15:11 - Entendendo as Linhas de Grade: Positivas e negativas no Grid View.
15:34 - Ajustando o gap: Modificando o espaçamento entre os itens.
17:18 - Recado Final: Próximos passos e a importância do Grid View.
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A04
Propriedades de container para Grids (parte 2)
Domine o alinhamento de contêineres no CSS Grid Layout! Nesta aula teórica do curso de HTML5 e CSS3, Gustavo Guanabara descomplica as propriedades align-items, justify-items, align-content e justify-content. Aprenda a diferença crucial entre alinhar itens individuais e o conteúdo geral da grade, tanto vertical (align) quanto horizontalmente (justify). Entenda valores como start, center, end, stretch, space-between, space-around e space-evenly com exemplos visuais claros.
Assuntos Abordados (Capítulos):
00:00 - Novas propriedades do contêiner grid
00:36 - Vídeo anterior prático sobre Grid View.
02:08 - Propriedades já vistas (display, template, gap).
02:54 - As 4 novas propriedades de alinhamento.
03:08 - align (vertical) vs justify (horizontal).
04:09 - Alinhar items vs alinhar content.
05:49 - Usando o align-items
08:03 - Usando o justify-items
09:11 - Aumentando o tamanho do contêiner.
09:28 - Usando o align-content
10:24 - Valores start, center, end.
11:00 - Valor space-between
12:00 - Valor space-evenly
12:39 - Valor space-around
14:13 - justify-content: Alinhamento horizontal do conteúdo.
14:48 - Valores justify-content: start, center, end.
14:53 - Valor justify-content: space-between: Espaço distribuído entre colunas.
15:09 - Valor justify-content: space-evenly: Espaço horizontal distribuído igualmente.
15:32 - Valor justify-content: space-around: Espaço horizontal igual ao redor.
16:03 - Dica Final
17:04 - O que veremos na próxima aula?
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A05
CSS Grid Layout na prática (parte 2)
Coloque em prática o alinhamento no CSS Grid Layout! Nesta aula "Mão na Massa Parte 2" do curso de HTML5 e CSS3, Gustavo Guanabara aplica as propriedades align-items, justify-items, align-content e justify-content vistas na teoria. Acompanhe a configuração passo a passo, testando valores como start, center, end, stretch, space-between, space-evenly e space-around diretamente no código e visualizando os resultados no navegador com a ajuda do Grid View do Chrome DevTools.
Assuntos Abordados (Capítulos):
00:00 - Mão na Massa Parte 2 - Aplicando Alinhamentos.
00:29 - Aplicando as 4 propriedades de alinhamento da aula anterior.
02:12 - Ambiente Pronto: Reutilizando o código da Parte 1.
02:38 - Revisão Rápida: Grid View e o painel de alinhamento do DevTools.
03:26 - Importante: O painel DevTools é para teste, não aplica o código.
04:12 - Relembrando: A mudança de grid-gap para gap.
04:39 - Propriedades Padrão: normal vs stretch nos alinhamentos.
05:39 - align-items na Prática: Testando start, end e center verticalmente.
07:44 - justify-items na Prática: Testando start, end e center horizontalmente.
08:08 - Alinhamento de content: Aplicando no conteúdo geral da grade.
08:15 - align-content na Prática: start, end e center (vertical).
09:32 - align-content + Space: Testando space-between, evenly e around.
11:38 - justify-content na Prática: start, end e center (horizontal).
11:43 - justify-content + Space: Testando space-between, evenly e around.
13:06 - Finalidade do Painel DevTools: Testar e descobrir a melhor configuração.
14:36 - Compatibilidade do Grid View: Chrome, Edge, Safari, Firefox.
16:11 - Próximo Passo: Simplificando as propriedades de alinhamento.
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A06
Propriedades de container para Grids (parte 3)
Continue explorando o CSS Grid Layout! Nesta aula teórica (Parte 3), Gustavo Guanabara aborda o Grid Implícito, explicando como configurar linhas e colunas adicionadas automaticamente com grid-auto-rows e grid-auto-columns. Descubra também como simplificar seu código CSS usando as propriedades shorthand: place-items (para align-items e justify-items), place-content (para align-content e justify-content) e grid-template (para grid-template-rows e grid-template-columns). Deixe seu CSS mais limpo e eficiente!
Assuntos Abordados (Capítulos):
00:00 - Introdução: Propriedades de Contêiner Grid - Parte 3.
00:37 - Metodologia: Aulas teóricas antes do próximo Mão na Massa.
02:13 - Revisão Essencial: Propriedades vistas nas aulas anteriores.
03:26 - Novas Propriedades: Foco em grid-auto e shorthands.
04:15 - grid-auto-rows e grid-auto-columns: Controlando o grid implícito.
05:03 - Exemplo Base: Grid 3x3 com itens de A a I.
06:03 - Grid Explícito vs. Implícito: O que acontece com itens extras (J)?.
07:10 - Problema Comum: Itens implícitos com tamanho incorreto.
08:12 - Solução: Usando grid-auto-rows para definir altura das linhas implícitas.
09:06 - grid-auto-columns: Definindo largura das colunas implícitas.
11:00 - Propriedades Shorthand: Simplificando o CSS Grid.
11:28 - Revisão Alinhamentos: align/justify para items e content.
12:45 - Shorthand place-items: Combinando align-items e justify-items.
12:53 - Shorthand place-content: Combinando align-content e justify-content.
13:53 - Shorthand grid-template: Combinando grid-template-rows e columns
14:43 - Resultado: Redução significativa de linhas de código (7 para 4).
15:50 - Próxima Aula: Mais teoria antes do próximo exercício prático.
16:33 - Dica de Estudo: Anotar é fundamental para fixar tantas propriedades.
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A07
Propriedades de container para Grids (parte 4)
Simplifique e flexibilize seu CSS Grid! Nesta aula teórica (Parte 4), Gustavo Guanabara ensina a usar a função repeat() para reduzir a repetição nas definições de colunas e linhas do grid. Descubra também a poderosa unidade fr (fração), ideal para criar layouts proporcionais e flexíveis. Aprenda como a unidade fr distribui o espaço disponível e como combiná-la com outras unidades como pixels (px) e porcentagem (%) para criar grids complexos de forma eficiente.
Assuntos Abordados (Capítulos):
00:00 - Introdução: Simplificando declarações com funções e unidades.
00:35 - Contexto: Parte 4 teórica das propriedades de contêiner grid.
02:15 - Revisão Geral: Propriedades e shorthands vistos anteriormente.
03:50 - Foco da Aula: Função repeat() e unidade fr (fração).
04:37 - Função repeat(): Simplificando valores repetidos (ex: auto auto auto).
05:03 - Aplicando repeat(): Exemplos em grid-template-columns e rows.
05:21 - Combinando repeat() com Shorthands: grid-template mais enxuto.
06:04 - Introdução à Unidade fr: Frações para divisão de espaço.
06:28 - Exemplo com fr: 1fr 1fr 1fr vs auto auto auto.
08:02 - Como fr Funciona: Soma das frações divide o espaço total.
09:09 - auto vs fr: Diferenças e recomendação de uso (fr).
09:53 - Layout Assimétrico com fr: Exemplo 1fr 2fr 1fr.
10:40 - Cálculo com fr (Exemplo 1fr 2fr 1fr): Dividindo o espaço disponível.
13:04 - Misturando Unidades: px, % e fr na mesma declaração.
13:47 - Cálculo com Unidades Mistas: Fixas e % primeiro, fr no restante.
16:17 - Simplificando Unidades Mistas: Usando repeat() com fr.
18:08 - Próxima Aula: Mão na Massa aplicando repeat() e fr
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A08
CSS Grid Layout na prática (parte 3)
Chegou a mais uma oportunidade de colocar a mão na massa com CSS Grid Layout! Nesta aula prática do Curso em Vídeo, Gustavo Guanabara guia você na aplicação das propriedades grid-template, place-items, place-content e muito mais. Aprenda a usar a função repeat(), domine a unidade de fração (FR) para criar layouts flexíveis e descubra como o grid-auto-flow pode mudar a forma como seus itens são organizados. Prepare seu editor e vamos codificar juntos!
Navegue pelo Vídeo:
00:00 - Introdução: Mão na Massa com Grid Layout!
01:17 - Propriedades que vamos praticar hoje.
03:50 - Preparando o projeto: Duplicando e organizando.
06:11 - Simplificando o CSS: Shorthands em ação.
09:23 - Grid Implícito: Entendendo grid-auto-rows.
11:03 - Controlando a direção com grid-auto-flow.
13:27 - Otimizando com a função repeat().
13:52 - Dominando as Frações (FR) nas colunas.
16:06 - Combinando unidades: px, % e FR.
18:24 - Preparação para grid-template-areas.
19:55 - Encerramento e dicas para os estudos.
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A09
Propriedades de itens para Grids (parte 1)
Prepare-se para mergulhar fundo nas propriedades de itens do CSS Grid Layout! Nesta aula, Gustavo Guanabara, do Curso em Vídeo, descomplica o posicionamento dos seus elementos. Aprenda a usar grid-row-start, grid-row-end, grid-column-start e grid-column-end de uma forma totalmente nova, usando uma divertida analogia com o clássico jogo Batalha Naval. Entenda a teoria por trás da criação de áreas e prepare-se para a próxima aula prática!
Navegue pelo Vídeo:
00:23 - Boas-vindas e introdução às propriedades de itens.
02:09 - Revisão rápida: Propriedades essenciais de contêineres Grid.
03:20 - Foco da aula: As 4 novas propriedades.
03:39 - Analogia genial: CSS Grid vs. Batalha Naval.
06:10 - Construindo nosso campo: Exemplo prático de grid.
08:15 - Entendendo as linhas e colunas do Grid.
10:53 - Mão na massa: Definindo a "Caixa 1".
14:10 - Definindo a "Caixa 2" no nosso layout.
15:15 - Finalizando o layout com a "Caixa 3".
17:13 - Dica extra: Aprenda Grid jogando!
18:15 - O que esperar da próxima aula prática.
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A10
Mão na Massa: Posicionando Itens no Grid Layout)
Chegou a hora de botar a mão na massa! Neste exercício prático, Gustavo Guanabara demonstra passo a passo como construir um layout complexo com CSS Grid, transformando itens individuais em áreas maiores. Acompanhe a criação de um projeto do zero, aplicando as propriedades grid-row-start, grid-row-end, grid-column-start e grid-column-end para posicionar cada elemento exatamente onde você quiser na grade. Aprenda também a usar números negativos para se referir às linhas e colunas, além de outras dicas para dominar o posicionamento no Grid Layout.
Assuntos abordados nesse vídeo:
00:00 - Mão na Massa: Construindo áreas com Grid Layout na prática.
00:52 - Revisão: Propriedades para contêiner e para itens do grid.
03:23 - Começando o Exercício: Abrindo o projeto e criando os arquivos (grid04).
04:13 - Código HTML: Criando a estrutura com div.container e 3 caixas internas.
05:24 - CSS Inicial: Configurando a classe .container com display: grid.
05:41 - Definindo a Grade: Usando grid-template-rows e grid-template-columns.
06:58 - Posicionando a caixa1 com grid-row-start/end e column-start/end.
08:10 - Configurando a caixa2: Posicionamento na grade.
09:16 - Configurando a caixa3: Finalizando o layout principal.
10:01 - Dica Prática: Usando números negativos (ex: -1) para posicionamento.
11:28 - Ajuste Fino: Adicionando espaçamento visual com a propriedade gap.
11:58 - Conselho de Ouro: Não chute valores, use o inspetor de grid do navegador.
14:14 - Desafio: Crie e pratique com seus próprios layouts para evoluir.
14:46 - Próxima Aula: Simplificando as propriedades de posicionamento.
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A11
CSS Grid: Shorthands para Itens
Simplifique seu código e domine o posicionamento dos itens no CSS Grid! Nesta aula, Gustavo Guanabara apresenta as propriedades shorthand grid-row, grid-column e grid-area, que permitem definir a posição e o tamanho dos elementos com muito menos código. Aprenda também a usar a palavra-chave span para expandir itens por múltiplas linhas ou colunas. Acompanhe a aplicação prática desses conceitos, refatorando um exercício anterior, e prepare-se para um desafio: construir a interface de um site usando tudo o que aprendeu!
Assuntos Abordados (Capítulos):
00:00 - Introdução: Simplificando propriedades de itens do grid.
01:53 - Revisão: Propriedades start e end para itens.
02:39 - Foco da Aula: span, grid-row, grid-column e grid-area.
04:40 - Teoria: Como definir áreas com pontos de início e fim.
08:26 - Conceito de Expansão: Usando a palavra-chave span.
10:49 - Simplificação Nível 1: grid-row para unir start e end.
11:47 - Simplificação Nível 1: grid-column para unir start e end.
13:14 - Mão na Massa: Refatorando o código com grid-row e grid-column.
15:55 - Mão na Massa: Aplicando span nas propriedades simplificadas.
17:13 - Simplificação Máxima: A propriedade grid-area.
18:53 - Mão na Massa: Refatorando o código com grid-area.
21:21 - Aplicando span com a propriedade grid-area.
22:07 - Resumo Gráfico: As 3 formas de declarar a posição de um item.
23:41 - DESAFIO: Monte a interface de um site com Grid Layout!
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A12