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

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

[@ManualdoDev]

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]

Cara voce tem algum curso ?

[@ipcmeanthony1905]

Top demais

[@gabrielnobretapia7795]

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]

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

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

[@gilbertodiaspereira836]

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.

[@PatifedePiabetá]

É 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.]

serio? fala o nome de um ai@@diegotomasi1497

[@antonyalbuquerque7736]

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

[@VideosViraisVirais-dc7nx]

​@@PatifedePiabetácomo 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]

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]

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!

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

[@sysrafael6289]

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

[@ManualdoDev]

Tamo junto, meu amigo! Valeu demais!!

[@dhiasz2692]

Consegui entender tudo sem nunca ter programado. Video maravilhoso.

[@TheChosen0791]

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!

[@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]

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

[@tubalaokk]

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

[@VinyStylle]

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

[@micaellamarques2697]

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

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

[@ruthellenPJ]

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

[@rolfnog]

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!

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

[@fernandofernandes1398]

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

[@ManualdoDev]

Muito obrigado, amigo!

[@charlesalbert4194]

cara que top para colocar em pratica os aprendizados de JavaScript

[@princessnany22]

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

[@JoseCarlos-rm9nv]

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.

[@igordeoliveira8706]

Sensacional o vídeo. Segui e deu tudo certo. Muito Obrigado.

[@skysilenceoficial8277]

top demais, gostei bastante do projetinho

[@vroxlon]

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

[@ALLGAYER27]

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

[@mizuki.channn]

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

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

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

[@FranklynRoberto]

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

[@ManualdoDev]

Aí sim, Franklyn! Show demais!

[@fillipealbuquerque7001]

Oiii poso ver seu github??

[@lucienkaua]

Melhor fim de semana codando que já tive.

[@rebeca679]

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

[@sidimarsramos5879]

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]

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

[@DemetrioTorgan]

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

[@legarcom]

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.

[@dyingawake]

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

[@filipe.alx.]

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

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

[@roguerodrigo]

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

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

[@sheepcrz9212]

Sensacional sua explicação! parabéns!

[@jesusmarcostomaz3966]

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

[@mdom5assessoria14]

top dms mano! Vc é mt fera! algum dia meto um canal assim quando eu souber mais

[@studioNFT1]

Slk só projeto top , canal muito bom !

[@ManualdoDev]

Valeu demais, Vitor! Tamo junto!

[@paulocorazimdasilva9677]

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

[@amandapilger6432]

Thank you for sharing this tutorial

[@cryptosbrazil]

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

[@redsn5318]

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]

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

[@CarlosHenrique-mx9ti]

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

[@ManualdoDev]

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

[@matheusnunes4442]

Que vídeo bom man, parabensss

[@kamila_arrah]

Ó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

[@mosiahrs]

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

[@deegas]

GALERA VAMOS COMPARTILHAR PQ ESSE CANAL MERECE!

[@AnaCaroline-rr3xr]

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

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

[@antoniopedreiras4217]

Pura qualidade, explicação excelente

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

[@maknim27]

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]

posta pra vermos depois que finalizar

[@ckervines]

muito top a aula!!!

[@adrianovicentinijunior4498]

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

[@davidhenrique6002]

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]

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.

[@Cocaicara]

Ótima aula!! Um dos melhores professores!

[@ManualdoDev]

Muito obrigado, Victor! Tamo junto!

[@arielpellegrinoiborra933]

cara, teu canal ta massa demais! Parabens

[@ManualdoDev]

Valeu demais, Ariel! :D Tamo junto!

[@edussmartins]

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

[@gabrielsousa2688]

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.

[@lucasbotelho5250]

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

[@rubensmorais8499]

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

[@clebergomes2588]

Fera demais irmão!! Que Deus te abençoe!

[@eb-smith930]

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

[@AlvesJhonata]

Rapaz... Ficou show de mais... Vou usar aqui ^^

[@iagocarvalho49]

Ganhou um inscrito + like + sininho ativado. Excelentes vídeo nesse canal. Não pare por favor !!!

[@willamssouza7662]

Ótima video aula!!!!!

[@ManualdoDev]

Valeu demais, Willams!

[@leonardonascimento9442]

Projeto muito legal. Estou aprendendo a programar e consegui entender tudo! Muito bem explicado! Muito obrigado pelo conteudo, ganhou um Sub!!

[@ManualdoDev]

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

[@paulovinicius5184]

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

[@Esthefany_0]

Parabéns, ótima didática 👏🏻

[@JoaoGabriel-ds2gr]

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

[@laercioalmeidamedeiros2165]

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

[@ManualdoDev]

Tamo junto, Laércio! :D

[@gabrieljesus4044]

video muito top, curti demais

[@Hykarin]

Didática insana, parabéns pelo conteúdo

[@danielcampos6820]

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

[@lailagdarosa]

Excelente aula! Muito obrigada 👏

[@Pedrofdnn]

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

[@marianocarlossilva7176]

ótimo vídeo, didática absurda!!!!!!!

[@MrCaramos]

Esse mestre vai longe!!! Top demais!

[@ManualdoDev]

Tamo junto demais, Mestre!

[@linqui756]

Adoro suas aulas

[@AndreBeatz]

parabéns pelo conteúdo, excelente qualidade na explicação.

[@ManualdoDev]

Muito obrigado, André! :D Tamo junto!

[@GabrielAlves-gd9yh]

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

[@renato82524]

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

[@lucasfrazao3268]

O projeto que eu sempre pedi!!!! Muito obrigado cara, você é fera.

[@ManualdoDev]

Tamo junto, Lucas! Obrigado pelo apoio! Abraço!

[@IsaqueBarbosa_21]

A melhor pokedex do YT disparada, obrigado pela aula, muito top

[@beckalves1745]

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

[@BrunoSilva-ns4tn]

Cara, você está de parabéns!! Ensina fácil!

[@ManualdoDev]

Valeu demais, Bruno! Tamo junto!

[@arthur5517]

vlw pelo projeto mano.sucesso pra ti

[@pedroaragao7633]

muito brabo como sempre

[@ManualdoDev]

Tamo junto, Pedro!

[@K1LL3RH1GT3CH]

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

[@arlanfilho]

Q video foda, parabéns pela ideia

[@cryptosbrazil]

Muito bem explicado, parabéns

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

[@alancleversonjobdev4779]

Mandou muito MESTRE !. Parabéns !

[@JoaoVitor-pc1xn]

Que aula!! didatica incrivel, perfeito.

[@viniciusfonseca9494]

Sabe muito! Que excelência na explicação 👏🏻👏🏻👏🏻

[@ManualdoDev]

Muito obrigado, mano! Tamo junto demais!