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

Web App From Scratch

Please use Google Chrome or Firefox for this demo.
The website can be found here.

Demo Screenshot.

For the Web App From Scratch project, we had to build a responsive, single page, web application using vanilla JavaScript only. This was quite the challenge for me, especially because I am relatively new to the language, and the fact that I never used Object Oriented Programming principals before. On the positive side, I learned a lot of new and useful stuff.

Actor Diagram

Actor Diagram.

Interaction Diagram

Interaction Diagram.


For this project, I used the Dog API made by Elliott Landsborough. While this is an extremely fast API, you don't have many options or data available, in fact, the only data provided is a list containing 122 dog breeds and an array filled with images of each breed. I actually expected more data from it. For example, fur color, sizes, lifespan, etc. Especially because the data source used by this API contains a lot more information.


  • Random facts about dogs.
  • A large breed collection containing over 120 dog breeds.
  • A detail page with lots of images for each dog breed.
  • Dogs are easily found using a simple yet powerful search function.


  • Rewrite the code using functional programming principles.
  • Make use of separated HTML files and/or new templating/render engine.
  • Redesign the website styles.

Code Reviews



Advantages and disadvantages of JavaScript libraries/frameworks


  • Het is veel sneller om werkende software te schrijven in frameworks of libraries.
  • Uitgebreide lijst met gegarandeerd werkende functies.
  • Frameworks en libraries worden vaak door getalenteerde mensen met veel ervaring geschreven.
  • Je hoeft geen rekening te houden met oudere browsers.
  • Makkelijker te beginnen en te leren vergeleken met vanilla JS.
  • Frameworks en libraries creëren een standaard.
  • Plugins, plugins en nog meer plugins.


  • Je bent enorm afhankelijk van de library en zijn updates.
  • Frameworks zijn groot terwijl je vaak gebruik maakt van een klein percentage van alle beschikbare functies.
  • Door gebruik te maken van libraries zijn mensen vaak minder creatief bezig, hierdoor krijg je heel veel van hetzelfde.
  • Vanilla JS zal altijd sneller zijn dan frameworks of libraries.


Advantages and disadvantages of client-side single page web apps


  • Performance en data, de client hoeft namelijk maar 1 keer alle bestanden te laden.
  • Gebruikersvriendelijker door de gebruikerservaring en immersie te vergroten aangezien je de pagina nooit herlaad.
  • Met gebruik van technieken als oneindig scrollen creëer je een soepel en sneller ervaring zonder laadtijden en wachttijden.
  • Voelt als een native applicatie in plaats van een website.
  • Web applicaties zijn vaak makkelijker te debuggen en te onderhouden.


  • Javascript is noodzakelijk, sommige mensen, plugins en webbrowsers kunnen JS uit hebben staan.
  • Hoewel web applicaties snel aanvoelen kunnen ze een lange laadtijd hebben in verband met zware scripts en libraries.
  • SEO optimalisatie kan zeer lastig zijn en vaak kost het vele extra uren.
  • In vergelijking met traditionele applicaties zijn web applicaties vaak minder veilig in verband met script injecties.


Best practices

  • Don't use global variables/objects.
  • Declare variables at top of scope.
  • Use short clear meaningful names (English).
  • Work in strict mode.
  • camelCase your code if(code != Constructor || CONSTANTS).
  • Place external scripts at the bottom of the page.
  • Indent your code.
  • Use 2 spaces for indentation.
  • Do not use ; (Semicolons).
  • Always Declare Local Variables.
  • Initialize Variables (let myArray = [] and not let myArray).
  • Use === & !== Comparison.
  • End Your Switches with Defaults.
  • Avoid Using eval(). (Runs strings as code.)



Data Sources

You can’t perform that action at this time.