Top Cliques Mês
1
31-03-2025 11:03:54
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
Curso em Vídeo | Inscritos:
2.480.000 | Vídeos: 1.027
2
03-04-2025 11:04:09
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
Curso em Vídeo | Inscritos:
2.480.000 | Vídeos: 1.027
3
07-04-2025 11:04:07
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
Curso em Vídeo | Inscritos:
2.480.000 | Vídeos: 1.027
4
08-04-2025 14:04:09
O que é blockchain? Neste corte do Experience Podcast, você vai entender essa tecnologia de forma simples e direta: como um CRUD sem DELETE! Usando analogias com Git, planilhas do Excel e até o clássico problema dos Generais Bizantinos, mostramos como o blockchain funciona na prática.
Você já ouviu falar que blockchain é complicado? Esquece isso. Imagina uma planilha onde todo mundo pode ver, mas ninguém pode apagar. E para modificar, você precisa provar que é você. Pronto! É isso, com segurança e validação em rede.
A grande sacada do Bitcoin não foi a tecnologia em si, mas **o algoritmo de consenso**. Um jeito de manter o estado da rede sincronizado sem conflitos – mesmo quando há falhas de comunicação. Tudo isso é inspirado no famoso problema dos Generais Bizantinos!
Assim como no Git, o blockchain evita conflitos, garante versões válidas e protege a integridade da informação. E tudo isso sem depender de um servidor central.
Assista agora e entenda de vez como o blockchain realmente funciona – com exemplos fáceis e analogias que fazem sentido!
Curso em Vídeo | Inscritos:
2.480.000 | Vídeos: 1.027
5
15-04-2025 13:04:07
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
Curso em Vídeo | Inscritos:
2.480.000 | Vídeos: 1.027
6
21-04-2025 11:04:38
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
Curso em Vídeo | Inscritos:
2.480.000 | Vídeos: 1.027
7
