Quer saber mais sobre o nosso Curso Completo de Front End? Clique no link abaixo para garantir sua vaga na próxima turma:
lp.hashtagtrei...
PARA BAIXAR O MINICURSO DE HTML E CSS:
pages.hashtagt...
PARA BAIXAR O MINICURSO GRATUITO DE JAVASCRIPT:
pages.hashtagt...
-----------------------------------------------------------------------
📁 Arquivos Utilizados no Vídeo:
pages.hashtagt...
🖥️ Se você é zerado em HTML, CSS e JavaScript, comece por aqui:
kzfaq.info...
-----------------------------------------------------------------------
Caso prefira o vídeo em formato de texto:
www.hashtagtre...
-----------------------------------------------------------------------
PARA CONTRATAR A HASHTAG PARA SUA EMPRESA:
www.hashtagtre...
-----------------------------------------------------------------------
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
• Curso Básico de Html e...
► Como Baixar e Configurar o VSCode para HTML e CSS
• Instalação do VS Code ...
-----------------------------------------------------------------------
Hashtag Programação
► Inscreva-se em nosso canal: bit.ly/3c0LJQi
► Ative as notificações (clica no sininho)!
► Curta o nosso vídeo!
-----------------------------------------------------------------------
Redes Sociais
► Blog: bit.ly/2MRUZs0
► KZfaq: bit.ly/3c0LJQi
► Instagram: bit.ly/3o6dw42
► Facebook: 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