Тёмный

CSS Grid - Tudo o que você precisa saber 

Otávio Miranda
Подписаться 122 тыс.
Просмотров 19 тыс.
50% 1

Aprenda CSS Grid colocando a mão na massa e fazendo esses testes junto comigo.
Vamos falar sobre a maioria das propriedades, alinhamento, linhas, colunas,
responsividade e muito mais.
Sobre o flexbox - • CSS Flexbox - Tudo o q...
Capítulos:
00:00:00 - Introdução: CSS Grid
00:00:59 - Iniciando com HTML/CSS no Codepen
00:02:36 - CSS Grid vs Flexbox
00:04:33 - Criando o container e filhos no HTML
00:06:20 - CSS Reset básico
00:08:16 - display: grid; no container
00:09:04 - grid-template-columns e grid-template-rows
00:13:00 - grid-auto-rows e grid-auto-columns
00:14:44 - CSS Grid no Google Chrome Developer Tools
00:18:15 - Terminologias e termos de CSS Grid
00:19:14 - grid-gap, gap, row-gap, column-gap
00:21:05 - minmax no CSS Grid
00:23:45 - repeat no CSS Grid
00:25:37 - auto-fill e auto-fit: layout responsivo
00:29:08 - grid-row e grid-column para span (expandir)
00:34:47 - grid-area e grid-template-areas
00:38:35 - Layout com grid-template-areas
00:42:26 - Alinhamento com justify-content
00:46:33 - Alinhamento com align-items e align-content
00:49:37 - Alinhamento com justify-items
00:50:46 - Alinhamento com align-self e justify-self
00:51:41 - Alinhamento: resumo
00:53:14 - Finalizando
00:53:44 - Não esqueça de curtir o vídeo
Cursos de Python e JavaScript / TypeScript com desconto:
www.otaviomiranda.com.br/2017...
Twitter: / otaviomirandabr
#hashtags

Наука

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

 

