HTML & CSS - Projeto Completo Réplica do Airbnb com MERN (Mongo, Express, React e Node) - Aula 1

Quer saber mais sobre o nosso Curso Completo de Full Stack? Clique no link abaixo para garantir sua vaga na próxima turma: https://lp.hashtagtreinamentos.com/full-stack/espera/impressionador?fonte=org-yt_A_56VUKWKqQ&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=replica-aribnb-24-03&conversion=lesfs-mar-25 PARA ACESSAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-html-css-landingpage?origemurl=hashtag_yt_org_minihtmlcss_landingpage_A_56VUKWKqQ&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=replica-aribnb-24-03&conversion=lesfs-mar-25 ----------------------------------------------------------------------- 🗃️ GitHub do Projeto https://github.com/fullstackjornada/hashbnb-youtube 📁 Arquivos Utilizados no Vídeo: https://dlp.hashtagtreinamentos.com/full-stack/arquivo/download?id=1z5Q7CqsFYDmvWHAOjFOfjsoAxCFWT_Q3&origemurl=hashtag_yt_org_arquivofs_A_56VUKWKqQ&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=replica-aribnb-24-03&conversion=lesfs-mar-25 💻 Recomendação de vídeo: Instalação do VS Code e Node JS https://youtu.be/fzgL5YIL77Q Aprenda a usar o Tailwind CSS https://youtu.be/7mt89PPWhaY Tudo que você precisa saber de JavaScript antes de aprender React https://youtu.be/pBcGYStGLUo Como sair do ZERO no React em Apenas UMA AULA https://youtu.be/6hiqVVCsA_I Curso Básico de Full Stack (HTML, CSS e JavaScript) https://www.youtube.com/playlist?list=PLpdAy0tYrnKzcqd9knClODBDkghwGpzOJ ----------------------------------------------------------------------- Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/curso-full-stack ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt&origemurl=hashtag_yt_org_incompany_A_56VUKWKqQ&utm_source=youtube-org&utm_medium=yt-descricao&utm_campaign=programacao&utm_content=replica-aribnb-24-03&conversion=lesfs-mar-25 ----------------------------------------------------------------------- Hoje damos início ao projeto HashBNB, uma réplica completa do Airbnb utilizando MERN Stack (MongoDB, Express, React e Node.js). Nessa aula, vamos configurar o ambiente no VS Code, criar nosso projeto com React e Vite, e estilizar os primeiros componentes com Tailwind CSS. Além disso, você vai entender como o React funciona, a importância dos componentes reutilizáveis e como organizar seu código de forma profissional. Finalizaremos construindo o cabeçalho completo do projeto, incluindo ícones, barra de busca interativa e a seção de perfil do usuário. Se você quer dominar o desenvolvimento full stack e criar aplicações modernas e impressionantes do zero, vem comigo nessa jornada com MERN! ----------------------------------------------------------------------- Hashtag Programação ► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi ► Ative as notificações (clica no sininho)! ► Curta o nosso vídeo! ----------------------------------------------------------------------- Redes Sociais ► Blog: https://bit.ly/2MRUZs0 ► YouTube: http://bit.ly/3c0LJQi ► Instagram: https://bit.ly/3o6dw42 ► Facebook: http://bit.ly/3qGtaF2 Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos! ----------------------------------------------------------------------- Conteúdo da Aula 00:00 Introdução ao Projeto HashBNB 04:38 Configurando o Ambiente no VS Code 06:50 O que é o MERN Stack? 07:07 Criando o Projeto React com Vite 10:58 Servidor Local e Deploy do Projeto 12:16 Limpando o Código: Removendo Arquivos Desnecessários 14:32 Instalando e Configurando o Tailwind CSS 18:30 Como Usar Classes do Tailwind CSS 21:32 Configurando a Extensão Tailwind CSS IntelliSense 22:25 Estilizando Elementos com Tailwind 23:05 Organizando Classes com Prettier 25:27 O que é o React e Como Ele Funciona? 26:04 O que são componentes em React? 27:14 Entendendo a Lógica por Trás do React 30:15 Criando o Primeiro Componente React 32:34 Importando e Utilizando Componentes 33:40 Instalando React Developer Tools no Chrome 34:24 Criando o Cabeçalho (Header) do Projeto 42:10 Estilizando o Cabeçalho com Tailwind CSS 44:44 Utilizando Ícones com Heroicons 45:23 Ajustando a Barra de Pesquisa 50:46 Criando a Seção de Perfil no Cabeçalho 53:32 Estilizando a Cor do Texto 54:06 Conclusão e Próximos Passos #fullstack #htmlecss #html #css #javascript #hashtagprogramacao