Como criar um relógio com HTML, CSS e JavaScript

No video

Como criar um relógio com HTML, CSS e JavaScript

Рет қаралды 13,444

Күн бұрын

Fala, pessoal!
Nesse vídeo vamos criar um relógio que mostra a hora real usando apenas HTML, CSS e JavaScript.
Projeto bem legal de se fazer pra praticar posicionamento de elementos com css e dá aquela revisada em JavaScript.
E ainda tem uns macetes do vscode, em!
Espero muito que gostem! :D
Já viu o nosso projeto Full Stack?
• Como criar uma API com...
Aprenda Docker
• Introdução ao Docker p...
#css #html #javascript

Пікірлер: 65

@ManualdoDev Жыл бұрын

Repositório do projeto no GitHub: github.com/manualdodev/clock

@LucasOliveira-un1hz Жыл бұрын

Cara, lembre-se que com esse conteudo vc ajuda a muita gente, inclusive a mim. Excelente. Continue

@ManualdoDev Жыл бұрын

Tamo junto, Lucas!

@mavick. Жыл бұрын

obrigada por mais um conteúdo maravilhoso! ✨️

@ManualdoDev Жыл бұрын

Eu que agradeço o apoio, Vick!

@tiagomh1264 Жыл бұрын

Excelente conteúdo meu bom. Esse relógio aí ficou muito massa.

@ManualdoDev Жыл бұрын

Tamo junto, Tiago!

@JoseCarlos-rm9nv 7 ай бұрын

Cara, sensacional esse projeto. Ajuda bastante a aprimorar a lógica de programação. Com certeza um dos melhores canais de programação que eu já vi

@TheCFALGAMES 7 ай бұрын

mano obg estou fazendo todos os seus projetos, e estou aprendendo mt, voce é 10

@guilhermearaujo6805 8 ай бұрын

Excelente didatica, muito obrigado!

@rafasantos23 Жыл бұрын

Não tem forma melhor de aprender a não ser com projetos como esse que parece ser simples mas da pra tirar bastante coisa, vlw cara, você é 10!!!!!!!

@hstecnologia Жыл бұрын

Mano esse canal deveria ter era mais de um Milhão de inscritos seus conteúdos nao tem nem como nao aprender, conteúdos TOP DEMAIS e sua Didática extraordinária!

@DININHOB Жыл бұрын

Obrigado, por passar adiante seu aprendizado. Estou aprendendo muito com você ❤

@JoaoVitor-og9dg Жыл бұрын

Cara, que vídeo extremamente INCRÍVEL!! Sua didática é ÓTIMA e o projeto ficou perfeito! Parabéns mano!!

@edvaldoarcanjo8110 10 ай бұрын

muito bom

@marinacappellano Жыл бұрын

Muito obrigada, seu canal me ajuda muito! Seus projetos para iniciantes são muito bons

@artursantana3107 Жыл бұрын

muito top e simples ! nota 1000(mil)!!

@leoperdone Жыл бұрын

Vlw pela aula !

@SalveTimao-ew4lz Жыл бұрын

consegui realizar o projeto, obrigado de vdd!!

@vicnogueira4525 Жыл бұрын

Vlw demais

@cognitivamkt Жыл бұрын

Seria top ter um curso completo de html CSS e JavaScript eu compraria na hora didática perfeita

@ManualdoDev Жыл бұрын

Vai sair, Bruno! Talvez até grátis...? rs

@sam_forte 7 ай бұрын

Verdade.

@JotaSet3 Жыл бұрын

fantástico

@fernandoferraridutra3421 Жыл бұрын

no vscode, dentro das configurações tem uma opção de quebra de linha, assim não vai ter que fica puxando sua janela cada vez mais.

@MrCaramos Жыл бұрын

Melhor canal!!!

@ManualdoDev Жыл бұрын

Tamo junto, manoo!

@andrios397 Жыл бұрын

insano

@crepper2106 Жыл бұрын

Adorei 😍 obg

@itsmatsouza Жыл бұрын

Top demais irmão, faz um projeto com React… estou aprendendo ele agora e ia ser muito bom ver você explicando um projeto!

@ManualdoDev Жыл бұрын

E aí, Mateus! Em breve vamos ter mais vídeos sobre React.. Enquanto isso, já temos um vídeo de um projetinho bem legal em React. Depois da uma conferida: kzfaq.info/get/bejne/hZyWjMpkkrHLqGQ.html

@itsmatsouza Жыл бұрын

@@ManualdoDev top de mais!!! voce deveria lancar um curso hahah

@itsmatsouza Жыл бұрын

@@ManualdoDev eu fiz o projeto do weather App no react, e queria te marcar no LinkedIn, como faço?

@Clips-Extraordinarios Жыл бұрын

muito bom, me ajudou muito

@jeffersonsantana7605 Жыл бұрын

Didática ótima, ganhou mais um inscrito... pergunta posso usar os projetos do seu canal para colocar no github estou começando

@ManualdoDev Жыл бұрын

Pode usar sim! Fique à vontade pra usar como quiser!

@RUMINANT_ 6 ай бұрын

