Como criar uma Pokedex com HTML, CSS e JavaScript | Projeto Completo

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

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

50% 1

Duvido você não aprender nada novo nesse vídeo!
Nesse vídeo nós vamos criar um Pokédex utilizando apenas HTML, CSS e JavaScript.
Veremos bastante CSS, técnicas legais que você pode usar nos seus próprios projetos e muito mais!
Para conseguir os dados dos Pokémons, vamos usar a PokéAPI:
Documentação da API: pokeapi.co/
Gerador de Favicons:
www.websitepla...
Repositório no Github:
github.com/man...
Veja como o projeto ficou:
manualdodev.gi...
#html #css #javascript #programação #desenvolvimento_web #pokedex #pokemon #javascript_projeto #javascript_iniciante

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

7 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@ManualdoDev 2 года назад

Inscreva-se no canal e deixe seu like para ajudar! :) Repositório no Github: github.com/manualdodev/pokedex Veja como o projeto ficou: manualdodev.github.io/pokedex/

@gustavorafael974 2 года назад

Cara voce tem algum curso ?

@ipcmeanthony1905 2 года назад

Top demais

@gabrielnobretapia7795 2 года назад

Alguém pode me ajudar? Quando carrega a imagem do pokemon o link fica bugado, esta com dois https ai a imagem nao carrega. Todas as imagens estao assim

@netto95 2 года назад

@@gabrielnobretapia7795 como está seu código na função que renderiza o Pokemon? eu tinha errado o nome da variavel e estava dando undefined, não é o mesmo erro que o seu mas pode ser algo que vc tenha deixado passar despercebido!

@gabrielnobretapia7795 2 года назад

@@netto95 Acho que era um erro da API, ontem não estava funcionando mas agr voltou. Mesmo assim obg.

@gilbertodiaspereira836 2 года назад

Sem brincadeira, eu tenho uns 5 cursos pago, e todos muito caros por sinal, você com um projetinho desses me mostrou coisas que eu vi em 20 aulas para ainda sim continuar confuso, lança um curso de javascript e de node eu vou ser o primeiro cliente a adquirir, você é fera demais.

@matheusbrito1473 Год назад

É mais questão de afinidade com a forma de lecionar … tenta pegar umas bases por aqui e depois volta lá nos seus cursos q vc vai conseguir absorver mais conhecimento do que a primeira vez

@diegotomasi1497 Год назад

Tu paga curso sendo que tem de graça na internet

@JerkFighter. 9 месяцев назад

serio? fala o nome de um ai@@diegotomasi1497

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

Vi anúncios na internet que diziam que os cursos de RU-vid são furada... Furada é pagar um curso sem aprender, né não?

@VideosViraisVirais-dc7nx Месяц назад

@@matheusbrito1473como assim afinidade?

@lincenarra Год назад

O que eu demorei 2 anos pra entender, o cara conseguiu me explicar em 59minutos. Mano nunca vi uma explicação tão boa sobre response API igual a sua! Parabéns os juninhos agradecem!

@liezyzzz 2 года назад

Que didática cara, esse foi meu primeiro projeto com JavaScript, CSS E HTML e meu primeiro contato com essas linguagens e eu gostei pacass enfim, continue com esses projetos e espero que esse canal cresça muito abraço!

@ManualdoDev 2 года назад

Muito obrigado pelo apoio, amigo. Abraço!

@fevisales Год назад

Eu fico fascinado quando me deparo com um tutorial que é mais explicativo do que dois semestres em universidade. Parabéns!

@snowflake6768 Год назад

Projeto incrível! Fiz minha própria versão aqui. Eu implementei algumas funções a mais, como: recuperar os tipos do pokémon e a imagem da sua versão shiny. Deu mto trabalho já que sou iniciante com JS, mas consegui fazer.

@rapnaestrada5697 19 дней назад

Pode fazer um vídeo mostrando suas modificações?

@vitechdev Год назад

A quantidade de conhecimento em um video de 1hora é maior do que muito curso com duração de 1 ano!! Parabéns pelo conteudo e didatica!

@dhiasz2692 2 года назад

Consegui entender tudo sem nunca ter programado. Video maravilhoso.

@sysrafael6289 2 года назад

