Frontend Developer Roadmap

1. Learn HTML and CSS

• Watch the Crash Course.
  • After basics of CSS, make sure to learn making layouts in CSS i.e., learning the concepts of Float and clear, Positioning, Display, Box Model, CSS Grid, and Flexbox.
• Watch a complete course here.
• Follow the w3schools docs for HTML and CSS for reference.
• Optionally check out the official docs for HTML and CSS.

2. Learn Javascript

• Watch the crash course.
• Watch a complete course here.
• Follow the w3schools doc here.
• When you think you've learned a lot, check out these tutorials here and here, make sure you've got the idea of modern Javascript.
• Optionally learn from official docs here.

3. Learn a Version Control System

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

• Watch Git Tutorial for Beginners.
• Learn git visually here.
• Optionally check the official docs here.

4. Learn about Package Managers

NPM and Yarn, both are fine, pick one or learn both, there is not much difference.

• Learn about NPM here.
• Learn about Yarn here.

5. Learn about Build Tools

Learn and get the basic idea of Webpack and NPM Scripts.

6. Pick a Framework

The five most popular JavaScript frameworks are Node.js, React, Vue.js, AngularJS, and Ember.js. We'll be focusing on two of them only.

1. React
   • Check the docs here
   • Watch the Full React Tutorial
   • Watch the React Context & Hooks Tutorial
   • Watch the React & Redux Tutorial
   • Learn about Next.js here practice here
2. Vue
   • Check the docs here (try to refer to these docs even when watching tutorials)
   • Watch the introduction tutorial
   • Learn about Nuxt here and watch the introductory videos here.

---

This roadmap is inspired by roadmap.sh.