Recriei a interface do Spotify usando Tailwind

[@tascintra]

32:00 quem quiser colocar o ícone de play preenchido pode usar a propriedade fill do svg, ficando

[@JonatasBorge]

Nem todo herói usa capa

[@gabrielantunes455]

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.

[@maykbrito]

O vídeo nem começou e eu já tô no hype!! Diegão é MONSTEEERRRR

[@rapaduraman3543]

Fake

[@filipelperes]

Bom dia, qual a distro linux que vc usa?

[@Id_Mata]

kmk Mayke... Da uma luz a]i de como colocar o project no github pages.

[@GamersRoomful]

Inclusive tomou um monster pra fazer o conteúdo 🤣🤣🤣🤣🤣

[@onildo_costa]

Cara, o Diego consegue fazer tudo parecer tão fácil. Incrível isso bixo.

[@pablogomys]

Tenho a mesma sensação... Diego é d+

[@onildo_costa]

@Wander Hungerbühler Experiência e conhecimento é tudo né bixo? Espero um dia chegar perto disso. Parabéns pelo seu trampo também!

[@onildo_costa]

@Wander Hungerbühler obrigado pelo incentivo!

[@JohnEsrom]

A didatica dele é algo incrível

[@DailyNewsInternationalShorts]

ele ja tem o roteiro pronto nao se engana nao man

[@teliiz]

Em uma hora o cara faz o layout do Spotify, em uma hora não consigo nem iniciar um projeto kkkk

[@AndreRds]

😂 dois mano kkk

[@beneditonamburete1218]

Três 😭

[@tiagopaees]

Kkkkkk

[@emersontrindade299]

Existe todo um planejamento antes e muitas das vezes já fez o projeto antes tbm..

[@sergio.808s]

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

[@odeisouza]

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

[@aryelramos2260]

Perfeito, assisti como se fosse um filme. Devia virar playlist, seria um boracodar em react...

[@ojoaomarcelo]

Up

[@Luccas_Alves]

Up pra krl

[@peterpontocom]

#Boracodar em outras linguagens seria legal

[@Ramon_Oyster_Cult]

@@peterpontocom Web só tem JavaScript de linguagem.

[@Ramon_Oyster_Cult]

E eu sei que tem outras que estão chegando.

[@caiovitor2164]

Aula magnífica!!! Por favor, traga a parte 2, aplicando a responsividade e a mudança de cor no background.

[@renatotex9356]

Soltaaaa o brabooo!! Queremos continuação!! Me abriu muito a mente sua explicação, a didática é boa demais!

[@rafael141ful]

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

[@wChickenLittle]

Responsividade e adição da troca de temas light/dark seria show também :D

[@fabioreichertleite248]

para preencher o botão de play de preto com o lucida se faz assim> e tirei o text-color do button

[@setentaxsete1407]

Primeira vez vendo o Tailwind. Muito bom e fácil de usar. Muito legal tb vendo vc criar a réplica do spotify. Show!

[@jairodevjunior]

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

[@juliocesarcandeia7952]

Gostei muito, faz mais vídeos neste estilo, tô começando ver front agr e achei muito bom!!!!

[@wandersonbarbosa]

Olha fiz todos os passos e gostei bastante do resultado, eu gostaria mesmo que continuássemos a melhora-lo tipo uma parte 2.

[@hamiceis]

Já quero a parte 2, muito top o conteúdo Diego

[@elmocho9003]

ja estamos à espera da continuacao! grande video, parabens

[@raimundojunior8547]

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

[@wsanada]

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.

[@a_fabrica_da_curiosidade]

conteúdo top, diegão monstro faz parecer tão simples 😂 continuemm!! além da responsividade poderia torná-lo dinâmico

[@aiandraalvesmeira1039]

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

[@cristianogro]

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

[@kedmamenezes]

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.

[@matheusbaron1]

Show Diegão, continua esse layout sim, vai ficar massa!

[@williampoletto9518]

Mt bom! E seria legal ver a parte de responsividade tb 👍