Mais outro projeto muito bem explicado! Melhor canal do Br 🚀🚀

@ManualdoDev 2 года назад

Tamo junto, meu amigo! Valeu demais!!

@TheChosen0791 7 месяцев назад

Achei que era exagero da galera, mas realmente eu aprendi mais em um projeto de pokédex do que em vários cursos por aí que enrolam muito, finalmente eu entendi o async await, fetch... Tua didática é muito boa mano, obrigado por este vídeo!

@vinybfm Год назад

Mano, vc merece um lugar especial no céu, continue assim mano, parabéns

@redsn5318 2 года назад

Primeira vez que realmente entendi async await. Sempre usei, mas nunca me explicaram o que realmente significava uma promisse. E aula incrível de CSS obrigado !!

@roguerodrigo 2 года назад

exatamente isso, amigo! acabei de comentar isso ali em cima kkkkk agora vamos usar isso com propriedade \o/

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

Caramba cara, que projeto foda!! Digo o mesmo que o amigo ali. Tenho tantos cursos e só nesse vídeo eu aprendi tanta coisa que eu não sabia de HTML E CSS. De JavaScript então nem se fala. Conteúdo muito bom!!

@kamila_arrah 2 года назад

Ótimo! Pronto, já achei qual vai ser meu projeto da minha fase de vida: “eu , eu mesmo e a programação…de novo!” e vai ser essa bendita Pokédex

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

Estou fazendo um Bootcamp e fiquei bem confuso na parte da API, o professor deu voltas e mais voltas e jogou um monte de código na tela, mas a explicação não foi tão boa. São umas 20 aulas de 10/20min e eu não estava entendendo nada, mas você explicou tudo em 1 hora, isso que eu passei a parte do HTML e CSS então o tempo reduz muito. Ta de parabéns pela contribuição. Mais um inscrito!

@DevFFontes Год назад

Tem pessoa que tem o dom pra passar o conhecimento , muito bom , eles vão fazendo e explicando oque eh e oque faz cada propriedade , para os iniciantes são fundamentais

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

com esse projeto aprendi muito e tirei várias dúvidas sobre o javascript , incrível.

@mizuki.channn 5 месяцев назад

Sem dúvida um dos projetos que eu mais gostei de fazer, parabéns pela explicação impecável, ganhou mais uma inscrita!!!!

@ALLGAYER27 5 месяцев назад

Estou iniciando na programação e esse projeto me ensinou muita coisa que não vi em vários cursos. Conteúdo foda, obrigado pelo ensinamento

@rolfnog7069 Год назад

Cara, sua didática é maravilhosa, muito boa mesmo. Aprendi pra caramba hoje.. Posso ir jogar em paz, sabendo que aumentei meu conhecimento para caramba! Assistirei muito mais!

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

Acabei de finalizar, to chocada, super didático, muito bom, recomendo!!!

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

se tivesse um bota de dar um milhao de likes ja dava, ta louco manos, que explicação boa

@roguerodrigo 2 года назад

mano... que video TOP é esse???? aprendi tanta coisa a mais do que "somente" fazer uma pokedex!! Em alguns tutoriais, é feito funções assíncrona, passam o fetch, await e async, mas não deixam claro o motivo de colocar assim, mas tua explicação foi maestral sobre isso! muito obrigado mesmo...

@lucascesar9336 Год назад

Aula perfeita, transformei esses 59 min em 10 horas pausei o vídeo milhões de vezes e fui entendendo código por código. a didática e a explicação sensacional. aproveite que já estava no ritmo e estendi o projeto : adicionei um button que deixa o pokemon shiny (o botao usei uma animação em css para deixar com um fundo animado rgb brilhando para dar um melhor destaque) e pretendo corrigir o bug que depois do pokemon 650 nao tem mais animação;

@brunim973 Год назад

Fiz a mesma coisa com o shiny.

@lucassamuelnied6656 Год назад

Consegue passar o codigo e como fez amigo!

@score_ 2 года назад

Seria bacana um vídeo "refatorando" esse código, mas agora usando React 😄 Excelente vídeo, abraços.

@robertsilvagomes5739 2 года назад

Você acabou de me dar uma ideia mt boa skksksks

@robertsilvagomes5739 2 года назад

em React native então, vai ficar show!!!!

