Summary
Keywords
Full Transcript
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_k6DSb61nCFk PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS [Réplica do Google]: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_k6DSb61nCFk ----------------------------------------------------------------------- 📁 Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1S-G14OBesUIHpxwIaEDdYr6qdAtchPrN?origemurl=hashtag_yt_org_planilhahc_k6DSb61nCFk 📁 Link do Deploy do Projeto https://imaginative-rolypoly-96037a.netlify.app/ 🖥️ Instalação do VS Code para Programação em HTML e CSS (Visual Studio Code) https://youtu.be/WyXcfCPlIlk 🖥️ Aula Complementar de CSS do Projeto Front End do Zero https://youtu.be/SFL40qvL2G8 ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt ----------------------------------------------------------------------- Fala Impressionadores! Hoje temos uma aula completa para que você consiga criar o seu Primeiro Projeto Front End do Zero com HTML, CSS e JavaScript. Como vamos utilizar essas 3 linguagens eu vou explicar o que é HTML, o que é CSS e o que é JavaScript. Além disso vou dar uma breve introdução desses 3 tópicos para que você entenda melhor como cada uma dessas linguagens funciona. Então vamos ver a introdução ao CSS, introdução ao HTML e introdução ao JavaScript. Isso é necessário, pois como estamos construindo um projeto completo de front end, vamos precisar do HTML e CSS para construir e estilizar a página e o JavaScript para criar algumas ferramentas. Nesse caso, vamos utilizar o JavaScript para criar um cronômetro dentro do nosso projeto. Esse é um projeto bem completo onde vamos construir um aplicativo de Apple Watch que é um aplicativo de exercícios. Vou mostrar o passo a passo da construção desse aplicativo do zero, então você vai aprender muita coisa nessa aula, e mesmo que não saiba nada você vai conseguir criar o seu aplicativo e até fazer suas próprias modificações. ----------------------------------------------------------------------- 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 O que é HTML, CSS e JavaScript? 09:05 Introdução ao HTML 18:18 Ferramentas do Programador no Navegador 22:26 Introdução ao CSS 31:55 HTML da caixa de exercício 38:48 Seletor Universal no CSS 41:52 CSS da caixa de exercício 57:05 Box Model no CSS 01:04:38 Construindo o HTML e CSS da caixa de Exercícios 01:17:16 Construindo HTML e CSS do Cabeçalho 01:18:30 Construindo o HTML e CSS da Tela 01:21:29 Construindo o Cronômetro 01:25:43 Introdução ao JavaScript 01:49:51 Adicionando o evento de clique (addEventListener) nos Botões 01:59:46 forEach no JavaScript para percorrer elementos 02:09:18 Trabalhando com Datas no JavaScript Date() 02:12:43 Criando a função que atualiza o horário 02:17:50 setInterval() no JavaScript 02:25:13 Arrow Functions no JavaScript (Função de Seta) 02:27:54 Criando a função para contabilizar o timer 02:35:08 clearInterval() para cancelar o setInterval() 02:40:38 Transformando milésimos em minutos, segundos e centésimos 02:48:32 Criando a função que calcula os minutos, segundos e centésimos 02:56:01 Deploy do projeto usando Netlify ----------------------------------------------------------------------- #htmlecss #htmlcss #html #css #javascript #hashtagprogramacao
