HTML & CSS - Como sair do ZERO no React JS em APENAS UMA AULA

Quer saber mais sobre o nosso Curso Completo de Front End? Clique no link abaixo para garantir sua vaga na próxima turma: https://lp.hashtagtreinamentos.com/front-end/espera/impressionador?origemurl=hashtag_yt_org_listaesperahc_5XzZI5PtCi8 PARA BAIXAR O MINICURSO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_5XzZI5PtCi8 PARA BAIXAR O MINICURSO GRATUITO DE JAVASCRIPT: https://pages.hashtagtreinamentos.com/inscricao-curso-basico-javascript?origemurl=hashtag_yt_org_minijs_5XzZI5PtCi8 ----------------------------------------------------------------------- 📁 Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1L2EX0MlrflUk3F6U0DVf2p9NYi7P1WhX?origemurl=hashtag_yt_org_planilhahc_5XzZI5PtCi8 🖥️ Se você é zerado em HTML, CSS e JavaScript, comece por aqui: https://youtube.com/live/k6DSb61nCFk ----------------------------------------------------------------------- Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/react-js-html-e-css ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt ----------------------------------------------------------------------- Fala Impressionadores! Quer aprender como sair do zero no React JS com um projeto Front End completo? Hoje nós vamos construir um aplicativo para Apple Watch onde vamos poder selecionar entre alguns exercícios e ao selecionar vamos ter um cronômetro totalmente funcional com botões para que você possa cronometrar o tempo de cada exercício. Esse é um projeto bem completo então vamos criar toda a parte visual com HTML, CSS e com o Node JS (usando o React e Vite). Depois vamos partir para as funções do nosso aplicativo. O que envolve tanto o horário, pois vamos ter o horário atual quanto o cronômetro totalmente funcional. Como é uma aula bem completa, nós vamos ver vários conceitos durante a aula, então você vai aprender muito! Vamos ver algumas coisas como: função de seta (arrow function), variáveis, flexbox, hooks (usestate e useeffect), função de clique no botão em HTML, entre outros conceitos que vou explicar durante a aula. É um projeto muito maneiro que você já pode colocar no seu portfólio de projetos e por mais que pareça algo simples, você vai notar que vamos utilizar HTML, CSS e JavaScript além de fazer todos os ajustes passo a passo. Inclusive vou te mostrar alguns erros que acontecem durante um projeto como esse e como você pode ir ajustando esses problemas! ----------------------------------------------------------------------- Vídeos Recomendados ► Curso Básico de HTML e CSS https://www.youtube.com/watch?v=vtX9BzESWnQ&list=PLpdAy0tYrnKwmcenKePWr9TQ9deRanAr7&pp=iAQB ► Como Baixar e Configurar o VSCode para HTML e CSS https://youtu.be/WyXcfCPlIlk ----------------------------------------------------------------------- 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 01:50 Qual o Projeto Vamos Construir? 03:21 Instalação do VS Code + Extensões 06:35 Configurações do VS Code 08:38 O que é o React? 10:45 O que é Vite? 11:40 Node JS (Instalação do React e Vite) 12:57 Como iniciar um projeto no React? 15:54 Instalação de bibliotecas e ferramentas 20:30 Entendendo o código da página 23:28 Limpando algumas informações do código 27:27 Ferramentas do programador (navegador) 30:10 Componentes dentro do React 30:42 Arquivos iniciais 32:24 Começando a construção do aplicativo (1º exercício) 01:01:55 Variáveis no JavaScript 01:10:06 React Arrow Function Component (ícones) 01:16:55 Usando variáveis para os ícones 01:18:52 Lista de dicionários 01:21:44 Map no JavaScript (estrutura de repetição) 01:28:30 Arrow Function 01:31:06 Flexbox (espaçamento entre elementos) 01:37:30 Inserindo a tela para os exercícios 01:41:28 Ajustes da tela (+ barra de rolagem) 01:50:55 Propriedade de posicionamento 01:54:34 Tela do cronômetro (ajustes, visualização e ícones) 02:12:12 Ação ao clicar no botão (Hook UseState) 02:23:55 Funções de clique dos botões 02:27:42 Criação do relógio (Hook UseEffect) 02:43:55 Criação do cronômetro (timer) 03:09:17 Deploy do aplicativo (Netlify) 03:12:56 Conclusão #htmlecss #htmlcss #html #css #hashtagprogramacao