@lucascampos4237 2 года назад

mano em react da pra deixar isso ai em outro nível, esse canal é mto bom pqp

@imandrewslk7043 2 года назад

@José Denner vc ta fznd mano? to precisando de ajuda nisso urgente

@kaiqueandrade1109 Год назад

o dom de ensinar é pra poucos a sua didatica é perfeita pf continue com o otimo trabalho e obrg por ajudar tanta gente q assim como eu precisa!!

@FranklynRoberto 2 года назад

Meu portfolio esta um máximo com seus projetos! Continue assim parabéns!

@ManualdoDev 2 года назад

Aí sim, Franklyn! Show demais!

@fillipealbuquerque7001 2 года назад

Oiii poso ver seu github??

@maknim27 2 года назад

Cara, excelente, eu queria fazer uma pokedex justamente assim e tem muitos comandos que ainda não aprendi. Fiz e deu certo, ficou ótimo. Agora trabalhar pra incrementar, quero deixar ela o mais parecida com o anime possível Muito obrigado e vou acompanhar sempre os projetos que está me ajudando muito no meu aprendizado

@JhonAquiCeloko 2 года назад

posta pra vermos depois que finalizar

@sidimarsramos5879 2 года назад

Cara perfeito vídeo sem enrolação agente pausa ou volta quando tem alguma dúvida sem rodeios. Assim não desanima ficar ouvindo quem desenvolveu o css pq js é bom e etc. MUITO OBRIGADO

@ManualdoDev 2 года назад

Eu que agradeço, Sidimar! Valeu demais o apoio! Tamo junto!

@gabrielsousa2688 2 года назад

Vi o vídeo 2 vezes, explicou muito bem. Parabéns!! Agora irei fazer um fork e vamos ver se sai um site completo com pokedex, lista de sagas, actions figures, tipos de pokemon, jogos e etc.

@princessnany22 9 месяцев назад

Cara, amei. Você esta de parabéns. Sou iniciante e consegui entender suas explicações muito bem. Vlw pela dedicação e didática.

@ruysilva298 Год назад

Caramba, que vídeo incrível. Eu sinceramente estava com vontade de aprender front end, e esse vídeo super me encorajou, sua didática é ótima

@lucasbotelho5250 Год назад

Incrível ! Você trouxe uma didática espetacular !

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

Mano uma didática sensacional .... parabéns !

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

Muito obrigado, amigo!

@nandomendes6587 Год назад

Essa forma de explicar como tal código funciona é muito boa e simples. Exemplo: box-shadow: x y tamanho cor; Fica muito bom de aprender.

@sheepcrz9212 5 месяцев назад

Sensacional sua explicação! parabéns!

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

cara, muito obrigado muito boa a didática, aprendi muito com isso vou tentar fazer a pokedex dos jogos de gameboy advance

@gabrielplays3062 2 года назад

Manooooooo muitoooooooooo foda faz mais vídeos por favor

@BrunoOliveirafs Год назад

Meu irmão.... sua didática é INCRIVEL!!! Parabéns demais e obrigado por compartilhar isso. Você com certeza está fazendo parte da minha formação e contribuindo MUITO!

@ruthellenPJ 9 месяцев назад

Ótimo vídeo, excelente explicação 🤩🤩

@dyingawake Год назад

muito top mano, fiz e vou postar no linkedin e te marcar ;)

@mosiahrs 2 года назад

Cara isso sim é uma pokedex, não simplesmente retornar uma tabela com imagens e dados.. GENIAL. com certeza farei

@jmarlopes.2533 Год назад

Sem querer puxar saco mas caralho sua didatica é muito boa, por favor continue assim pra melhor, gosto de quem explica tudinho ao inves de só jogar as informações como acontece bastaste. Conseguiu esse nivel em menos de 1h, mt obg

@lenny5592 2 года назад

Que aula!!

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

Muito bem explicado, parabéns

@beckalves1745 Год назад

muito foda, eu ainda nao sei mt coisa de js , crio funcoes de forma diferentes... mas amei

@deegas 2 года назад

GALERA VAMOS COMPARTILHAR PQ ESSE CANAL MERECE!

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

