Skip to content
The course repo for 'Web App From Scratch'
JavaScript CSS HTML
Branch: master
Clone or download
Pull request Compare This branch is 58 commits ahead of cmda-minor-web-1718:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


The Pokémon api

This API is meant to show data about the first generation Pokémon. Users can see a list of all 151 first generation Pokémon, there they can click on that Pokémon and see a bit more information on that specific Pokémon.

How to use

First you visit the website and click on Pokélist in the navigation bar. From there you can select or filter on a Pokémon. The list is sorted in alphabetical order.

From there, you can select a Pokémon and view some more details on it.

Visual Flow

Site screenshot

Interaction chart

Site screenshot


Vanilla JS vs Libraries & Frameworks

To talk about the benefits and cons of using a framework or library instead of pure vanilla JS, we need to define what a framework and a library is.


A framework is an usually opinionated source of code that defines a way for you to use it. It is more often used for large projects starting at the beginning.


A library is a resource where you can use small pieces of code to help you in your project. The code can be used as you wish and is up to you to be manipulated or not.

The advantages of using a Framework

Frameworks tend to pop up every other month. They exist to help solve a problem, such as making the use of ease much better.

  • Express.js, a popular Node.js framework exists to make setting up routes and such much easier, making you write less code.
  • React is a framework developed by Facebook, it primarily benefits the developers to work in a very clear and easy to maintain and reuse way.

The cons

  • A framework dictates the way you have to use it, if you don't use it as stated, it will more than likely not work.
  • Frameworks have you at the mercy of it's maintainers, if they suddenly make significant changes, you have to learn everything.
  • There is no guarantee that a framework will be updated

The advantages of using a Library

Libraries have been around forever. They usually come from developers getting frustrated with current solutions, which makes them very popular.

  • A library can be used entirely or just in small chunks, it's all up to you.
  • You can manipulate the code in any way you wish
  • There are a lot of libraries, so there is almost always a good amount of choice

The cons

  • Using a library can make you a lazy developer, instead of figuring out the problem you just go for the easy route

The advantages of using vanilla JS

  • It's simply better performance wise, since it's compiles down and that's it. No need for it to work in conjuction with a framework or library.
  • You writing the code means you actually understand what happens
  • The understanding of vanilla JS leads to you understanding what happens in new frameworks and/or libraries
  • Frameworks can come and go, vanilla JS is here to stay

The cons

  • It's not hyped enough


Single page web apps don't need a server to serve the pages. All the navigation gets done without the browsers needing to refresh.


  • SPA's are extremely quick, it just needs to download the files once and that's it
  • SPA's are very simple and quick to deploy, just upload the files and that's it
  • It's good for the user experience because everything happens quickly


  • You are forced to have Javascript enabled, the page won't work otherwise

Best practices

  • Always use const, use let where needed, never use var
  • Use arrow functions wherever possible
  • Declare variables at the top of the scope
  • Keep comments short and sweet
  • Keep your code DRY, use a function twice? DRY it up
  • If you can't explain it simply enough, it's probably too confusing
  • Share and help others
You can’t perform that action at this time.