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

Подписаться 57 тыс.

Просмотров 13 тыс.

50% 1

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

Опубликовано:

24 янв 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 64

@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!

@JoseCarlos-rm9nv 4 месяца назад

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 4 месяца назад

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

@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 11 месяцев назад

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!

@artursantana3107 Год назад

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

@leoperdone Год назад

Vlw pela aula !

@guilhermearaujo6805 6 месяцев назад

Excelente didatica, muito obrigado!

@marinacappellano Год назад

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

@mavick. Год назад

obrigada por mais um conteúdo maravilhoso! ✨️

@ManualdoDev Год назад

Eu que agradeço o apoio, Vick!

@JoaoVitor-og9dg Год назад

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

@DININHOB Год назад

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

@SalveTimao-ew4lz 10 месяцев назад

consegui realizar o projeto, obrigado de vdd!!

@crepper2106 Год назад

Adorei 😍 obg

@tiagomh1264 Год назад

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

@ManualdoDev Год назад

Tamo junto, Tiago!

@edvaldoarcanjo8110 8 месяцев назад

muito bom

@Clips-Extraordinarios Год назад

muito bom, me ajudou muito

@vicnogueira4525 Год назад

Vlw demais

@JotaSet3 Год назад

fantástico

@MrCaramos Год назад

Melhor canal!!!

@ManualdoDev Год назад

Tamo junto, manoo!

@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?

@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.

@deegas Год назад

Brabissimo

@ManualdoDev Год назад

Grande, Dee Rodrigo! Tamo junto!

@andrios397 Год назад

insano

@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

@jeffersonsantana7605 10 месяцев назад

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

@ManualdoDev 10 месяцев назад

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

@RUMINANT_ 4 месяца назад

☭engajamento somente o engajamento a criatividade é demais☭

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-O6fYg3-Kgx0.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?

@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 5 месяцев назад

Verdade.

@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 8 месяцев назад

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

@mariatereza5017 Год назад

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

@TalDoJhef Год назад

Dracula

@mariatereza5017 Год назад

@@TalDoJhef obrigadaaa

@adrielesiqueira7640 Год назад

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

@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

@edicaovx1774 10 месяцев назад

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

@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!

@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 9 месяцев назад

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

@michaelhenrique3310 3 месяца назад

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.