Que projeto legal, cara. Seu canal tem me ajudado bastante nos estudos de javascript. Inclusive, essa é a primeira vez que uso api e foi mais fácil do q pensei q seria, mas muito pq vc explica muito bem. Parabéns! Um dos melhores canais de programação que já vi no youtube.

@pedromoraes5090 Год назад

Cara que projeto massa demais, o que não aprende na faculdade estou aprendendo nos seus videos. Sua didática é excelente. Seu conteúdo é top demais. Mais uns inscrito. Você tem cursos ministrados por você?

@filipe.alx. 2 года назад

Eu caí de para quedas aqui, mas foi muito bom. Gostei que eu consegui entender cada passo e a lógica também.

@lucienkaua Год назад

Melhor fim de semana codando que já tive.

@tijolinixpertin 2 года назад

Como eu só fui descobrir esse canal incrível hoje ?

@UMMONARQUISTA Год назад

Muito bem explicado! Agradeço muito, tem algumas pessoas que na hora de ensinar já vão colocando os códigos sem dizer o que fazem, porém você explicou passo a passo.

@Cauepx Год назад

Cara, sensacional! Eu estava penando para entender melhor o funcionamento de API e como consumi-las e voce simplesmente explicou tudo, Muito obrigado!! Vou compartilhar com amigos que estiverem com dificuldades também.

@charlesalbert4194 Год назад

cara que top para colocar em pratica os aprendizados de JavaScript

@VictoraII Год назад

caracaaaa q voz relaxante. com um lofi de fundo ia ficar muito bomm

@BinhowGyn Год назад

Muita informação em um unico video, pra min que estou começando a pouco tempo esta ajudando muito!!! continue assim..e parabéns tem uma otima didática, TOP!!

@DemetrioTorgan 11 месяцев назад

Que aula!!!! Consegui finalizar minha pokedex!!!! Obrigado.

@AnaCaroline-rr3xr 6 месяцев назад

Ficou excelemte, fiz acompanhando o video, perfeito.Muito obrigada!!

@alderjuniobv Год назад

@ManualdoDev Show o projetinho!!!! Estou dando os primeiros passos em JS e ficou sensacional. Obrigado mesmo por compartilhar conosco.... Já fiz o projeto acompanhado seu vídeo e já subi pro meu github também. Ah! já me inscrevi e deixei like....

@ManualdoDev Год назад

Aí simm!

@adrianovicentinijunior4498 2 года назад

Cara, que projeto sensacional, to começando aprender sobre API e isso caiu como uma LUVA! incrementei um botão que abre um popupzinho com os detalhes de altura, peso e o tipo do pokemon nessa tela e ficou excelente, baita aprendizado! Obrigado!

@motinha6185 Год назад

mano qual seu git hub quero tentar fazer esse popupzinho também

@adrianovicentinijunior4498 Год назад

@@motinha6185 xHerion meu git irmão! O nome do repositório é DDevs-Pokedex

@matheusnunes4442 Месяц назад

Que vídeo bom man, parabensss

@arthur5517 7 месяцев назад

vlw pelo projeto mano.sucesso pra ti

@JoaoGabriel-ds2gr Год назад

Foi o primeiro vídeo que assisti e consegui entender a logica do JS. Muito obrigado, @manualdoDev.

@CarlosHenrique-mx9ti 2 года назад

Iradíssimo, muito claro, projeto muito bacana, fiz ele completo. Muito obrigado pelo seu conteúdo.

@ManualdoDev 2 года назад

Eu que agradeço o apoio, Carlos! Tamo junto!

@edussmartins Год назад

Muito bom, estou aprendendo muito com seus vídeos. Manja demais, explicação muito boa.

@rubensmorais8499 11 месяцев назад

Muito bom ...parabens ...Ótimo projeto pra quem ta iniciando no javascript ...tira muitas dúvidas ...bom D+

@mijaildejesusclaseramirez41 Год назад

Me acabas de salvar de un ataque psicologico. Portugues y todo pero esta bien hecho y detallado que sin problemas pude hacerlo.

@paulovinicius5184 11 месяцев назад

Muito conhecimento para apenas 1h de vídeo, sensacional.

@eb-smith930 2 года назад

você é o mais foda que existe, muito explicativo e sem frescura sem cortes

@vroxlon Год назад

Show de bola, simples, didático e muito completo