[@matheusleao5084]

Diego consegue fazer com que as coisas pareçam fáceis hahah é absurdo. Parabéns pelo conteúdo

[@fabioreichertleite248]

vamos continuar, show de bola... fazer todo com responsividade etc

[@jeffgrassine]

Aual Incrivél! Seria muito bom continuar deixando ele recursivo.

[@vanessabrazuna]

Diego, da continuidade nesse projeto! Ficou massa!

[@ALEXANNDREF]

Show, estou doido esperando já o vídeo desse layout com responsividade 😊😊😊

[@laisa4836]

vídeo muito bom!! algo que eu gostaria muito de ver seria como montar um design system inteiro com tailwind, seria super interessante

[@braddoidao8818]

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 🙌🏻

[@cleiton_rs]

Muito bom, uma parte 2 com certeza será bem vinda!

[@walkdead94]

Percebi que q melhor maneira de aprender a estilizar frontend é assistindo outras pessoas fazendo e pegando as sacadas que eles tem

[@Gus7Dev]

Exatamente! Ver vídeo explicando as coisas não vale nada praticamente.

[@nathandias6738]

O cara é um mestre fazendo e explicando ao mesmo tempo, sempre aprendendo contigo obg!

[@fischerdev]

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).

[@LuanHenrique-pc3nn]

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 ❤

[@isseihyoudou5522]

42:37 flashbang grenade

[@ohenriqueroos6201]

Vídeo incrível, ansioso pela continuação!!!

[@matheusfelipe5634]

meu, fico impressionado como o diego trabalha com uma naturalidade todos os componentes, monstro demais!!

[@anaclaragarcia2193]

Show! Continua esse layout, Diegão

[@joaomarcosfarias23]

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

[@HawkDev.]

É 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!

[@LuizHenrique-em8yp]

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.

[@iii4443]

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?

[@ChristianPompeu-b6p]

Show!!! Tem de ter uma parte 2.

[@AndreParenteBarbosa]

Parabéns. Excelente trabalho. Se conseguir avançar neste projeto seria interessante.

[@aoweageofwarringempire6633]

CONTINUEEEE POR FAVORRR

[@queirozz8]

brabíssimo 👏🏼

[@wylkerdsantosoficial]

Muito bom o vídeo, seria legal fazer a continuação!!

[@raulviniciusmoreira8843]

Incrivel, Parabéns Diegão.

[@peterpontocom]

Quero muito aprender a programar desse jeito. Cê faz paracer tão fácil e rápido

[@alekis1637]

Continua ele Diego!

[@reuelsiIva]

Muito massa Diego, aprendi muito

[@mantovaniarts]

Eu uso sempre e ainda acabo aprendendo varias coisas. Muito bom

[@rockNbrain]

Ia ser legal um conteúdo de resposividade com tailwind .... estou começando a usar tailwind e estou curtindo bastante !!

[@joaoluizcadore4980]

Muito top!! Ficou perfeito.

[@TWtutoriais]

47:17 Eu gritando aqui kkkkkkkk coloca um burg

[@bartsilva5513]

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ã!

[@desenvolvedor2144]

É o Ctrl + D do editor kkkkk seleciona todas as ocorrências do trecho selecionado

[@danielhorodenko8587]

Muito daora. Continua Diegão

[@catianonorbertoermelinda8745]

Cara o vídeo ficou show, e eu acrescentei algumas coisas que faltava, só não fiz as funcionalidades

[@AcheiInteressante_]

Aguardando a parte 2 dessa obra de arte 💡🧠

[@AlissonMarqui]

Seria legal mostrar exemplo de como fica quando o style muda de acordo com props do componente

[@andremacedomachado357]

Otimo video. sugestam replicar/recriar interface clickup com tabelas funcionais. seria muito massa ver essse conteudo.

[@cristianosoares5479]

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)

[@dieegosf]

Isso

[@jailsonsantos555]

Ficou massa Digão...

[@jhonatanfelix4753]

