Тёмный

🐺 CSS Grid Layout - Curso Completo 

Origamid
Подписаться 59 тыс.
Просмотров 74 тыс.
50% 1

Projeto, arquivos, guia e tabela de conteúdo na descrição.
Curso feito em 2017 para a origamid.com.
💻Site que você irá criar
origamid.com/projetos/wildbeast/
🗄Arquivos
github.com/origamid/publico/t...
📝Guia
www.origamid.com/projetos/css...
Esse é um curso feito para o site, isso significa que é longo e detalhado. Ele não foi feito para o RU-vid, onde geralmente o conteúdo é mais curto. Todas as propriedades funcionam da mesma forma apesar do curso ter sido feito em 2017. Apenas a propriedade grid-gap possui agora nome de gap apenas.
📚Lista de Aulas (34 aulas no total)
00:00 O Curso
03:55 O grid layout
06:43 display: grid
17:21 grid-template-columns
35:53 gird-template-rows
43:07 grid-template-areas
01:02:21 grid-template
01:06:06 gap (antigo grid-gap)
01:11:36 grid-auto-columns
01:18:17 grid-auto-rows
01:20:09 grid-auto-flow
01:25:44 grid
01:28:28 justify-content
01:33:27 align-content
01:36:20 justify-items
01:38:38 align-items
01:41:52 grid-column
01:58:13 grid-row
02:05:18 grid-area
02:20:21 justify-self
02:22:13 align-self
02:23:31 Projeto Wildbeast
02:36:16 HTML Parte 2
02:49:31 Estrutura do Grid
02:59:55 Header
03:12:13 Sidenav
03:18:08 Footer
03:23:34 Conteúdo Grid
03:30:40 Conteúdo Características
03:43:30 Conteúdo Atributos
03:54:47 Grid Responsivo
04:02:34 Menu Responsivo
04:16:00 Conteúdo Responsivo
04:26:04 Conclusão
No curso de CSS Grid Layout você irá aprender como criar um layout responsivo no CSS utilizando as novas propriedades do CSS Grid Layout. Com ele você pode criar layouts complexos utilizando e ainda manter a marcação do HTML limpa.
O CSS Grid Layout é uma nova especificação do CSS e ela veio para resolver praticamente todos os problemas de posicionamento na tela que existem. No curso eu inicio pelos fundamentos e depois vamos para a prática criando um projeto real do zero.

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

 

