Build a Pokedex with Vanilla HTML, CSS, and JavaScript

Поділитися
Вставка
  • Опубліковано 12 вер 2024

КОМЕНТАРІ • 35

  • @samimustafa7284
    @samimustafa7284 11 місяців тому +7

    Brother You are One OF the best youtuber, the way u explain is so understandable keep posting vids with api in html css js

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  11 місяців тому +2

      Thank you! I highly appreciate that and thank you for the suggestion!

    • @samimustafa7284
      @samimustafa7284 11 місяців тому

      @@howtobecomeadeveloper i'm 3years front end dev and like everybody struggling learning javascript but now i literally started to understand the js

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  11 місяців тому +1

      @@samimustafa7284 Well I am humbled, and happy you are enjoying!

  • @AlejandroGonzalez-xe4dd
    @AlejandroGonzalez-xe4dd Рік тому +11

    i built a super similar web app in the summer except instead of using pokeapi i created my own api using mongodb and js. and then i created a react app for the front end and let me just tell you ur website is a much cleaner design. Mine doesnt work on mobile at all since i didnt have any css knowledge at the time and was just learning as i went. May have to redo my website after seeing this lmao

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  Рік тому +4

      That is a super useful stack though! I am planning on doing some MERN projects on this channel 😊 I'm glad this can serve as inspiration, let me know how it goes!

  • @gamingexpert2204
    @gamingexpert2204 Місяць тому +1

    Really thank your so much, without ur help if would have take me a lot of time doing something like this, you saved a lot of time for me. This project is really going to help me a lot. thanks a lot teacher.
    you have explained almost everything clearly, no doubts. thnak you so much ❤

  • @howtobecomeadeveloper
    @howtobecomeadeveloper  Рік тому

    Build your next awesome project:
    www.tubebuddy.com/quicknav/latest/UCkXqOdpo5ul8BosGBFlDgmw

    • @thilaksalivahanan2342
      @thilaksalivahanan2342 Рік тому

      Similar to this , kindly create beginner / intermediate css, html,js projects. Highly appreciate your efforts 👍

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  Рік тому

      @@thilaksalivahanan2342 Noted, thanks for the suggestion! 😊

  • @themangosmooviee
    @themangosmooviee Місяць тому

    This was an incredible tutorial. So helpful and informative! Thank you!

  • @swoldu01
    @swoldu01 11 місяців тому +2

    This is great and you teach so well. How long would this take you from the initial inspiration stage? I'm new to coding

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  11 місяців тому +1

      Thank you very much! I use about 1 week for this kind of project, which I already had a Figma design as inspiration 😊

  • @arjuno7058
    @arjuno7058 7 місяців тому +3

    awesome tutorial

  • @enderman6954
    @enderman6954 Місяць тому +1

    When i try to get pokemon above #649 (genesect) i am not able to get the images for those pokemons. could someone help me

  • @Sonyemman97
    @Sonyemman97 4 місяці тому

    Working through this tutorial. Why do we use removeEventListener in regards to the left and right arrow in the details.js? If we are adding navigate pokemon functionality to the arrows then why are we removing the event listener when there is a click?

  • @russkydeutsch
    @russkydeutsch 10 місяців тому

    How long have you been programing? I just completed a full stack bootcamp, but I feel there is just too much to learn, snd it will take too long to become good at it.

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  10 місяців тому +1

      I have been programming full-time for only 1.5 years. So it can go very fast with solid dedication. Also, my personal experience is that the more you code the quicker you learn to adapt to new "unknown" technologies, syntax, tools etc. So although being a developer is constantly learning and evolving, I definitely feel more comfortable jumping into something new and feel less and less overwhelmed as time passes. You got this! 🤓💪

  • @davidmolina4077
    @davidmolina4077 4 місяці тому

    When creating the pokemon.js in the first const with document.Queryselector the log tells me "document is not defined". I tried putting the script at the end of the body, checked the folder structure path and any typos but everything is okey. Why it gives me that error?

  • @orangeapple681
    @orangeapple681 6 місяців тому

    Why would you link JS in the title with defer when you can just put it at the end of the body? Is there an advantage to doing it this way?

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  6 місяців тому +1

      Putting JavaScript in the head with `defer` lets the browser download it while it's parsing the HTML, but it waits to run until after the HTML is fully loaded. This can make your page feel faster. Placing scripts at the end of the body achieves a similar result, but it might slow down rendering because scripts can block page loading. Using `defer` in the head gives you the best of both worlds: fast downloading and deferred execution for smoother page loading.

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  6 місяців тому +1

      Also, keeping the JS together with the CSS, and all the other potential imports makes for an easier and more maintainable HTML file.

    • @orangeapple681
      @orangeapple681 6 місяців тому

      @@howtobecomeadeveloper Thank you! Incredible answer much appreciated 🙏

  • @aliasname2257
    @aliasname2257 6 місяців тому +8

    in pokemon.js - line 76 - i had to add a 'return' statement at the beginning to get name searches to work. I'm only about an hour into the video and hadn't had any other issues with it other than that.
    "return pokemon.name.toLowerCase().startsWith(searchTerm)"
    I'm still learning so can you add some insight on this, do you know why i would have had to make this change from the original code?

    • @themangosmooviee
      @themangosmooviee Місяць тому

      Did you check to see whether or not the curly brackets were around your return statement?

  • @akshatagrawal9495
    @akshatagrawal9495 6 місяців тому

    from where i can find the pokemon images?? as it is not showing images of the pokemon

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  6 місяців тому

      The Pokémon API

    • @akshatagrawal9495
      @akshatagrawal9495 6 місяців тому

      @@howtobecomeadeveloper The API is not working plz help me out I can’t able to fetch the images

  • @akshatagrawal9495
    @akshatagrawal9495 6 місяців тому

    Raw githubusercontent URL is not working here

    • @Gabriela-Diana
      @Gabriela-Diana 3 місяці тому

      I am agree the URL it's not working.What can we do?

  • @websitewalaofficial
    @websitewalaofficial Рік тому

    I'm not able to watch your video. It's loading bro. I think there is something wrong