ฝัง
- เผยแพร่เมื่อ 3 พ.ค. 2020
- Front end, HTML, semântica Web, CSS, Flexbox, CSS Grid, Web Design Responsivo, Sass, SMACSS, BEM, layouts Web, UX, usabilidade...
Esses (e outros) assuntos front-end você vai encontrar nesse bate papo com Euller Cristian. São mais de DUAS HORAS de conteúdo para você se esbaldar!
⭐ Não é por acaso que profissionais front end usam determinadas convenções...
www.cssalemdosensocomum.com.br/
O Euller é programador da área back end, mas que agora está começando seus estudos também na área de front.
Ele pediu uma mãozinha com os estudos, sugerindo o projeto de um site de delivery (temática em alta neste período).
Então, os mineirinhos sentaram numa tarde de domingo munidos de seus pães de queijo e cafezinho e partiram rumo a uma jornada incrível de frontend:
Desenvolver o layout de uma página fictícia de um site de delivery de restaurantes.
Nessas mais de 2h de conteúdo, você vai encontrar dicas, macetes, ideias, toques, gambiarras e mais sobre todos esses assuntos referentes a desenvolver bons layouts para a Web moderna usando convenções internacionais e tecnologias de ponta.
Prepare aquele lanche vigoroso, acomode-se e dê o play. Nas próximas 2 horas, você é nosso convidado para participar desse bate-papo sobre layouts com CSS Grid e Flexbox.
🧾 Projeto no GitHub
github.com/desenvolvweb/eulle...
🧾 GitHub do Euller
github.com/eullercdr
💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo
/ discord
➡️ Basic Front Boilerplate (BFB)
• Basic Front Boilerplat...
➡️ O básico de Sass para se virar nas webs
• O Básico de Sass para ...
➡️ Media Queries e Breakpoints: o Básico e Fundamental
• Media Queries e Breakp...
🌐 Flaticon
www.flaticon.com/br/
🌐 SVGOMG
jakearchibald.github.io/svgomg/
🌐 A Pretty Good SVG Icon System
css-tricks.com/pretty-good-sv...
🌐 Icon System with SVG Sprites
css-tricks.com/svg-sprites-us...
==========
Assine o canal! bit.ly/dpw-youtube
- Facebook: / desenvolvweb
- Instagram: / desenvolvweb
- Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolvimentoparaweb.com/
⭐ Interessado por convenções, nomenclatura, boas práticas e arquitetura CSS?
mailchi.mp/e40fa97b13dd/cssasc-t1
⭐ Download GRÁTIS do e-book "Os 3 Conceitos Fundamentais de CSS"
mailchi.mp/500e81011405/3-conceitos-css
Mesmo o video sendo alguns passos a cima do meu conhecimento, achei muito interessante e deu para absorver informações
Assista novamente quantas vezes forem necessárias até entender tudo.
É bom que esteja acima, pois vai te ajudar a subir. :)
Conteúdo tão rico que eu preciso ver esse vídeo em dias, voltando pra entender os esquemas e praticar... Muito bom!!!
Veja e reveja quantas vezes forem necessárias. Taí para isso, mesmo. o/
SENSSACIONALLLL!!!
Bem-agradecido, meu caro! :D
Show de bola, Obrigado!
Eu que agradeço pela participação de sempre, Antonio!
Putz...já vi alguns videos top...mas esse agora ficou no topo de todos. Parabéns pela didática e ideia. Top d+++!
haha, que isso, gentileza sua!
Muito obrigado pela força! Apareça mais, hein.
Vc é o cara, compartilhando aqui!
Parabéns e obrigado, está ajudando muito os mortais como eu kkk
Eu que agradeço imensamente o compartilhamento; isso estimula o canal a crescer e aí a gente consegue ajudar muito mais gente! \o/
Isso daria um E-BOOK valiosissimo para iniciantes com eu
Tem muita coisa boa, realmente. :)
muito bom sem palavras
Obrigado! :D
massa de mais cara, vou assistir hoje anoite.
Depois conta o que achou. ;)
Amei este vídeo! Parabéns canal !!
Muito obrigado, Eliezer! 😁
Ótima didática, parabéns pelo conteúdo!
Vlw, Thiago! Eu que agradeço pelo comentário. Apareça!
Comecei no like :D
Haha, então começou bem demás! ;D
Cara que oportunidade você me deu! Muito obrigado.
Não foi nada! ;)
Show demais Tarcio! Peguei várias sacadas que vão facilitar meus estudos de front
Maravilha, Gustavo! A ideia é essa. 😃
Já fiz alguns trabalhos para o Euller! Gente boa, excelente profissional!
Olha só, que coincidência. Gente boníssima, realmente!
Vou até liberar uns trechos desse nosso encontro em vídeos avulsos. Vai ficar bem legal. :)
Eu vi 1 video seu cara, e vou dizer que a primeira impressao que tive foi sensacional, e agora... vejo que estou certo.
Cara você é ótimo no que faz e explica muuuuito bem.
Simplesmente top seu canal!
Obrigado por ter aparecido na minha vida!! kkkkkk
Que isso, eu que agradeço, Patrick! Bom saber que tá gostando! o/
Já dei aquele like que fortalece, + 1 inscrito para a força.
É diiisso que o povo gosta! o/
Olá Tárcio tenho os 4 cursos seus no Udemy mas, esse formato que usou aqui de fazer (reproduzir) na prática é sensacional 👏👏👏 Aguardando muito mais 👍
Opa, Reginaldo! Tudo bom?
Fico feliz que tenha gostado. Com certeza haverá muito mais. Inscreva-se e ative o sininho. ;)
@@dpwoficial Já sou assinante e sempre aguardo o TH-cam me avisar quando tem novo vídeo no canal. Vlw!!!!
@@ReginaldoRadel Obrigado pela força! o/
Olá qual os links
Parabéns pelo conteúdo maravilhoso. Aprendi muito!
Depois dessa, vou pesquisar seus cursos na Udemy.
Opa, muito obrigado, Klaylton! Aquele abraço!
@@dpwoficial qual é o nome do curso na Udemy?
@@luanabaratta É esse: www.udemy.com/course/css-grid-layout/
Conteúdo incrível!!!, Hoje parei no 55min, vou continuar dps.
Minha opinião para algumas questões até aqui, sugiro criar um breakpoint inferior a 375px, é verdade que não existe novos modelos com essa densidade em px, entretanto ainda tem muita gente com o tal do Iphone 4 e até inferior.
Outro ponto (na minha opinião) não é bom na visualização mobile colocar as colunas laterais a cima do main, elas são chamados de aside por um motivo, são funcionalidades relacionadas ao conteúdo central, do contrário deveriam está no main (salvo conteúdo de publicidade). Sendo assim, no mobile qualquer funcionalidade no aside deve se comportar dentro do contexto de menu de navegação e o que tiver no main ser exibido totalmente na primeira exibição, muitos wireframes de frameworks css que utilizo adotam essa pratica, em meus testes sempre trouxeram melhor experiência para o usuário.
E sobre as variáveis do SASS do padrão BEM, não devem ser utilizadas em projetos grandes, apesar que a maneira que o professor fez eliminou totalmente o problema que isso pode trazer para o projeto, mas se esse projeto for crescer mais, vai dá problema! Que problema ? A difícil identificação de estilos de elementos específicos, em todo projeto é aconselhável priorizar a identificação e o fácil acesso.
Particularmente não gosto de linguagens de extensão do CSS, SASS ou outro qualquer, não vejo um critico motivo para ser utilizado, visto o poder que CSS já nos entrega para quem o conhece a fundo, sem contar que é preciso se pensar no desempenho, a engenharia do SASS é fenomenal, entretanto vc add muito mais textos no seu projeto, mais textos inegavelmente menor performance.
Professor esse é um conteúdo realmente diferenciado! Parabéns mesmo!!! Fazer isso não é para qualquer um !🥇
Muito obrigado pelo seu comentário. Queria que todos participassem assim. :)
Considerações sobre os pontos levantados:
- Breakpoint mínimo: 375px é uma recomendação genérica; o "certo" será definido pelas especificações do projeto (incluindo retrocompatibilidade etc.);
- asides: depende de cada projeto; da semântica das páginas etc.;
- Sass e arquiteturas CSS: DEVEM ser usados em projetos grandes; usar arquivos "atômicos" (@import/@use) dentro de uma arquitetura comprovadamente eficiente é benéfico para qualquer projeto;
Abs
Show de bola, da um trabalho kkk
Ô, demaaais...
Sinto falta dos programadores raizes que programam na unha. Todo video que vejo é o cara usando framework, repositório de códigos…
Não que isso seja errado, em si, afinal, aproveitar um bom trabalho alheio para adiantar o nosso é muito benéfico.
O problema é: o cara SÓ SABE usar framework, lib etc.
Boaaa
Qual extensão você usa no Chrome pra tirar screenshots e adicionar setas e tal?
Vlw, Mateus!
A extensão é Awesome Screenshot. #recomendo
Onde posso aprender mais sobre estruturas de projetos em sass? E por quê tem um arquivo scss linkado direto no html?
Opa, Gabriel, tudo bom?
Usar um arquivo .scss direto no HTML é possível graças ao boilerplate de projetos aqui do canal, o BFB. Para saber mais a respeito, dá uma olhada aqui: th-cam.com/video/Uoch-xwx1yU/w-d-xo.html
Sobre a outra questão, não sei se haveria "estrutura de projetos em Sass"; provavelmente, você vai encontrar mais material ao pesquisar sobre estruturas gerais, arquitetura de CSS etc.
Se quiser dar uma olhada, temos um curso que aborda esse assunto: www.udemy.com/course/css-um-passo-adiante/?couponCode=9D9FF6039D602241FCA2
Espero que ajude. Vlwww
Existe algum site onde eu posso pegar loyat prontos pra praticar ? Pegar as i .agenda tamsnhos essas coisas ? Ou então algum site que eu possa pegar imagens pra fazer um loyat .
Instagram, Pinterest, Dribbble etc.
Qual snippet do VSCode você usa? Especificamente essa no tempo 12:25 ?
Não é de nenhuma lib; eu mesmo que fiz esse. :)
Ótima aula!!! Conteúdos atuais e riquíssimos, parabéns! Fiquei com uma dúvida.. pq usou 2x "aside content" (minuto 43:03) em:
grid-template-areas:
"aside content"
"aside content";
???
Muito obrigado! :D
Essa sintaxe é a de CSS Grid para definir a posição das áreas. Significa que a primeira coluna será "aside" em 2 linhas e que a segunda coluna será "content" por duas linhas.
Entendi... É pq quis usar 2 linhas pra cada
@@dpwoficial showwwww, muito obrigado! 👍👊
Salve, ótimo vídeo. Estou usando a v2 do BFB. Nele existem as functions na camada tools do itcss, porém, quando tendo usá-las em meus arquivos (background-color: color(primary);) por algum motivo, a saída para o browser continua sendo "color(primary);", ele não retorna o valor traduzido. Sabe me dizer o motivo? Abraço!!!
Você tá usando @use direitinho?
@use './01-settings/color';
@use './02-tools/color' as *;
body {
background-color: color(primary);
}
@@dpwoficial Obrigado pela atenção. Meu erro foi o "as *" ao final do @use. Agora tudo está funcionando!
Cara uma duvida, vc usa alguma dessas tecnologias? React, vue e/ou Angular?
Uso todas. É só o cliente pedir. :)
Como você deixou em ordem alfabética o CSS? Alguma extensão ou atalho no próprio vscode?
Fala, Antoni. Só apertar F9.
@@dpwoficial Pra isto funcionar, deve estar instalada a extensão Sort lines no vscode
Boa noite!
Tarsio, confesso que fiquei com dúvidas sobre a nomenclatura das classes, não compreendi o conceito de l-exemplo ou c-exemplo. Indica algum material que me ajude a compreender melhor?
Valeu!
Opa, Jorge.
Temos um material sobre isso, sim. Dá uma olhada: th-cam.com/video/24inN5LDO3M/w-d-xo.html
Abs
@@dpwoficial Valeu! Recebi agorinha no e-mail com mais links sobre CSS! ahahah
@@jorgeteixeira9184 Haha! Maravilha, então!
devo aprender grid e sass, ou posso focar so no bom e velho flexbox e css comum?
Calma... Isso não é uma alternativa; são 2 perguntas diferentes.
Para facilitar: aprenda todos!
Sugestão de ordem:
1. Flexbox
2. CSS Grid
3. Sass
@@dpwoficial vlw brody
Já saiu o vídeo a respeito de como nomear corretamente as variáveis? :D
Ainda não... Vou subir na fila em sua homenagem. :)
@@dpwoficial eitaa 😮😮 kk só tenho a agradecer, aprendi e aprendo muito com seu conteúdo!
Como faz pra organizar em ordem alfabética?
Dá para configurar tecla de atalho na maioria dos editores/IDEs.
No meu, coloquei F9.
Que simbulo é esse que você usa para chamar o hover dentro do elemento, não encontro em lugar algum
É o símbolo ampersand (ou "e comercial"). Isso é sintaxe de Sass, um pré-processador CSS.
th-cam.com/video/kA-PXyfjL84/w-d-xo.html
@@dpwoficial vlw
Qual extensão que vc usou para Sass no Vs Code?
Não é extensão. É o BFB, que usamos para os projetos aqui do canal.
Dá uma olhadinha na descrição que tem o link do vídeo e do repo. 👍
Abs
@@dpwoficial Acho que ele está perguntando pelo nome do snippet que vc usa em sass para autocompletar, obrigado pela aula, mais um inscrito e já dei Like!! Abraço
@@Elnegritocomar Ahh, entendi! Obrigado por esclarecer.
Uso essas duas aqui, Kaio:
- marketplace.visualstudio.com/items?itemName=Syler.sass-indented
- marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss
ou mano, eu n to conseguindo fazer o grid layout com sass, versao atulizada e os caramba, ele compila pro css todo desarrumado (só a parte que eu defino o grid-template-areas), fica tudo em linha. Mas ainda sim ñ funciona, msm o css estando correto, o que eu faço?
Coloca seu código em algum serviço (tipo CodePen) e passa o link pra gente dar uma olhada.
@@dpwoficial opa, é so um codigo de boa msm, pra fazer o grid, eu to fazendo so pra aprender o sass, é pequeno pegai: codepen.io/Cenouradourada/pen/LYpeYoM?editors=1100
Encontrei algumas questões no código, Luis Henrique:
- Não tem "display: grid" no body
- Em grid-template-areas, tá escrito "hader"
- Não tem conteúdos nas divs, então não ia aparecer nada, mesmo
Dá uma olhadinha nisso que deve funcionar. :)
@@dpwoficial putz, kkkk vacilo, mas vlw ai mano seu canal é foda
Muito obrigado! Se quiser dar aquela força, ajuda a divulgar o vídeo nas redes e grupos. vlwww
Very cool tutorial, but i don't understend
The language is brazilian portuguese.
hey, i will teach the for you
Peguei a pipoca!
🍿