☭engajamento somente o engajamento a criatividade é demais☭

@WellMelo Жыл бұрын

Estou estudando muito Javascript, seu código é sensacional, limpo, você traz muitas ideias e variações. Conteúdo TOP! Já pensou em fazer um curso sobre JS ?

@ManualdoDev Жыл бұрын

Esse curso vai sair em, Wellington!

@WellMelo Жыл бұрын

@@ManualdoDev show demais! Já faz uma lista de espera e vai divulgando, com certeza a galera se cadastra para aguardar o lançamento do curso. Eu serei o primeiro! haha TMJ

@deegas Жыл бұрын

Brabissimo

@ManualdoDev Жыл бұрын

Grande, Dee Rodrigo! Tamo junto!

@andre_arantes Жыл бұрын

Adoro seu conteúdo, você tem uma didática excelente. Projeto ficou muito bom, agora tenho uma dúvida: como poderia suavizar a animação dos ponteiros?

@thiagomonts Жыл бұрын

Parabéns pelo conteúdo! Você poderia disponibilizar o repositório do projeto? Tentei replicar aqui na minha máquina, mas os números ficaram um em cima do outro no centro do relógio e não sei como resolver, gostaria de compará-lo para tentar identificar onde errei. Agradeço desde já. Abraço!

@ManualdoDev Жыл бұрын

Nusss... Esqueci de colocar no GitHub! Valeu, Thiago. Vou por lá sim!

@ManualdoDev Жыл бұрын

Feito: github.com/manualdodev/clock

@breninho2286 Жыл бұрын

Qual sistema operacional você utiliza? Conteúdo maravilhoso cara! tenho aprendido bastante! Sucesso!!

@ManualdoDev Жыл бұрын

E aí, Breno! Uso o Zorin OS.

@breninho2286 Жыл бұрын

@@ManualdoDev Show!! 👏

@moisesjunior6312 10 ай бұрын

como q acessa style? ja é a segunda vez q eu me bato pra consguir acessar

@adrielesiqueira7640 Жыл бұрын

A cor da página não altera pra mim. Aconteceu com alguém?

@edicaovx1774 Жыл бұрын

meu CSS não funciona, ele aparece como "#" ... como resolvo?

@mariatereza5017 Жыл бұрын

Vídeo maravilhoso!! Pode dizer qual tema você está utilizando?

@TalDoJhef Жыл бұрын

Dracula

@mariatereza5017 Жыл бұрын

@@TalDoJhef obrigadaaa

@ursouza Жыл бұрын

Seria interessante tratar o alinhamento vertical para os números, porque o 6 ficou parecendo 9 no relógio. de resto esta tudo ótimo!

@leok9982 Жыл бұрын

adiciona uma span com o numero dentro de cada div , exemplo 1 e ai no css você rotaciona essa span no sentido contrário, assim: .number-1>span { position: absolute; transform: rotate(-30deg); } pro número 2 seria -60, depois -90 e assim sucessivamente.

@atyllakossatz1746 11 ай бұрын

@@leok9982 , Muito bom!! Estava procurando essa solução. Obrigado.

@gabriel.smaniotto Жыл бұрын

Boa tarde, na sua visão esse projeto entra como portfolio no github?

@ManualdoDev Жыл бұрын

Na minha opinião, seu GitHub é pra ter tudo que você tem feito.. seja um super projeto, ou um projeto simples como esse. Isso mostra que você tem estudado, praticado e está ativo e que consegue aplicar seu conhecimento em vários casos diferentes.

@vitu3566 Жыл бұрын

pode me tirar uma duvida? to fazendo o curso de html e css do gustavo guanabara, e ele disse que nao ia trabalhar muito com ( div ) pq nao é semantico, voce pode me explicar melhor sobre isso? e se interfere ou nao, se posso usar quando tiver um emprego, sla ksksksk Obrigado!

@ManualdoDev Жыл бұрын

Boa pergunta, Vitu! Acho que vale um vídeo pra falar mais sobre isso. Mas enquanto o vídeo não sai... não se preocupe com isso. Usar div não é errado. Tem certas situações que é melhor usar outras tags porque elas podem dar um sentido aquele trecho de código.. Por exemplo: Eu posso criar uma barra de navegação apenas usando divs... Ou títulos de texto usando spans.. Mas acontece que a gente tem tags melhores pra isso.. Como a tag nav e a tag h1. Isso deixa mais claro para mecanismos de buscas e leitores de tela, do que se trata aquele pedaço do seu código. Vou trazer um vídeo pra gente falar mais sobre HTML semântico.. Abraço!

@vitu3566 Жыл бұрын

@@ManualdoDev muito obrigado mano, estou começando a estudar por agora e to vendo seus videos pra dar uma implementada!

@michaelhenrique3310 5 ай бұрын

Deslike, você não sabe explicar. Coloca 1 método, depois apaga e mostra outros 5 quebrando totalmente a linha de raciocínio e ordem cronológica do ensino. Isso confunde as pessoas, deixe para mostrar métodos diferentes no final do vídeo, quando já estiver concluído o projeto e utiliza os mais "otimizados" no tutorial de fato.