Fazer responsivo é uma boa hein. Queria ver como iria ficar a organização do Tailwind a medida que vamos adicionando transições, animações e responsividade.
Para fazer o nav possuir o texto _Playlist _ com o valor do número incremental, da para usar o emmet: nav>a{Playlist $}*5 Você troca o 5 no final para quantas tags anchor você irá querer
não se compare mano, estude e tenho certeza que no seu tempo você tbm vai conseguir. E tipo foi uma hora pq ele reescreveu muito código poderia até ser menos kkkkk o cara é um mostro
Muito bom! Para melhorar as classes repetitivas, eu criaria uma classe no style "scoped" e usaria o @apply , sendo assim, o código fica mais limpo e fácil para manutenção. Ex: .titleSectionAlbuns { @apply text-md font-semibold; } E por aí vai...
video mto massa, fazia tempo que nao codava com typescript e next, mto massa ver o quanto tudo mudou hehe. Vlwww Diegao e galera da Rocket, video bom demais!!!
Muito prático! Gostaria de ver fazendo exatamente igual ou bem mais aproximado, com o gradient de fundo trocando as cores de acordo com o álbum, mudar header no scroll down, responsivo etc. Acho que é um exercício bem interessante e explora várias técnicas.
Daora Diegão, eu tava meio desesperado porque eu queria um tutorial rapido de tailwind, já que existe isso de padrão futuro para o next, e sei que você vai abordar no ignite, mas eu queria fazer o ignite agora do 0 usando só tailwind até dominar tudo, mas tava perdido, obrigado mesmo e se puder, traga mais conteúdos assim, me ajuda bastante
Faaala Diegão! Faz pra nós pooooooor favor um tutorial de configurações de ESLint e Prettier pro Next com o Tailwind, com formatação do código, quebra de linha e tudo mais 🙌🏻
Eu amo Taiilwind, meu novo queridinhoo. Arrasou com o vídeo!! E quem tem problema com toque no código, podemos componentizar e deixar o HTML mais limpo...
É impressionante como o Diego tem a habilidade de tornar tudo tão simples. Ele é realmente incrível nisso! vai ser ótimo para o proximo ep da minha jornada na programção! ótimo conteudo!! abraço!
Perfeito Diego! Consegui acompanhar e ir fazendo junto com você. Isso, faz os temas e também vai aumentando o grau de dificuldade, quem sabe uma API trazendo as músicas de algum lugar ?!😉🙈 Um grande abraço e + sucesso, você merece.
Isso foi um exemplo estático. A questão é fazer um aplicativo dinâmico em que o código da interface fique separado do código de negócios (interação com o banco de dados).
tailwind parece libertador, não tem que pensar nomes pra classes ou utilizar o método BEM pra nomear as classes vc já inseri o estilo na classe muito bom vou aprender
Muito bom. Esse Tailwind bem usado com certeza é uma excelente ferramenta, hoje em dia eu uso muito mais o ChakraUI pra desenvolver as interfaces dos projetos da empresa que trabalho, acho ele bem bom. E daria fazer uma interface dessa do spotify em pouquíssimo tempo também. Excelente vídeo.
Como você faz para alterar o design dos componentes dessa lib? Cria um componente deu por exemplo table do chakra e depois cria um arquivo css pra alterar o design?
Opa, já no aguardo pro próximo vídeo abordando responsividade no Tailwind, uma dúvida no caso agora o padrão recomendado pela doc do react é usar já de cara um framework tipo next? (ou até já criar com o next)
Pô Diegão seria muito da hora fazer algum conteúdo como esse, por exemplo, utilizndo Electron, dei uma pesquisada sobre Electron + React no TH-cam e só achei conteúdo mais antigo.
outra visão! Diego após assitir seu vídeo senti minha mente mais aberta, não tenho conhecimento técnico para julgar o que vi, mas tenho experiência de vida pra saber que você sabe do que esta falando e fala muito bem, e aforma como trata o código de forma ágil me deixou impressionado, como faz cara pra selecior trechos de código e fazer as substituições e inserções de forma extraordinariamente linda? parabéns Diego, virei seu fã!
Vlw Diego, fui demitido a 1 mes e hoje foi meu último dia na empresa, preciso de renovar comecei a estudar Next essa semana já vi todo os vídeo seu falando do next13 e tailwind, e vc manda um dessa pra criar um portfólio, vlw irmão abraço!! 🎉🎉
Tem vídeo explicando como usar os atalhos do teclado pra codar mais rápido? Tem alguns atalhos que o Diego utilizou que eu não consegui descobrir como que faz. :(
Top demais! Obrigado. Que atalho é esse que você usa para selecionar várias linhas com textos semelhantes? Eu uso o ctrl + D mas esse atalho seleciona uma a uma.
Diego poderia fazer um video sobre esse novo formato de api route do next.. como fazer algo similar a um restfull com ele para receber param em rota e ou queryString
32:00 quem quiser colocar o ícone de play preenchido pode usar a propriedade fill do svg, ficando
Nem todo herói usa capa
Cara, o Diego consegue fazer tudo parecer tão fácil. Incrível isso bixo.
Tenho a mesma sensação... Diego é d+
@Wander Hungerbühler Experiência e conhecimento é tudo né bixo? Espero um dia chegar perto disso.
Parabéns pelo seu trampo também!
@Wander Hungerbühler obrigado pelo incentivo!
A didatica dele é algo incrível
ele ja tem o roteiro pronto nao se engana nao man
O vídeo nem começou e eu já tô no hype!! Diegão é MONSTEEERRRR
Fake
Bom dia, qual a distro linux que vc usa?
kmk Mayke... Da uma luz a]i de como colocar o project no github pages.
Inclusive tomou um monster pra fazer o conteúdo 🤣🤣🤣🤣🤣
Fazer responsivo é uma boa hein. Queria ver como iria ficar a organização do Tailwind a medida que vamos adicionando transições, animações e responsividade.
Para fazer o nav possuir o texto _Playlist _ com o valor do número incremental, da para usar o emmet: nav>a{Playlist $}*5
Você troca o 5 no final para quantas tags anchor você irá querer
Perfeito, assisti como se fosse um filme. Devia virar playlist, seria um boracodar em react...
Up
Up pra krl
#Boracodar em outras linguagens seria legal
@@peterpontocom Web só tem JavaScript de linguagem.
E eu sei que tem outras que estão chegando.
Aula magnífica!!! Por favor, traga a parte 2, aplicando a responsividade e a mudança de cor no background.
Soltaaaa o brabooo!! Queremos continuação!! Me abriu muito a mente sua explicação, a didática é boa demais!
Em uma hora o cara faz o layout do Spotify, em uma hora não consigo nem iniciar um projeto kkkk
😂 dois mano kkk
Três 😭
Kkkkkk
Existe todo um planejamento antes e muitas das vezes já fez o projeto antes tbm..
não se compare mano, estude e tenho certeza que no seu tempo você tbm vai conseguir. E tipo foi uma hora pq ele reescreveu muito código poderia até ser menos kkkkk o cara é um mostro
Muito bom! Para melhorar as classes repetitivas, eu criaria uma classe no style "scoped" e usaria o @apply , sendo assim, o código fica mais limpo e fácil para manutenção.
Ex:
.titleSectionAlbuns {
@apply text-md font-semibold;
}
E por aí vai...
Responsividade e adição da troca de temas light/dark seria show também :D
Gostei muito, faz mais vídeos neste estilo, tô começando ver front agr e achei muito bom!!!!
Primeira vez vendo o Tailwind. Muito bom e fácil de usar. Muito legal tb vendo vc criar a réplica do spotify. Show!
Já quero a parte 2, muito top o conteúdo Diego
video mto massa, fazia tempo que nao codava com typescript e next, mto massa ver o quanto tudo mudou hehe. Vlwww Diegao e galera da Rocket, video bom demais!!!
conteúdo top, diegão monstro faz parecer tão simples 😂 continuemm!! além da responsividade poderia torná-lo dinâmico
Muito prático! Gostaria de ver fazendo exatamente igual ou bem mais aproximado, com o gradient de fundo trocando as cores de acordo com o álbum, mudar header no scroll down, responsivo etc. Acho que é um exercício bem interessante e explora várias técnicas.
ja estamos à espera da continuacao! grande video, parabens
para preencher o botão de play de preto com o lucida se faz assim>
e tirei o text-color do button
Show, estou doido esperando já o vídeo desse layout com responsividade 😊😊😊
Mt bom! E seria legal ver a parte de responsividade tb 👍
Percebi que q melhor maneira de aprender a estilizar frontend é assistindo outras pessoas fazendo e pegando as sacadas que eles tem
Exatamente!
Ver vídeo explicando as coisas não vale nada praticamente.
Que bacana! Adorei, sempre fico impressionado com o conhecimento, dedicação e didática do Diego, gostaria de ver um continuação com tema dark / white
Daora Diegão, eu tava meio desesperado porque eu queria um tutorial rapido de tailwind, já que existe isso de padrão futuro para o next, e sei que você vai abordar no ignite, mas eu queria fazer o ignite agora do 0 usando só tailwind até dominar tudo, mas tava perdido, obrigado mesmo e se puder, traga mais conteúdos assim, me ajuda bastante
Show Diegão, continua esse layout sim, vai ficar massa!
Olha fiz todos os passos e gostei bastante do resultado, eu gostaria mesmo que continuássemos a melhora-lo tipo uma parte 2.
Faaala Diegão! Faz pra nós pooooooor favor um tutorial de configurações de ESLint e Prettier pro Next com o Tailwind, com formatação do código, quebra de linha e tudo mais 🙌🏻
Eu amo Taiilwind, meu novo queridinhoo. Arrasou com o vídeo!! E quem tem problema com toque no código, podemos componentizar e deixar o HTML mais limpo...
É impressionante como o Diego tem a habilidade de tornar tudo tão simples. Ele é realmente incrível nisso! vai ser ótimo para o proximo ep da minha jornada na programção! ótimo conteudo!! abraço!
Diego consegue fazer com que as coisas pareçam fáceis hahah é absurdo. Parabéns pelo conteúdo
Perfeito Diego! Consegui acompanhar e ir fazendo junto com você. Isso, faz os temas e também vai aumentando o grau de dificuldade, quem sabe uma API trazendo as músicas de algum lugar ?!😉🙈 Um grande abraço e + sucesso, você merece.
O cara é um mestre fazendo e explicando ao mesmo tempo, sempre aprendendo contigo obg!
Diego, da continuidade nesse projeto! Ficou massa!
Cara, mt bom saber sobre essa propriedade "space", é por isso q é bom ver esses conteúdos mesmo já sabendo sobre, sempre tem uma coisa nova ❤
Aual Incrivél! Seria muito bom continuar deixando ele recursivo.
vamos continuar, show de bola... fazer todo com responsividade etc
vídeo muito bom!! algo que eu gostaria muito de ver seria como montar um design system inteiro com tailwind, seria super interessante
Muito bom, uma parte 2 com certeza será bem vinda!
Isso foi um exemplo estático. A questão é fazer um aplicativo dinâmico em que o código da interface fique separado do código de negócios (interação com o banco de dados).
Vídeo incrível, ansioso pela continuação!!!
meu, fico impressionado como o diego trabalha com uma naturalidade todos os componentes, monstro demais!!
Show! Continua esse layout, Diegão
tailwind parece libertador, não tem que pensar nomes pra classes ou utilizar o método BEM pra nomear as classes vc já inseri o estilo na classe muito bom vou aprender
Muito bom o vídeo, seria legal fazer a continuação!!
Show!!! Tem de ter uma parte 2.
Muito bom. Esse Tailwind bem usado com certeza é uma excelente ferramenta, hoje em dia eu uso muito mais o ChakraUI pra desenvolver as interfaces dos projetos da empresa que trabalho, acho ele bem bom. E daria fazer uma interface dessa do spotify em pouquíssimo tempo também. Excelente vídeo.
Como você faz para alterar o design dos componentes dessa lib? Cria um componente deu por exemplo table do chakra e depois cria um arquivo css pra alterar o design?
Quero muito aprender a programar desse jeito. Cê faz paracer tão fácil e rápido
Incrivel, Parabéns Diegão.
Muito massa Diego, aprendi muito
Parabéns. Excelente trabalho. Se conseguir avançar neste projeto seria interessante.
42:37 flashbang grenade
Aguardando a parte 2 dessa obra de arte 💡🧠
Continua ele Diego!
Seria legal mostrar exemplo de como fica quando o style muda de acordo com props do componente
Opa, já no aguardo pro próximo vídeo abordando responsividade no Tailwind, uma dúvida no caso agora o padrão recomendado pela doc do react é usar já de cara um framework tipo next? (ou até já criar com o next)
Isso
Ia ser legal um conteúdo de resposividade com tailwind .... estou começando a usar tailwind e estou curtindo bastante !!
Pô Diegão seria muito da hora fazer algum conteúdo como esse, por exemplo, utilizndo Electron, dei uma pesquisada sobre Electron + React no TH-cam e só achei conteúdo mais antigo.
Verdade cara
Sem querer fazer jabá, mas já fazendo kkkk tem um curso de Electron + React da Rocket que pode ser adquirido individualmente :)
Saudades demais do UI Clone. ps: Esse DMX do Daily Mix me pegou viu mano. 🔥
CONTINUEEEE POR FAVORRR
Eu uso sempre e ainda acabo aprendendo varias coisas. Muito bom
outra visão! Diego após assitir seu vídeo senti minha mente mais aberta, não tenho conhecimento técnico para julgar o que vi, mas tenho experiência de vida pra saber que você sabe do que esta falando e fala muito bem, e aforma como trata o código de forma ágil me deixou impressionado, como faz cara pra selecior trechos de código e fazer as substituições e inserções de forma extraordinariamente linda?
parabéns Diego, virei seu fã!
É o Ctrl + D do editor kkkkk seleciona todas as ocorrências do trecho selecionado
brabíssimo 👏🏼
Vlw Diego, fui demitido a 1 mes e hoje foi meu último dia na empresa, preciso de renovar comecei a estudar Next essa semana já vi todo os vídeo seu falando do next13 e tailwind, e vc manda um dessa pra criar um portfólio, vlw irmão abraço!! 🎉🎉
Não sei se conhece, mas este canal pode te ajudar: www.youtube.com/@devjunioralves 👍
Muito daora. Continua Diegão
quero a pt2, show de bola!!
Otimo video. sugestam replicar/recriar interface clickup com tabelas funcionais. seria muito massa ver essse conteudo.
O diego traz a proxima aula reponsividade por favor ! quero aprender mais !
Esperando a parte dois. Vai ficar em dia
Muito top!! Ficou perfeito.
Faz responsivo!! Muito bom o vídeo
Continua aí! Faz o responsivo!
Eita, que TERMINAL. Fiquei apaixonado ❤❤. Podes dizer qual terminal você usa?
Abraços, a partir de Angola
Se chama wrap, disponível só para mac até então
Novo por aqui. Que doideira isso. E o cara faz tão rápido. Mais rápido que fazer no elementor só arrastando hahahaha
Ficou massa Digão...
Queria ver como fica o responsivo com temas light e dark mais o uso de @apply.
Parabéns pelo video!!!
Não vejo a hora da continuação 😊❤
Cara o vídeo ficou show, e eu acrescentei algumas coisas que faltava, só não fiz as funcionalidades
Muito bom, faz o vídeo de como deixar responsivo.
esse terminal ai tem pra windows n? que coisa linda
Simplismente incrivel👏👏👏👏👏👏👏👏👏👏👏
Contínua contínua contínua 🚀
o lucide tem o icon monitor-speaker que é perfeito pro botão de device do spotify
por favor faça uma parte 2 : )
47:17 Eu gritando aqui kkkkkkkk coloca um burg
Diegão faz um video deixando responsivo, é tema dark é light 😄
Felipe Fernandes em 2024 :
`` faaala pessoal hoje no video iremos recriar a realidade usando Tailwind`` .
Conteúdo da Rocket é incrivel demais 🔥🔥🔥
Objetividade brutal, assim que eu gosto.
muito bom!!! seria legal ver ele resposivo sim
Só olhar e apreciar o homem trabalhando kkkk
Continua! muito bom
Tenta fazer o segundo vídeo sobre algumas funcionalidades do Spotify
Tem vídeo explicando como usar os atalhos do teclado pra codar mais rápido? Tem alguns atalhos que o Diego utilizou que eu não consegui descobrir como que faz. :(
Top demais! Obrigado. Que atalho é esse que você usa para selecionar várias linhas com textos semelhantes? Eu uso o ctrl + D mas esse atalho seleciona uma a uma.
muito bom, Diegão!
vídeo top, não conhecia o tailwind. Pode continuar essa interface? obrigado
saudades ui clone voltaaaaa
Muito bom o video...
Sim...faça a parte da responsividade
Rodz do UI Clone!!! Quem quer que o quadro volte, curte ae!!!!
Diego, fala do t3 stack, queria ver o que vocês da rocket acham
Diego poderia fazer um video sobre esse novo formato de api route do next.. como fazer algo similar a um restfull com ele para receber param em rota e ou queryString