5 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 135   
@douglasbertoldi4998
@douglasbertoldi4998 27 дней назад
Rapaz, não imagino o trabalhão que deu fazer esse vídeo (esses vídeos), ficou ótimo, parabéns!
@luiznatan6502
@luiznatan6502 Год назад
Reamente, a intenção do cara é divulgar o conhecimento, não faturar! Tem curso por aí que é uma vergonha! Parabéns, mano!!!
@geanr
@geanr Год назад
Essa aula é tão boa que logo no começo já resolvi o problema
@izichtl
@izichtl 3 года назад
Um elogio aleatório, porem sincero: O que mais gosto do no teu canal, é o padrão, o padrão da didática do ensino, o projeto gráfico, padrão do áudio, é como escolher um filme por diretor, a identidade é marcante! E muito obrigado pelo conteúdo compartilhado.
@bisfps
@bisfps 2 года назад
Eu fiz 22 documentos .html e um documento gigantesco .txt para fixar esses bglh, mas muito obrigado mano kkkk
@matiazy4620
@matiazy4620 3 года назад
Uma dica pro pessoa ai aprender mais rápido é praticar, como assim praticar ? ex: veja até a parte aonde ele explica o header e faz o header, em seguido vá você sozinho e tente fazer o header sem a ajuda da aula, siga fazendo assim e acredito que voces vão aprender bem mais rápido.
@kkkkfdc9064
@kkkkfdc9064 3 года назад
Tem cursos que cobram até R$1000,00 e não ensinam muito bem não kkkk Parabéns pelo conteúdo cara me ajudou muito a entender melhor ! recomendo que as pessoas façam um curso básico de css e depois esse para avançar rápido.
@marcospapa704
@marcospapa704 3 года назад
Além do conteúdo, o cara ainda deu dicas preciosas sobre CSS. Muito bom!
@yuriadriel43
@yuriadriel43 4 года назад
Perfeito!!!
@pedropaulofurtado3353
@pedropaulofurtado3353 4 года назад
Parabéns pelo conteúdo!
@darkbluebossa
@darkbluebossa 4 года назад
Veio na hora certa. Obrigado!
@nelsonsoares2281
@nelsonsoares2281 Год назад
Sensacional, muito obrigado mesmo, procurei muito por uma aula assim que abordasse de forma ampla o CSS Grid graças a essa aula to aprendendo.
@DouglasSantosTI
@DouglasSantosTI 2 года назад
Já que está de graça aqui, eu vou baixar.
@cristianerocha1992
@cristianerocha1992 4 года назад
Cheguei agora, ótima aula!
@admin_6800
@admin_6800 4 года назад
Show parabéns !!
@alucard3295
@alucard3295 3 года назад
Muito obrigado, de verdade, QUE INCRÍVEL!!
@evertoncarvalhodasilvasant9509
@evertoncarvalhodasilvasant9509 3 года назад
esse vídeo é precioso cara, parabéns!
@mr.oliver559
@mr.oliver559 4 года назад
Incrível! Obrigado pela excelente curso.
@daniellacerda6471
@daniellacerda6471 3 года назад
MANO, MUITO MAIS MUITO OBRIGADO MESMO!! Depois de terminar o curso de Flexbox, eu estou fazendo agora esse de Grid (1 Hora já de vídeo, falta 3 kkkkk) E mano, graças ao seu conteúdo voluntario, eu vou consegui finalmente ter a base para começar meu curso de Bootstrap e JQuery, que pra Bootstrap, é ideal ter antes bem definido o Flexbox e Grid. Muito obrigado Mano!!
@DevSamir-je7md
@DevSamir-je7md 9 месяцев назад
Como está hoje em dia?
@danielsantos7353
@danielsantos7353 3 года назад
Excelente conteúdo.
@Supernovicetales
@Supernovicetales 2 года назад
Muito top, ainda não vi tudo, mas tô amando já
@glebsonsantos3341
@glebsonsantos3341 3 года назад
Muito obrigado man, show de bola!!!
@roseliaguiar
@roseliaguiar 3 года назад
Ótimo conteúdo. Parabéns pela didática.
@isaquep
@isaquep 3 года назад
Muito bom, muito fácil de entender e ótimas explicações.
@jaquelinecosta9582
@jaquelinecosta9582 2 года назад
Não tem como ensinar sem ter uma boa didática, a sua é maravilhosa, parabéns, obrigada por compartilhar seu conhecimento.
@anasabora8677
@anasabora8677 3 года назад
3:42:31 aquela gambiarrrinha que não pode faltar 😅 Muito bom esse curso. Vou comprar.
@amandagomes7259
@amandagomes7259 4 года назад
top como sempre
@PauloHenrique-ik9de
@PauloHenrique-ik9de 4 года назад
O melhor curso de CSS que já encontrei ! Ótima didática, esse guia que você criou é sensacional, obrigado cara!
@samukkaz5809
@samukkaz5809 2 года назад
Cara, muito obg! 👊🚀
@brenobcsilva
@brenobcsilva Год назад
Muito bom!!
@yasmingomes8616
@yasmingomes8616 2 года назад
Arrasou!!! Esse conteúdo me salvou muito!!!!!!!!!
@pauloluan
@pauloluan 4 года назад
Muito obrigado pelo curso, foi de longe o MELHOR material que tem no RU-vid! Qualidade excelente, Origamid salvou o rolê!
@michelgomes652
@michelgomes652 3 года назад
Didática maravilhosa!
@yurihsp
@yurihsp 3 года назад
Top demais!
@othonss428
@othonss428 2 года назад
Caraca, esse jeito seu de ensinar é muito bom.
@andrecm74
@andrecm74 Год назад
muito bom!
@AlanCarvalhoSP
@AlanCarvalhoSP 2 года назад
Muito bom, parabéns. Compartilhar conhecimento é atitude de gente boa!...
@claudinei130173
@claudinei130173 3 года назад
Caracas show de bola, mostrou em uso, poucos mostram desse jeito , parabéns!
@rafaelrocha5534
@rafaelrocha5534 4 года назад
Parabéns pelo video irmão. Ficou muito topppppppppppppppppppppppppppppppp
@DrgSuper
@DrgSuper Год назад
Simplesmente André, como não amar esse cara?
@isempin9874
@isempin9874 Год назад
Muito obrigado!
@brenobcsilva
@brenobcsilva Год назад
Obrigado professor!!
@williancossuol2179
@williancossuol2179 3 года назад
Melhor conteúdo gratuito que já vi
@matheussalesq
@matheussalesq 4 года назад
Melhor curso de Front-end que existe! Investir no plano vitalício vale a pena demais.
@clalgbarros
@clalgbarros 4 года назад
Parabéns pela aula. Foi muito proveitosa e a explicação dos conceitos foi muito clara. Foi o meu primeiro contato com o assunto e consegui absorver tudo que foi passado no curso.
@Nintendinho64
@Nintendinho64 3 года назад
professor, sério mesmo suas vídeo-aulas são as melhores, não achei ninguém que faz entender de uma maneira tão fácil igual tu! Parabéns e ótima didática !
@Renatinho95x
@Renatinho95x 3 года назад
Terminei o curso. Fiz as 4h. Obrigado Origamid
@urhur
@urhur 2 года назад
Obrigado andré, sua explicação detalhada e cheia de exemplos explicando o porque de cada coisa ajuda muito quem é iniciante, sensacional! Assim que receber esse mês vou assinar seu curso!
@nexpouos6715
@nexpouos6715 Год назад
perfeito mano muito obrigado Deus te abençoe
@valtersantos5614
@valtersantos5614 Год назад
Cara... Sensacional o seu conteúdo. Obrigado por compartilhar gratuitamente um curso de tão boa qualidade. Inúmeras vezes tentei entender Grid CSS e havia entendido somente o básico. Nunca ficou claro pra mim como era feita a utilização de forma prática. Comprei alguns cursos na Udemy e a grande maioria não dava a devida atenção para esse recurso que é fundamental na construção de um site. Fecharei meu primeiro negócio graças ao seu curso. Dei uma olhada no seu site e farei alguns cursos que tenho interesse. Parabéns pela iniciativa. Mantenha-se generoso e a prosperidade e o sucesso sempre se farão presentes na sua vida. Forte abraço de um magro que agora se sente extremamente grato pelo que recebeu - mas sem aqueles papos de "gratiluz"... hahaha!
@brunofavini7799
@brunofavini7799 3 года назад
Estava com dúvida em relação ao CSS-Grid até encontrar seu curso, agora tudo faz sentido, sem contar que sua didática é incrível!!! Obrigado por compartilhar esse conteúdo tão completo aqui no RU-vid. Parabéns Origamid !!!
@digitalhdr7768
@digitalhdr7768 3 года назад
ótimo vídeo me ajudou bastante.
@adamsinstrutor-tecnico484
@adamsinstrutor-tecnico484 Год назад
Bom dia André! Excelente, tudo que eu sei de grid layout aprendi com você! Parabéns pelo projeto!
@Victor-yo6fe
@Victor-yo6fe Год назад
A forma que o professor ensina é muito boa.
@danilomiguel389
@danilomiguel389 Год назад
Parabéns pelo curso de altíssima qualidade!! Que Deus te recompense por este belíssimo trabalho
@andre_dias25
@andre_dias25 Год назад
Conteúdo simplesmente incrível. Css grid diminui muitas dores de cabeças com css...
@N0TZ3R0
@N0TZ3R0 Месяц назад
Mt bom!
@daltonborges
@daltonborges 2 года назад
Não pude deixar de expor aqui meu agradecimento, tanto pela excelente didática em vídeo quanto pela documentação adaptada disponível com CodePen! Que trampo fantástico! Ganhou um inscrito logo de cara. Muitíssimo obrigado!! PS: minuto 1:51:47 - para não confundir, prefiro dizer sempre em inglês: "line" para as linhas de grade e "rows" para as linhas de tabela.
@danielprado1942
@danielprado1942 2 года назад
Excelente aula com uma explicação fácil de entender. Parabéns!! muito obrigado por nos ensinar!
@omidmobilecontent4748
@omidmobilecontent4748 2 года назад
Namoral cara, parabéns! Video excelente! O melhor sobre Grid-Layout do RU-vid! +1sub +1like
@danielabraao1045
@danielabraao1045 4 года назад
Excelente curso meu amigo por favor não tire do ar
@ViniciusSalles82
@ViniciusSalles82 4 года назад
Obrigado!!!!
@bcos182
@bcos182 3 года назад
Salvando o mundo com esses cursos , já fiz o flexbox e agora terminei o grid. Muito show! Obrigado mesmo!
@DevOpsBR
@DevOpsBR 3 года назад
Parabens pelo curso. fiquei a madrugada toda assistindo e quando percebi eram 5 da manhã. abracos
@thalesmiranda8377
@thalesmiranda8377 3 года назад
Olha, muito obrigado mesmo. De verdade, este curso é muito bom. Tinha que fazer uma entrada de site para entregar no meu corso e tava tendo muitos problemas com as divs o não sabia usar o sistema de grid. Esse curso me ajudou demais na moral. Parabéns para o organizador.
@bretasbretas1026
@bretasbretas1026 4 года назад
Prezado, parabéns pelo trabalho. Uma prova de que é possível uma sociedade melhor, com compartilhamento de conteúdo para quem quer evoluir em assuntos específicos. Maravilha!!! Me ajudou muito, meu desenvolvimento será outro a partir deste curso. Obrigado!!
@afaferz
@afaferz 3 года назад
Meu amigo você está de parabéns! Irei comprar teu curso de JavaScript mês que vem e cada aula que assisto me dá mais vontade de adiantar o mês hehehe parabéns
@Lucao477
@Lucao477 2 года назад
Obrigado andré, sua explicação detalhada e cheia de exemplos explicando o porque de cada coisa ajuda muito quem é iniciante, gratidão pelo conteúdo que Deus te abençoe
@mucicolin
@mucicolin 4 года назад
Para Front-end não tem melhor!! Valeu!!
@paulorc2011
@paulorc2011 4 года назад
Tenho o plano vitalicio, fiz esse curso há meses atras, acho muito bom estar disponibilizando agora o curso, para pessoas q ainda n tiveram acesso. O curso é de muita qualidade, recomendo para qualquer um.
@paulovaladares4us
@paulovaladares4us 3 года назад
Cara, vc está de parabéns. A sua didática é muito boa. Explica o codigo e faz a ligação com a parte do layout que vai ser modificada. É muito importante para quem está assistindo perceber as mudanças afetadas por parte do codigo css, e vc consegue mostrar isso muito bem.
@danielabraao1045
@danielabraao1045 4 года назад
terminei um curso sensacional pode até não funcionar em alguns pouquíssimos Browser antigos e desatualizados , porem ter esse conhecimento já é um diferencial para o currículo.
@renarfreitas
@renarfreitas 4 года назад
Show!!
@williamrichard
@williamrichard 4 года назад
O melhor curso de css que você verá, além do Front End completo que é show, mas tem que ter o plano!
@jorgeteixeira9184
@jorgeteixeira9184 4 года назад
Muito obrigado por compartilhar o curso meu irmão, por motivos de força maior não vou conseguir pegar a promoção do seu curso, sei que vale cada centavo. Esses cursos já ajudam muito, Deus o abençoe!
@user-kl4er9xq5n
@user-kl4er9xq5n 4 месяца назад
Bicho, perfeito!
@leonardocaineli2019
@leonardocaineli2019 4 года назад
Muito bom!!! Obrigado por compartilhar!!! #uidifi #ró
@anasabora8677
@anasabora8677 3 года назад
Kkkkk uidifi 🤣🤣 ele fala assim mesmo.
@joaopedrorodrigues6623
@joaopedrorodrigues6623 3 года назад
Comprei teu curso e descobri q tem ele gratis no RU-vid. Aiai!
@Origamid
@Origamid 3 года назад
Eu tenho 4 cursos gratuitos e 16 pagos na plataforma.
@erickhenrique6344
@erickhenrique6344 3 года назад
@@Origamid Conteúdo de qualidade. Parabéns ♥
@ninhamesquita
@ninhamesquita 2 года назад
o conteúdo que tem aqui no youtube nem se comparar a quantidade de conteúdo que tem lá na plataforma. Sem contar que o André está sempre atualizando com cursos novos! você fez um excelente investimento, fica tranquilo 😍
@DanielRios549
@DanielRios549 2 года назад
Pelo que eu entendi, o auto-flow column seria o mesmo que usar o flexbox com nowrap, pessoalmente se for pra usar um do lado do outro assim eu prefiro usar o flexbox mesmo, ambos são excelentes e possuem muita utilidade juntos.
@urhur
@urhur 2 года назад
Termineu o curso, e realmente é de longe o melhor que já fiz até hoje!
@yashiro3144
@yashiro3144 Год назад
ola, vc poderia me emprestar seu acesso para eu fazer?
@anesn88
@anesn88 3 года назад
Professor, suas aulas são excelentes, estava com dificuldade de entender Flexbox e entendi assistindo suas aulas e agora estou aprendendo Grid. Gostaria de saber que "lupinha" é essa que você usa para verificar as cores direto nas págs.
@luanpanno14
@luanpanno14 4 года назад
vocês são incríveis, queria muito assinar o plano vitálicio mas agora não tem como
@yuri_mutti
@yuri_mutti 3 года назад
promocao amigo aproveita!!! por alguns dias espero que vc veja e consiga
@marcoantonioalvespereira539
@marcoantonioalvespereira539 4 года назад
Uaau
@pliniojr95
@pliniojr95 2 года назад
Cara, ficou muito bacana! Assisti as 4 horas de aula e o resultado do projeto muito bom, vc me deu a base para criar meus próprios projetos. Agradeço pelo conteúdo, me ajudou além do Grid, com dicas e propriedades que não conhecia.
@pliniojr95
@pliniojr95 Год назад
@@uklysam continuo estudando, atualmente estou focando no MERN stack, talvez já estivesse um conhecimento mais aprofundado se não tivesse sido relaxado nos últimos meses.
@pliniojr95
@pliniojr95 Год назад
@@uklysam às vezes aprender um conceito novo é complicado. A melhor maneira é você rever novamente o vídeo, as coisas vão ficar mais claras. Dificilmente eu vejo um vídeo de programação só uma vez, assisto pelo menos umas duas vezes pra absorver mais. E você criando projetos, você não esquece, pois vai estar exercitando sua memoria muscular.
@adryelguimaraescouto4360
@adryelguimaraescouto4360 3 года назад
Mano vcs ganharam um estudante pqp, que metodologia encrivel
@delbersoares4703
@delbersoares4703 3 года назад
show
@potamo1288
@potamo1288 4 года назад
mi amigo 4hrs? voce e muito foda
@andregraes
@andregraes 4 года назад
Melhor curso front-end (e fiz vários). Os cursos de "position" (flexbox e grid), nem se fala! Vida longa à Origamid!
@adriano7890
@adriano7890 4 года назад
Vc já fez curso da danki code ? Vc disse que fez vários cursos e não. Aprendeu nada
@andregraes
@andregraes 4 года назад
@@adriano7890 Sim. Tenho o full stack da danki.
@rodrigof2920
@rodrigof2920 4 года назад
@@adriano7890 eu tenho o pacote full stack da danki code e achei a didática dele horrível !
@matiazy4620
@matiazy4620 4 года назад
@@rodrigof2920 empresta pra mim fazer o curso ai na humilda :(
@danilovictor1
@danilovictor1 3 года назад
O curso de Flexbox é sensacional
@henriqueoliveira6984
@henriqueoliveira6984 Год назад
Estou sofrendo um pouco como usar kkk iniciante apenas… praticar e praticar
@EduardoLima-ll3yt
@EduardoLima-ll3yt 2 года назад
Top!!! o/ 2021 :) here
@camila.mergulhao
@camila.mergulhao Год назад
Comprei o curso da Origamid faz alguns meses, e estou no "html e css para iniciantes". Estou amando a didática! Confesso que minha maior dificuldade era grid, mas o segredo é a praticar muito e não ter pressa. Eu poderia tá no avançado já, mas estou indo aos poucos, pois quero absorver o máximo, pra quando chegar no curso de Javascript não sofrer tanto. Lembrando que comecei o curso sem saber nadinha de nada. ;)
@viniat137
@viniat137 Год назад
Oi Camila, li seu comentário e me identifiquei muito!!! Estamos juntos nessa. Obrigado.
@brenobcsilva
@brenobcsilva Год назад
Melhor explicação!
@leolima8585
@leolima8585 4 года назад
Como faço isso em projetos react native, tipo o linear gradiente nesses flex box
@victorlourenco7198
@victorlourenco7198 4 года назад
Pelo sotaque, dá pra ver que é carioca. Parabéns pelo conteúdo e didática!
@feliperenan8668
@feliperenan8668 4 года назад
Vai ficar muito escroto, tá ligado ahhahahahhah Os cursos são os melhores que já fiz.
@pieck9964
@pieck9964 4 года назад
Faz um video ensinando responsividade
@douglascorso3040
@douglascorso3040 10 месяцев назад
Muito boa sua aula. Parabéns! Cheguei nesse vídeo procurando uma solução, porém não encontrei. Talvez mais gente também precise. Na linha de cima tenho 4 colunas, e na de baixo tenho duas colunas. As duas colunas de baixo se alinham pela esquerda, mas eu gostaria que elas ficassem no centro, alinhadas com as duas colunas do centro de cima. É possível?
@geanr
@geanr Год назад
Engraçando tantos códigos e no final só usamos uma pequena parte disso, claro depedendo do projeto.
@leandrowgrande
@leandrowgrande 2 года назад
Gostaria de saber qual plugin que aparece no broswer as alterações (em pontilhado) dos css do visual code?
@brenolins9908
@brenolins9908 4 года назад
É viável usar em projetos ?? Msm assim prefiro o flexbox por ser mais simples de entender e usar
Далее
Como aprender CSS GRID de uma vez por todas! 🤯
21:19
МАШ МИЛАШ про парня АБЬЮЗЕРА
00:37
CSS Grid Layout e Flexbox - Quando Utilizar
39:09
Просмотров 636 тыс.
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Просмотров 459 тыс.
Learn CSS Flexbox in 6 Minutes
6:04
Просмотров 27 тыс.
Unveiling CSS Grid in practice | Mayk Brito
36:17
Просмотров 371 тыс.
BEM in 6 minutes - CSS Methodology 2024
6:22
Просмотров 31 тыс.
Aprenda CSS Grid Em 30 Minutos
27:21
Просмотров 26 тыс.
МАШ МИЛАШ про парня АБЬЮЗЕРА
00:37