Learn Vanilla JavaScript Before Any Frameworks or Libraries
The term vanilla JavaScript basically means JavaScript without any additional frameworks or libraries.
JS frameworks are surely an essential part of modern front-end web development and fundamental to increase development velocity. However, having a good knowledge of JavaScript is a must before jumping into any of these frameworks or libraries.
That’s why I decided to gain more confidence with vanilla JavaScript. To improve my skills, I built 20 projects in 20 days with nothing but HTML5, CSS, and JavaScript.
This is not a tutorial but simply a demonstration of what you can build with the basics of web development. In any case, for each project, I will provide you with the code!
Day 1
Quote Generator: Fetch, Async/Await, Quote API
Link: https://5ebs.github.io/quote-generator/
GitHub: https://github.com/5ebs/quote-generator
Day 2
Infinite Scroll: Fetch, Async/Await, Unsplash API, DOM, Scroll Event Listener
Link: https://5ebs.github.io/infinite-scroll/
GitHub: https://github.com/5ebs/infinite-scroll
Day 3
3D animation: DOM, Mouse Events
Link: https://5ebs.github.io/-3d-animation-air-Jordan-1/
GitHub:https://github.com/5ebs/-3d-animation-air-Jordan-1
Day 4
Joke teller: Fetch, Async/Await, Joke API, Text-to-Speech
Link: https://5ebs.github.io/Joke-Teller/
GitHub: https://github.com/5ebs/Joke-Teller
Day 5
Light/Dark Mode: DOM, localStorage
Link: https://5ebs.github.io/light-dark-mode/
GitHub: https://github.com/5ebs/light-dark-mode
Day 6
Canvas Game: Advanced HTML Canvas
Link: https://5ebs.github.io/HTLM5-Canvas/
GitHub: https://github.com/5ebs/HTLM5-Canvas
Day 7
Snake: Advanced HTML Canvas
Link: https://5ebs.github.io/snake-game/
GitHub: https://github.com/5ebs/snake-game
Day 8
Picture-in-Picture: Picture-in-Picture API, Screen Capture API
Link: https://5ebs.github.io/picture-in-picture/
GitHub: https://github.com/5ebs/picture-in-picture
Day 9
Music Player: HTML 5 Audio API
Link: https://5ebs.github.io/Music-Player/
GitHub: https://github.com/5ebs/Music-Player
Day 10
Animated Navigation: CSS Animations
Link: https://5ebs.github.io/animated-navigation/
GitHub: https://github.com/5ebs/animated-navigation
Day 11
Typewriter Effect: DOM, Slice Method
Link: https://5ebs.github.io/typewriter-effect/
GitHub: https://github.com/5ebs/typewriter-effect
Day 12
Countdown App: Date, localStorage
Link: https://5ebs.github.io/Custom-countdown/
GitHub: https://github.com/5ebs/Custom-countdown
Day 13
“Coming Soon” Page: Date, DOM
Link: https://5ebs.github.io/coming-soon/
GitHub: https://github.com/5ebs/coming-soon
Day 14
Breakout Game: Advanced HTML Canvas
Link: https://5ebs.github.io/breakout-game/
GitHub: https://github.com/5ebs/breakout-game
Day 15
Bookmarks App: DOM, localStorage
Link: https://5ebs.github.io/book-keeper/
GitHub: https://github.com/5ebs/book-keeper
Day 16
Form Validation: DOM, Forms
Link: https://5ebs.github.io/form-validator/
GitHub: https://github.com/5ebs/form-validator
Day 17
Virtual Kanban Board: Drag and Drop API, localStorage
Link: https://5ebs.github.io/Kanban-Board/
GitHub: https://github.com/5ebs/Kanban-Board
Day 18
Calculator: Math Methods
Link: https://5ebs.github.io/calculator/
GitHub: https://github.com/5ebs/calculator
Day 19
Arcade Game Pong: Advanced HTML Canvas
Link: https://5ebs.github.io/pong-game/
GitHub: https://github.com/5ebs/pong-game
Day 20
Paint 2.0: Advanced HTML Canvas, localStorage
Link: https://5ebs.github.io/paint-2.0/
GitHub: https://github.com/5ebs/paint-2.0
Consider becoming a Medium member if you appreciate reading stories like this and want to help me as a writer. It costs $5 per month and gives you unlimited access to Medium content. I’ll get a little commission if you sign up via my link.
