Desenvolvendo uma landing Page em NextJs c/ Tailwind CSS | Codeboost

preview_player
Показать описание
Eai! Bora desenvolver uma landing page utilizando nextJs c/ TailwindCSS ?

Neste video eu mostro como funciona este framework que é odiado por muitos e amado por outros! HAHA

Pega a café e bora comigo!

Quem conhecer sobre front-end e codificar paginas sem dificuldade com uma metodologia simples e sem enrolação? Acesse os links abaixo e conheça mais.

Рекомендации по теме
Комментарии
Автор

Não se preocupe com o tamanho da aula, quando o professor tem didática (o seu caso), a aula pode ter 5 horas que mesmo assim vai parecer 5 minutos. Obrigado pelo conteúdo excelente e muito explicativo.

rafacapoci
Автор

Sobre o botão do header, eu adicionaria o after pelo tailwind mesmo, talvez algo nesse sentido:

relative after:content[''] after:absolute after:left-[100%] after:w-[100vw] after:h-full after:bg-primary-blue

GustavoLima-djkv
Автор

to começando a acostumar e aprender tailwind agora, realmente é ótimo, muito bom video, obrigado, por favor continue postando haha!

peter
Автор

Cara. primeiramente: Deus te abençoe e te ilumine sempre. Meu muito obrigado pelo video. estava muito perdido no uso do tailwind e no framework do next. agora sim entendi. muito obrigado mesmo. faça mais vídeos desse. já ganhou mais um inscrito.

headendleandrof
Автор

Show de bola garoto! O melhor e mais completo que vi até agora.

ruiserafim
Автор

Obrigado pelo vídeo. Sobre o botão azul, apenas retirei da div atual e deixei dentro da div header. Assim, ele já foi puxado(ou empurrado) pro fundo. Daí tirei o espaço que havia colocado depois do input de Buscar pra ficar melhor visualmente. Espero ter ajudado.

RafaelSilvaDev
Автор

Sobre o botão azul do Header, fiz de uma forma (que não sei se é a mais correta) onde na tag header, deixei o "w-full" e dentro dessa tag, criei duas divs:
uma div com o w-[80%] onde fica o logo, o menu e a busca com a cor laranja e o h-full
outra div com o w-[20%] onde fica o user icon e o botão de acessar a conta com a cor azul e o h-full

dessa forma achei menos trabalhoso e um pouco mais organizado

eduardodantas
Автор

Nossa ajudou demais.. trabalho com design e front desde 2002 kkkk tava apanhando pra aceitar o TailwindCSS viu.. tmb tive péssima experiencia com projeto que veio malfeito Next com styledComponents, uso bastante Hugo e Nuxt. Mas com esse video seu deu um salto quantico aqui pra resolver varias duvidas. Obrigado.

toledox
Автор

Otimo video man, gostei muito de conhecer o Tailwind, me abriu novos horizontes.

GalindoPtBr
Автор

Eu também era dos que odiavam o Tailwind. Até perceber que a razão pela qual eu odiava não fazia o menor sentido. Eu prezo por um código limpo, não repetitivo... e na minha cabeça ao criar um estilo de botão eu teria que ficar replicando as classes sempre que fosse usar. Isso não faz sentido, pois quando trabalhamos com React o correto é a componentização. Logo as classes de um botão jamais seriam repetidas, pois criaríamos um botão reutilizável. Depois que percebi isso minha opinião sobre Tailwind mudou completamente.

GustavoLima-djkv
Автор

Uma sugestão sobre o botão azul, você poderia ter usado o :after e fazer o posicionamento absoluto, sem ter que criar uma div, e sobre o alinhamento da imagem da Mulher, você poderia ter colocado uma classe Flex e um space-between que ele iria fazer o espaçamento. O vídeo está sensacional

lucasvieira
Автор

19:28 não sabia dessa, vai facilitar muito agora

deathman_
Автор

Hahahaha, to assistindo o começo e eu também era assim. não aguentava nem ouvir falar de Tailwind. Depois que comecei a utilizar, não quero saber de outra coisa. Apesar de odiar um canavial de classes no meu componente, eu amo desenvolver com tailwind

antonioteixeira
Автор

Boa Will... 🚀🚀 "Tailwind não é o Geralt mas tem suas bruxarias " 🤣 🔥

YannSilvaWeb
Автор

Excelente didática! Obrigado pelo vídeo!

raffaelrameh
Автор

muito bom o video, no aguardo de uma parte 2

samuelfischerklug
Автор

bem legal, sei que foi mais demonstrativo
algumas coisas eu faria diferente

GMsssss
Автор

Dahora mano eu fiz igualzinho a você já vai ficar no meu portifólio, mas, eu gostaria que você fizesse outro vídeo mostrando como se faz a responsividade usando Tailwind, pq usando CSS puro fica facinho de fazer a responsividade com Tailwind me parece bem mais trabalhoso

dennispaixao
Автор

que terminal massa, depois se puder fazer um video sobre qual é e qual Sistema operacional vc está usando.. vai matar eu de curiosidade !!!

Gabriel-tptj
Автор

Mano, você tem o Repositório deste projeto no Github???

tiagolopes-setentrionals