TUTORIAL CSS GRID. Como criar páginas web mais FÁCIL
HTML-код
- Опубликовано: 10 июн 2023
- #frontend #webdev #webdesign
A CSS GRID é uma ótima maneira para organizar e estruturar nosso conteúdo HTML em nossas páginas na web. Nesse vídeo eu mostro um pouco dessa abordagem e como podemos criar layouts muito mais facilmente e sem dor de cabeça.
🌟 Links comentados no vídeo e outros interessantes 🌟
📺 Playlist Curso Web Fundamentos: HTML e CSS.
• CURSO Web Fundamentos:...
🎁 CURSO Web Design Fundamentos. Aprenda HTML CSS e Javascript
serfrontend.com/cursos/web-fu...
✅ Crie interfaces melhores com VARIÁVEIS do CSS (a.k.a custom properties)
• Crie interfaces melhor...
✅ Como criar um "Dark🌜 e Light☀️ Theme Toggle" usando HTML, CSS e Javascript.
• [FÁCIL e PASSO-A-PASSO...
✅ Como criar Tema Light/Dark só com HTML e CSS? (sem JAVASCRIPT)
• Como criar Tema Light/...
✅ Como usar as pseudo-classes :has(), :is() e :where() do CSS para construir um switch theme só com HTML e CSS? (sem JAVASCRIPT)
• Como usar as pseudo-cl...
✅ FAÇA o seu PORTFOLIO se DESTACAR frente aos demais
• 🤩 FAÇA o seu PORTFOLIO...
✅ [CSS] Misturar cores SEM SOFRER com color-mix()
• [CSS] Misturar cores S...
✅ 2 PORTIFÓLIOS (FRONT-END) INCRÍVEIS analisados juntos. Só vem.
• 2 PORTIFÓLIOS (FRONT-E...
✅ Como criar PÁGINAS WEB com HTML e CSS a partir de design do FIGMA
• Como criar PÁGINAS WEB... 
Наука
![mgk - Sun to Me (Zach Bryan Cover) [Live from Cheshire Cottage]](http://i.ytimg.com/vi/_ZnbTEs4O6U/mqdefault.jpg)
Cara eu comprei dois cursos , assisti mais de 5 aulas de GRID no RUclips , e essa é a ÚNICA aula que entrou na minha mente de uma forma eficiente . Parabéns pelo conteúdo e pela didática . Forte abraço
Valeu Guilherme. Fico feliz em ajudar
Olá meu mestre, bom dia!
Que aula fantástica hein?
Até hoje só uso flex pq não faço ideia de como usar grid. Mas depois desta aula vou tentar usar mais o grid.
Professor aproveitando o ensejo, explica por favor quais as diferenças mais acentuadas em grid e flex. Quando usar um e quando usar o outro, ou até mesmo quando combinar ambos.
Obrigado de verdade por tua disposição.
Muito obrigado. Sugestão anotada. Valeu mesmo
Cara, obrigado de coração!! Didática incrível, parabéns!!
Muito obrigado Michael. Valeu mesmo
nem assistir o video inteiro, mas só pelo começo e com o pouco conhecimento que tenho, tenho certeza o video será top
Valeu George
Simplesmente fantástico
Muito obrigado Gleydson. Abração
qualidade e didática como sempre excelente, obrigado!
Eu que agradeço Leonardo. Forte abraço
Vc explica muito bem 🎉😊👏👏
😍😍😍 muito obrigado ☺️
Muito bom mesmo
Valeu José. Abração
Show de aula. Estou inscrito no seu canal. Muito obrigado. D'us lhe abençõe e aos seus familiares.
Amém Rubens. Desejo o mesmo pra ti. Abração
Bela Aula, Obrigado pelo seu tempo, Prezado. 👏✌👍
Eu que agradeço. Forte abraço
Aula top ..
Obrigado 😃
Valeu pela aula.
Eu que agradeço Rogério. Abração
otima aula
Muito obrigado 😃
Que aula maravilhosa, ta de parabéns! A explicação foi sensacional, obrigado professor!
Eu que agradeço Jhonatan. Abração
Melhor professor que já tive, Parabéns
Opa. Muito obrigado pelo elogio. Valeu mesmo. Forte abraço Gustavo
Top demais
Muito obrigado Paulo. Forte abraço
Show de bola, estou estudando e aprendi recentemente a usar CSS Grid, mas foi de uma maneira diferente. Vou por em prática a sua aula e agregar ao conhecimento.
Da forma que aprendi em aula seria utilizando a grid areas!
Sim. É isso mesmo. Há outras maneiras de trabalhar com CSS grid. O importante é conhecer outras abordagens e assim poder decidir qual você prefere dependendo do cenário.
Muito bom, estou no comeco do video ainda mas grid me lembrou bastante o estudo de tabelas
hahahaha.. Lembra em como organizar as informações, mas é bem diferente por ser muito mais flexível e mais fácil de dar manutenção
@@serliv Sim, sim eu falo no quesito de pensar nos spans de coluna e linha, sei que não é bom usar tabela pra fazer os layouts
@@exa3460 exatamente isso. Lembra muito mesmo a forma de pensar. Abração
Nao entendi, o numero total de declarações no grid template rows na verdade é o numero de grid columns
Que tal fazer uma página responsiva a partir desse layout? Mais de 70% doa scessos são com dispositivos móveis, em muitos sites na internet.
Muito obrigado pela sugestão Helder
Olá boa essa aula, como coloco imagem e texto nessas grids
Oi José. Precisa mesmo escrever as tags corretas dentro das grid cells.
Muito bom!!! Criar layout's no CSS é uma arte kkkk. E como ficaria, pra no caso de eu querer que o nav fique sempre fixo no topo da página ao usuário rolar a tela?
sticky, ou tu pode deixar teu header como fixed.
Como o Derem falou. E vc precisa ver se vale a pena manter dentro do grid ou não. (eu tentaria deixar fora, uma vez que deve ser fixo.. mas pode depender de como deve se comportar em telas menores)
olá professor tudo bem? não entendi muito bem a parte final do video, o que significa esse > * no seu codigo?
significa qualquer elemento que é filho direto (ou seja, o primeiro filho). Eu ensino isso e muito no meu curso de HTML e CSS. Tem uma playlist completa e gratuita aqui no youtube e tenho também o curso na udemy (link na descrição) que está atualizado e possui mais conteúdo. Dê uma conferida se tiver interesse
Vice poderia trazer sites para os inscritos fazer
Boa Rafael. Obrigado pela sugestão
Cara deixa ele responsivo tb. Pode ser?
Valeu. muito obrigado pela sugestão