Novo por aqui. Que doideira isso. E o cara faz tão rápido. Mais rápido que fazer no elementor só arrastando hahahaha

[@LucasFilipeSilvaSouza]

Pô Diegão seria muito da hora fazer algum conteúdo como esse, por exemplo, utilizndo Electron, dei uma pesquisada sobre Electron + React no KZbin e só achei conteúdo mais antigo.

[@nicolasmoises2720]

Verdade cara

[@dieegosf]

Sem querer fazer jabá, mas já fazendo kkkk tem um curso de Electron + React da Rocket que pode ser adquirido individualmente :)

[@josemuhongodealmeida907]

Esperando a parte dois. Vai ficar em dia

[@edgarjustavino9249]

Contínua contínua contínua 🚀

[@MatheusPereira-nn9dj]

Felipe Fernandes em 2024 : `` faaala pessoal hoje no video iremos recriar a realidade usando Tailwind`` . Conteúdo da Rocket é incrivel demais 🔥🔥🔥

[@2juniordbz]

Continua aí! Faz o responsivo!

[@paulinofonseca5326]

Eita, que TERMINAL. Fiquei apaixonado ❤❤. Podes dizer qual terminal você usa? Abraços, a partir de Angola

[@jonathandebrittosedrez2459]

Se chama wrap, disponível só para mac até então

[@egbertodeoliveira7524]

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!! 🎉🎉

[@Manoelps]

Não sei se conhece, mas este canal pode te ajudar: www.youtube.com/@devjunioralves 👍

[@klebersantos6147]

quero a pt2, show de bola!!

[@Paatykuaakie]

Não vejo a hora da continuação 😊❤

[@leonardo-leite-meira]

muito bom!!! seria legal ver ele resposivo sim

[@marlonmnz]

Saudades demais do UI Clone. ps: Esse DMX do Daily Mix me pegou viu mano. 🔥

[@Matheus-qv7yw]

muito bom, Diegão!

[@TheLukinha69]

Bora Continuar :)

[@Robert-Franco]

saudades ui clone voltaaaaa

[@jonatansouza6223]

Muito bom, faz o vídeo de como deixar responsivo.

[@leandrogeraldobatista9940]

Continua! muito bom

[@goalsproductions7755]

Faz responsivo!! Muito bom o vídeo

[@nicolasmoises2720]

ó o monstro dando aquela aula monstra numa sexta monstra. Tamo junto Diegãoooo Dale

[@MinhaHonrra]

Simplismente incrivel👏👏👏👏👏👏👏👏👏👏👏

[@Vulkanico]

O diego traz a proxima aula reponsividade por favor ! quero aprender mais !

[@kleberaugus]

Objetividade brutal, assim que eu gosto.

[@andrebarbosa-marca]

Poderia virar rotina fazer isso com tailwind... E não só isso, também aprofundar um pouco mais. Como criar um clone do twitter, e colocar login e autenticação etc... mas tudo bem básico.

[@pia7632]

por favor faça uma parte 2 : )

[@pierreboschetto15]

Já curti antes de assistir, deveria ser uma serie do RocketFlix

[@jacksonantonio8221]

Muito bom o video... Sim...faça a parte da responsividade

[@ZeR0tsx]

Faaaaala dev's ❤️🚀

[@brunogoncalvesferreira2490]

Diegão faz um video deixando responsivo, é tema dark é light 😄

[@victorzarzar2724]

Diego, tailwind a primeira vez que usei, achei estranho, agora já curto bastante, virou meu "queridinho" sou front react ;)

[@nosense1272]

Diego croma vermelho edição deluxe desbloqueada com Sucesso.

[@vitorhallmonteiro]

Queria ver como fica o responsivo com temas light e dark mais o uso de @apply. Parabéns pelo video!!!

[@catianonorbertoermelinda8745]

Tenta fazer o segundo vídeo sobre algumas funcionalidades do Spotify

[@iuritorres]

esse terminal ai tem pra windows n? que coisa linda

[@hatus]

Rodz do UI Clone!!! Quem quer que o quadro volte, curte ae!!!!