100 vanilla javascript projects for practice.

After finishing my #31DaysOfReact challenge in which I had created 31 react components in 45 days.

I found that there are few areas on which I have to work on to become a better Javascript developer, primarily on vanilla javascript.

So I have decided to create 100+ projects in plain javascript to enhance my skills more.

These projects will be from beginner to advance level so that If you someone wants to learn they can follow along.

I will try to create as much unique projects as possible and cover all the topics of the language.

Frontend projects with vanilla javascript

Javascript is the primary language used for frontend development along with HTML and CSS. As more advance frameworks keep emerging everyday it is hard to keep up with all of them.

But if you have your foundation strong then it will be really easy to understand and use any frameworks.

Creating different projects will help you to understand.

HTML

  • How to layout the elements properly. Think from the SEO perspective and accessibility and then create the DOM structures.
  • Handle forms efficiently and write semantic HTML.
  • Use different types of element for their native styles rather than adding it later with CSS.

CSS

  • How to write modular and reusable style code.
  • Use of variables for re usability and consistency.
  • Flexbox and Grid.
  • CSS Specificity
  • CSS Pre-processors
  • CSS resetting / normalization
  • CSS Architecture(BEM)
  • Floats
  • Flexbox & Grids
  • SVG
  • Media Queries
  • Display Properties
  • Position properties
  • Animations
  • Psuedo Classes

Javascript

  • Null vs undefined
  • Loop vs map
  • attributes vs properties
  • Promises vs callbacks
  • async vs defer
  • Event Bubbling & Capturing
  • Local Storage and Session Storage
  • CORS
  • Web Storage APIs
  • Web Sockets
  • Single Page Applications
  • Server Side rendering
  • Optimization

Browser

  • How browser works
  • Cross Browser Compatibility
  • Cross Device Compatibility

I am also maintaining a github repo for all these projects.