@davidhenrique6002 2 года назад

Eu tô sem tempo agora pq tô fazendo um bootcamp, mas quando terminar o curso eu vou fazer TODOS os seus projetos pra colocar no meu GH. Melhor canal que já achei sem dúvidas!

@ManualdoDev 2 года назад

Muito obrigado pelo apoio, David! Tamo junto!

@7thwardfrank Год назад

eu posso colocar esse projeto no meu gh? n séria uma espécie de “plágio”? desculpa a pergunta, sou iniciante na área

@davidhenrique6002 Год назад

@@7thwardfrank Não, é bem comum copiar projetos públicos para praticar, o importante é você ir aprendendo no processo e se possível faça algumas alterações ou utilize outras tecnologias para praticar.

@amandapilger6432 2 года назад

Thank you for sharing this tutorial

@ckervines Год назад

muito top a aula!!!

@danielcampos6820 Год назад

Aí tu deu show, meu brother!!! Parabéns pela aula, fiz, deu certo e aprendi muito, obrigado!

@carlaribeiro4206 Год назад

Concluído com sucesso rsrsrsrs, muito obrigada.Por eu não ser muito chegada nesse anime (sempre preferi Digimon rsrs) , eu nunca tive interesse em fazer este projeto, mas como achei o seu diferenciado, eu gostei muito! Está de parabéns, não só a estética é muito mais agradável do que muitos outros que vi por ai e próxima do que o anime propõe, mas gostei muito também da sua maneira de explicar. Parabéns pelo o conteúdo. Ja estou namorando o próximo projeto! Obrigada. Deus te abençoe.

@carlaribeiro4206 Год назад

Oi quero te marcar no LinkedIn. me manda teu perfil. 😀

@titovisky_ Год назад

Eu amo pokemon e estou começando a estudar TADS. Encontrar um projeto assim, me anima muito. Obrigado!!!

@laercioalmeidamedeiros2165 2 года назад

Muito bom cara, estava meio perdido em relação a requisições API e agora já está mais claro para mim, obrigado!

@ManualdoDev 2 года назад

Tamo junto, Laércio! :D

@renato82524 Год назад

um dos melhores projetos que já fiz pelo youtube muito obrigado

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

Meus parabéns, conheci seu canal por acaso e sem dúvida é "show"👏

@nando1.068 Год назад

Buen video bro super entendible, saludos desde Ecuador. Obrigado!

@rebeldes96 2 года назад

Estou iniciando em JS, muito bem explicado de forma simples ! Gostei muito!

@paulocorazimdasilva9677 2 года назад

Muito massa esse conteúdo. Recriei aqui e até comecei a assistir pokemon hahaha... vakeu!

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

Manoo eu amei🖤🖤🖤🖤 Eu fiz mas com uma pokedex diferente e de um jeito muito diferente kdjksdj não tá muito bonito mas eu amei esse primeiro contato com HTML, CSS e JS. Foi meio difícil mas valeu a pena

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

Boooa, mano! Isso ae! Se garantiu! Parabéns!

@Pedrofdnn Год назад

Cara que projeto massa, vc se garante ensinando! Eespero aprender mais coisas no seu canal. Muito obrigado por compartilhar seus conhecimentos com agente.

@henriq_eSantos 2 года назад

meudeus que incrível, o cara manja demais. pelo tom de voz e a fluidez do vídeo da pra perceber o seu conhecimento e experiência dentro da área. parabéns, ótimo vídeo, você com certeza ajuda muita gente!

@lailagebharddarosa9250 Год назад

Excelente aula! Muito obrigada 👏

@GabrielAlves-gd9yh Год назад

Parabéns pelo vídeo! Didática impressionante, sucesso amigo !

@K1LL3RH1GT3CH 2 года назад

Demais essa aula gostei muito de fazer essa pokédesk obrigado pelo aprendizado.

@Rak_CS Год назад

Estou começando agora, tô na faculdade de Analise e desenvolvimento de sistemas e também fazendo o um curso de JS e TS no Udemy, tudo ainda é bem complexo, mas consegui fazer junto com você pelo youtube e deu certo, sei que fazendo copiando o que você ta fazendo, é fácil, kkkkkkkkkkk, mas deu uma boa clareada.