14 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 65   
Год назад
00:00:00 - Introdução: CSS Grid 00:00:59 - Iniciando com HTML/CSS no Codepen 00:02:36 - CSS Grid vs Flexbox 00:04:33 - Criando o container e filhos no HTML 00:06:20 - CSS Reset básico 00:08:16 - display: grid; no container 00:09:04 - grid-template-columns e grid-template-rows 00:13:00 - grid-auto-rows e grid-auto-columns 00:14:44 - CSS Grid no Google Chrome Developer Tools 00:18:15 - Terminologias e termos de CSS Grid 00:19:14 - grid-gap, gap, row-gap, column-gap 00:21:05 - minmax no CSS Grid 00:23:45 - repeat no CSS Grid 00:25:37 - auto-fill e auto-fit: layout responsivo 00:29:08 - grid-row e grid-column para span (expandir) 00:34:47 - grid-area e grid-template-areas 00:38:35 - Layout com grid-template-areas 00:42:26 - Alinhamento com justify-content 00:46:33 - Alinhamento com align-items e align-content 00:49:37 - Alinhamento com justify-items 00:50:46 - Alinhamento com align-self e justify-self 00:51:41 - Alinhamento: resumo 00:53:14 - Finalizando 00:53:44 - Não esqueça de curtir o vídeo
@seunomeaqui_
@seunomeaqui_ Год назад
Impossível sair dessa aula sem curtir e agradecer pela qualidade da explicação!
Год назад
Nós que agradecemos!
@rocha_matheus
@rocha_matheus Год назад
o curso full-stack do otávio miranda na UDEMY custa 5% de outro que paguei, e a didática é muito melhor ... dps vou ver se pego o curso de REACT/NEXT dele na Udemy. Por 27 reais ta de graça ... Parabéns pelo conteúdo, material de primeira qualidade!
@fernandesfe3385
@fernandesfe3385 11 месяцев назад
Suas aulas sempre me salvam, quando não entendo algum assunto no meu curso, eu venho nas suas aulas pq tenho certeza que vou entender!! Parabéns suas aulas são millll!!!
@fms1
@fms1 Год назад
Uma das melhores aulas na internet sobre grid. Obrigado.
@user-ri3pz8wn9t
@user-ri3pz8wn9t 9 месяцев назад
vc me fez entender os posicionamentes e columns e rows em 30m pois vi em 2x kkkkkkkkkkkkkk e eu tava meses sem entender,obrigado por esse ouro de conteudo 😱
@herlesnp2010
@herlesnp2010 Год назад
quanto mais vc fala mais vontade de aprender eu fico, a sua didatica é fantástica melhor que muitos cursos pago por ai, obrigado Otávio.
@pedrowfps1538
@pedrowfps1538 5 месяцев назад
Nossa você explica muito bem mesmo. Ótimo professor
@catphelios
@catphelios 3 месяца назад
video mais completo sobre grid que eu já vi, brabo
@brendonalex4848
@brendonalex4848 11 месяцев назад
Terminei dia 27/06/2023. Procrastinação bateu forte, mas terminei kakakakaak muito bom !!!
@henriquemodena6826
@henriquemodena6826 6 месяцев назад
Se é louco o melhor!
@thiagocosme242
@thiagocosme242 2 месяца назад
Top demais, mestre
@engebras-engenhariabrasili9977
@engebras-engenhariabrasili9977 5 месяцев назад
Cara top, top. Assisto muitos vídeo e playlist do "Fábio dos Reis" e você está no mesmo nível. Parabéns.👏👏👏👏👏
@alderisegundo6373
@alderisegundo6373 Год назад
Cara! Seu conteúdo é muito top! Parabéns Sua didática é excelente. Fácil aprendizagem. Continue nessa mesma pegada rsrsrsrs. TMJ
@lucasfranca1144
@lucasfranca1144 Год назад
Agora eu aprendi!! você ensina muito bem , Otavio. Obrigado por compartilhar o seu conhecimento.
Год назад
Que isso, é o que eu gosto de fazer, então eu que agradeço 😍
@raphaelalves4044
@raphaelalves4044 Год назад
Muito bom professor! Obrigado por compartilhar tanto conhecimento com a gente! Você é inspiração!
Год назад
Que isso, eu que agradeço ☺️🙏
@emersonliramonteiro
@emersonliramonteiro Год назад
cara, estou fascinado com sua aula, curso fullstack na labenu as 3 meses essa semana entramos no gird, vi varios videos, e so o seu que eu conseguir enteder seu metodo e exelente nevel havard, agora so sigo vc e vejo os seus videos, esta me ajudando muito mesmo
Год назад
Pô, muito obrigado. De verdade
@ClashRoyale-pt9zj
@ClashRoyale-pt9zj Год назад
Aula de altíssima qualidade, merece muitas views e "gostei". Parabéns e continue com o excelente trabalho que tu proporciona aqui no youtube e em seus cursos na Udemy!!!
Год назад
Podexa, obrigado 🙏
@guilhermecunha2375
@guilhermecunha2375 11 месяцев назад
excelente aula professor
@viniciusaraujo718
@viniciusaraujo718 Год назад
Excelente vídeo! 👏🏻👏🏻👏🏻
@andresantana9148
@andresantana9148 Год назад
Que material de qualidade. Me ajudou muito.
@Gaberelaa
@Gaberelaa Год назад
Que vídeo excelente! Muito obrigada por compartilhar seu conhecimento :D
@ricardoferreira3252
@ricardoferreira3252 Год назад
Excelente aula, muito conteúdo com extrema qualidade 👏👏👏
@priscillacarbonell3997
@priscillacarbonell3997 Год назад
Fantástico sempre... dou muita risada pela sua preocupação e doçura ao ensinar. Grata
@henrrysantz
@henrrysantz Год назад
Aula muito boa!!!!
@jackfelinto9029
@jackfelinto9029 11 месяцев назад
Vlw mestre por compartilhar seus conhecimentos, excelente aula.
@pablocardellino6547
@pablocardellino6547 Год назад
Muito bom! Me ajudou demais. Estava procurando há tempos entender o conceito, que necessito para um projeto, mas não estava pegando o jeito. Com suas explicações compreendi perfeitamente como e por que é que devia, mesmo, usar grid. Muito grato!
Год назад
Que massa, muito obrigado Pablo 🥰
@sintonia0012
@sintonia0012 10 месяцев назад
Aula top
@miltontsilva
@miltontsilva Год назад
Ótimo vídeo aula, parabéns e muito obrigado por compartilhar.
@isaque-fernandes1068
@isaque-fernandes1068 Год назад
Que aula fantástica descobri a dimensão fr e várias funções que não sabia que existia no css, 'pra mim só existia a calc()', além de descobrir também que dá pra dimensionar os items de um grid-template-area, para outras linhas. Aula show de bola professor!
@ederlima8621
@ederlima8621 Год назад
top aula, tirou varias duvidas
@sidneyCardoso2005
@sidneyCardoso2005 Год назад
Sensacional como sempre
Год назад
Muito obrigado =)
@diegosantosmoto
@diegosantosmoto Год назад
Melhor aula de grid! Excelente didática
Год назад
Muito obrigado ☺️
@NOMOUSE
@NOMOUSE Год назад
Conteúdo de grande qualidade!
Год назад
Valeu
@app2028
@app2028 Год назад
Muito boa guerreiro, já comprei vários cursos seu sempre com uma qualidade absurda super incrível!🎉
Год назад
Fico feliz em saber
@felipesant0
@felipesant0 Год назад
You have to do everything step by step and you will succeed. You must disconnect everything from PC protection. Thank you, Tutorials Buddy
@rodrigovieira5204
@rodrigovieira5204 Год назад
ótima explicação professor, obrigado !!
Год назад
Eu que agradeço 🙏
@danielbressan93
@danielbressan93 Год назад
Muito bom
@christophcury940
@christophcury940 Год назад
Grato pela aula, boa didática. Gostando do conteúdo do seu canal. 🙏
10 месяцев назад
Desculpa a demora, eu realmente não tinha visto seu comentário. Agradeço demais =)
@jezreelmoraes5864
@jezreelmoraes5864 Год назад
Muito show
Год назад
Valeus =)
@cunning7388
@cunning7388 Год назад
Salve Otavao, cara comprei teu curso de python e cara esto pasmo, teu curso e muito bom, muito didático e to cada vez mais animado pra terminar ele!
Год назад
Ebaaaa... aquele foi meu primeiro curso, então vejo várias coisas que podem e ainda vão melhorar muito nele. Que bom que gostou, obrigado =)
@maiadidata
@maiadidata Год назад
mesmo sendo aluno de tres dos seus curso na Udemy(JavaScript, Python 3 e se não me falha a memória no momento o de Django), por sinal todos maravilhosos, eu super recomendo, Professor tire uma dúvida por favor com o uso do Flex Box e Css Grid, como fica o Bootstrap devemos deixar o bichinho meio que de lado, ou é possível usa-los junto, se poder nos presentear com um exemplo ficarei muito grato. uma noite abençoada e fique com Deus.
@hendcode
@hendcode Год назад
Oooh professor muito obrigado por ouvir meu pedido nos comentários dos últimos vídeos rsrsrs
Год назад
Kkkk eu que agradeço
@darkshinaide
@darkshinaide Год назад
otima aula , ate eu me escrevi por causa desta aula
Год назад
Obrigado 🙏
@brendonalex4848
@brendonalex4848 Год назад
No minuto 34:30 quando é feito grid-column, automaticamente o grid-row deixa de funcionar (o grid-row; estava com os valores 4 / span 2). Ou seja, o grid-column é "mais forte" que o grid-column? Se alguém poder explicar porque a configuração do grid-row saiu, agradeço. :)
@pablocardellino6547
@pablocardellino6547 Год назад
Caro otávio, meu grid está dando megacerto graças à compreensão inicial que teu vídeo propiciou. Gostaria de te fazer uma pergunta, mas fica à vontade para responder apenas se puder. Estou usando em uma aplicação um pouco complexa, e com fins bem específicos, que envolve manipular via javascript as propriedades style.gridRowEnd atribuindo "span " + n para que cada célula ocupe o tanto de linhas do grid apropriadas, de acordo com os fins da aplicação. Todas as células ocupam 1 coluna do grid só. Entretanto, apenas 90% delas ocupam somente 1 linha, sendo que uns 9% ocupam duas linhas, e algumas - poucas, porém não zero - ocupam duas ou mais linhas do grid. Minha pergunta é: tenho como, via JS, ter uma referência para a célula que ocupa, digamos apenas como exemplo, a linha 14 da coluna 5 do grid? Lembrando que essa célula pode começar e terminar na linha 14, pode terminar na 15 ou 16 ou 17..., ou começar na 13, 12, 11.... Em qualquer caso eu precisaria a referência desse elemento no DOM.
@pablocardellino6547
@pablocardellino6547 Год назад
Obs: quando digo "células" estou me referindo a elementos P que são os filhos diretos do meu grid.
@LuisFernando-dw5do
@LuisFernando-dw5do 8 месяцев назад
como ajusta o autocomplete do code pen? to tendo que digitar tudo completinho :(((((
@reiemerson
@reiemerson Год назад
conteudo ótimo, tenho alguns cursos seus na udemy, mas pfv não poem musica tenho tdah e tenho que me esforçar muito pra não perder a concentração no curso e desviar pra musica de fundo
Далее
::before e ::after - Pseudo-Elementos no CSS
11:06
Просмотров 9 тыс.
CSS Flexbox - Tudo o que você precisa saber
50:48
Просмотров 19 тыс.
Nima ovqat qilay?😂
01:01
Просмотров 531 тыс.
Explaining CSS Grid (in practice!) | with Mayk Brito
53:40
CSS Grid - Crie Layouts Responsivos
36:08
Просмотров 11 тыс.
Aprenda CSS Grid em 30 minutos - Tutorial Grid
30:11
Просмотров 54 тыс.
CSS GRID na PRÁTICA - Tutorial Completo
25:21
Просмотров 32 тыс.
TUDO que você deve estudar de JavaScript antes do React
1:25:24
Aprenda Flexbox de uma vez por todas! 😍
21:38
Просмотров 11 тыс.
Ноутбук без экрана
0:22
Просмотров 16 тыс.
Holographic transparent flexible LED panel.
0:20
Просмотров 3,2 млн
don't throw your faulty fan
0:24
Просмотров 2,5 млн