TUTORIAL CSS GRID. Como criar páginas web mais FÁCIL

Подписаться 42 тыс.

Просмотров 8 тыс.

50% 1

#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.co...
✅ 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...

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 53

@geovaalves365 Месяц назад

Aula surpreendente e fantástica!

@serliv Месяц назад

Muito obrigado 😃

@michaelwilly. 7 месяцев назад

Cara, obrigado de coração!! Didática incrível, parabéns!!

@serliv 7 месяцев назад

Muito obrigado Michael. Valeu mesmo

@georgesilva2800 9 месяцев назад

nem assistir o video inteiro, mas só pelo começo e com o pouco conhecimento que tenho, tenho certeza o video será top

@serliv 9 месяцев назад

Valeu George

@neelsergio549 4 месяца назад

otima aula

@serliv 4 месяца назад

Muito obrigado 😃

@chule9850 11 месяцев назад

Vc explica muito bem 🎉😊👏👏

@serliv 11 месяцев назад

😍😍😍 muito obrigado ☺️

@gustavorob8515 Год назад

Melhor professor que já tive, Parabéns

@serliv Год назад

Opa. Muito obrigado pelo elogio. Valeu mesmo. Forte abraço Gustavo

@rubenscostadasilva1010 Год назад

Show de aula. Estou inscrito no seu canal. Muito obrigado. D'us lhe abençõe e aos seus familiares.

@serliv Год назад

Amém Rubens. Desejo o mesmo pra ti. Abração

@leonardomaia4770 Год назад

qualidade e didática como sempre excelente, obrigado!

@serliv Год назад

Eu que agradeço Leonardo. Forte abraço

@marcotellojr.9725 Год назад

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!

@serliv Год назад

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.

@jhonatansantos2531 Год назад

Que aula maravilhosa, ta de parabéns! A explicação foi sensacional, obrigado professor!

@serliv Год назад

Eu que agradeço Jhonatan. Abração

@Duarte_DAvila Год назад

Bela Aula, Obrigado pelo seu tempo, Prezado. 👏✌👍

@serliv Год назад

Eu que agradeço. Forte abraço

@CardosoPauloAndre 2 месяца назад

Show🎉

@DevGuedes 4 месяца назад

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.

@serliv 4 месяца назад

Muito obrigado. Sugestão anotada. Valeu mesmo

@gleydsonbrito1717 Год назад

Simplesmente fantástico

@serliv Год назад

Muito obrigado Gleydson. Abração

@rogerio8710 Год назад

Valeu pela aula.

@serliv Год назад

Eu que agradeço Rogério. Abração

@waldirjunior1414 Год назад

Aula top ..

@serliv Год назад

Obrigado 😃

@josealcantara9571 8 месяцев назад

Muito bom mesmo

@serliv 8 месяцев назад

Valeu José. Abração

@exa3460 Год назад

Muito bom, estou no comeco do video ainda mas grid me lembrou bastante o estudo de tabelas

@serliv Год назад

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

@exa3460 Год назад

@@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

@serliv Год назад

@@exa3460 exatamente isso. Lembra muito mesmo a forma de pensar. Abração

@daviamerico2268 4 месяца назад

Nao entendi, o numero total de declarações no grid template rows na verdade é o numero de grid columns

@fmoliveira30 8 месяцев назад

Cara deixa ele responsivo tb. Pode ser?

@serliv 8 месяцев назад

Valeu. muito obrigado pela sugestão

@helder-rangel 4 месяца назад

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.

@serliv 4 месяца назад

Muito obrigado pela sugestão Helder

@acctualy4073 Год назад

olá professor tudo bem? não entendi muito bem a parte final do video, o que significa esse > * no seu codigo?

@serliv Год назад

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

@devRafaelSilva Год назад

Vice poderia trazer sites para os inscritos fazer

@serliv Год назад

Boa Rafael. Obrigado pela sugestão

@josecarlostavaresribeiro6584 Год назад

Olá boa essa aula, como coloco imagem e texto nessas grids

@serliv Год назад

Oi José. Precisa mesmo escrever as tags corretas dentro das grid cells.

@chvc Год назад

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?

@derem1827 Год назад

sticky, ou tu pode deixar teu header como fixed.

@serliv Год назад

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)