Tela de Login do League of Legends com HTML, CSS e JavaScript | CSS Tutorial

Nesse vídeo nós iremos recriar a tela de login do jogo League of Legends.

Veremos conteúdos como seletores avançados css, pseudo-classes, pseudo-elementos, funções e eventos no JavaScript e muito mais!

Espero que gostem!

Veja também:

Como criar um jogo com JavaScript:

Como salvar os dados de um form em uma planilha do Google:

#html #css #javascript #leagueoflegends #lol #teladelogin #jogo #game

[ManualdoDev]

Repositório com todos os arquivos do projeto:


Veja o resultado final da página aqui:



Veja também:

Como criar um jogo com JavaScript:

Como salvar os dados de um form em uma planilha do Google:

[marlonjesus]

Ótima aula, mas quero compartilhar aos alunos que assim que você implementa a tag <svg> no HTML ele pode não aparecer, porém isso é normal pois antes do CSS não definimos o tamanho do SVG, por isso creio que algumas pessoas tenham percebido isso. O SVG só ganham forma ao definirmos width e height. Isso pode ser definido tanto no próprio SVG quanto no CSS que foi como o professor fez.
Espero ter sido útil !! Vlw pessoal <3

[raeldosbeats]

Vocé é foda cara! Em questão de minutos to aprendendo o que eu levava bastante tempo pra aprender em outros vídeos. Sua forma de explicar com clareza é sensacional! Já me inscrevi. TMJ

[ultimomoicano]

Tô gostando dessa didática de reprogramar baseado em modelos já existentes, a gente já fica sabendo como vai ser o elemento final e ficamos com vontade de fazer o mesmo.. Estou aprendendo JS, CSS, HTML na prática com esses vídeos... Continue trazendo mais modelos

[faelreuss]

Conheci o canal exatamente por essa aula e já estou muito satisfeito com o aprendizado adquirido até o último segundo deste vídeo. Respondeu inúmeras dúvidas que eu possuía e agora consigo construir um formulário maior e melhor visualmente. Continue com este belíssimo trabalho! Deixei o like e estou inscrito. Abraços!

[ualizu]

Mano o youtube me remomendou o seu canal, e seu conteúdo é tá me ajudando pra caramba. Tu é brabo mano parabéns 👏🏽👏🏽👏🏽

[Renove]

E eu achando que não ficaria os 55min, quando terminou eu fiquei procurando mais.. muito bom o vídeo mano, gostei de mais da sua didática, ganhou mais um escrito e segura esse like ai.

[augustocaiodasilva]

Muito show e fera, eu amo lol e estou começando a amar programação essa tela mudei a imagem pena que não consegui fazer o javascript interpretar como deveria mas é pratica, irei revisar para ver certinho o que houve. muito obrigada pela aula professor!!

[deegas]

Fiz todo o conteúdo e aprendi o clamp que pra mim é novidade. O checkbox com o border-width tbm é sensacional! Valeu mano!

[Eskotavi]

nossa vei eu achei no começo que não ia aprender nada, mas passou 9:08 e eu ja aprendi de css muito mais coisas que achei nos outros videos pela internet, vou acompanhar o canal ve se aprendo mais...
VLW CHEFIA!

[martinesz]

Irmão, n tem palavras pra descrever a perfeição desse vídeos. Se serve de algo, meus parabéns vc conseguiu me prender afe o fim do vídeo, e ainda ganhou um fã/inscrito.

[felipepalermo]

Cara, estou tendo que estudar desenvolvimento web por causa da faculdade, e vendo essas coisas legais sendo feitas da um animo a mais pra aprender, continua com essa parada ai mano 😁😁

[alexyn]

Uma sugestão!!!
Sério interessante vc deixa um link com as imagens q vc usou nos vídeos ai q glr q ta tentando fazer em casa pode aproveitar ela tbm!!!👍

[WellMelo]

Estou aprendendo Javascriopt, mas [e impossível não pegar várias dicas sobre HTML e CSS. Parabéns pelo conteúdo! Muito bom!! A forma como você se preocupa em explicar os detalhes, ajuda demais! Gratidão!

[jmarlopes.]

CARALHO O QUE VC USOU NO HANDLECHANGE MUDOU MINHA VIDA. sempre achei usar o Variavel[i] uma gambiarra, queria algo mais formal. bgd de vdd

[lixoeletronico]

Conheci seu canal ainda hoje, não possui muitos vídeos mas os que vi são conteúdos interessantíssimos e também muito bem explicados. Adoraria ver seu canal crescer.

[bruna]

cara, você é dms, nossa. fiz a minha versão com a Scarlet Witch, eu amei. 🥺 por mais conteúdos assim, sua didática é ótima, estou conseguindo destravar meu JS com sua explicação. 🖤

[NERDboy]

não tive, como não me inscrever nesse conteúdo de recriações, ainda mais, do meu lolzionho....
(edite) fui dar uma conferida no conteúdo e fiquei ainda mais, extasiado de um conteúdo melhor que o outros.. please continue com esse conteúdos assim... pois a gente mal acha na net..
belo vídeo, e ótimo canal....

[rafa-mkyo]

Legal seu conceito de usar coisas que ja existem pra ensinar, realmente chama atenção e incentiva as pessoas, estou repassando coisas que ja sei contigo e é legal ver um a explicação diferente.

[moisesalvesdacunha]

Didática, conteúdo, inteligência, cara que canal surreal. Foi um vídeo de quase uma hora que pra mim pareceram 10 minutos não cansa a gente ao assistir, meus parabéns.