Front End Developer Roadmap Curated by the Programming Community

What you'll learn

Basics of HTML5, CSS3 and Javascript.
Basics of UI/UX Design
Boostrap3/4
React 16
Git

overview

With the rise in the development of web-based products, front-end Developers are in very high demand. Also with the invention of many cutting-edge frameworks in Javascript front-end has become really complicated and demands very high skills. Gone are the days when back-end development was the tougher part and front-end was considered just writing styles in CSS and handlings clicks with jQuery. It is so much more than that today.

In this roadmap, you will learn about all the essentials of the front-end that will get you up and running in your journey.

HTML5 and CSS3 Basics

Our Front End Developers recommend starting with HTML5 and CSS, the structure and skin of the web, to get started. Our community recommends the following tutorials as a primer on the subject. Whether you prefer to watch videos on HTML or read how-to books on the subject, we found resources for every style of learning.

30 Days To Learn HTML + CSS Course (youtube.com)

Dive Into HTML5 by Mark Pilgrim (amazon.com)

Build Responsive Real World Websites with HTML5 and CSS3 (udemy.com)

CSS - The Complete Guide (incl. Flexbox, Grid & Sass) (udemy.com)

featured

Learn to use Bootstrap

The Front End Developers at Hackr also recommend learning Bootstrap. We uncovered these resources to guide you through to subject. Basically, Bootstrap is a toolkit of ready-made styles you can use for a multitude of projects. Use it to save time on MVPs and prototypes, then configure to suit your needs.

Bootstrap 4 From Scratch With 5 Projects (udemy.com)

featured

Project

Make a Landing Page in Bootstrap

Learn Javascript

Do you speak JavaScript? If you want to join our Front End Developers, you'll need to. We consider it the language of the web. It handles user interactions on the browser, so it appears everywhere. Check out our community's favorite resources on learning JavaScript as the next step in your journey.

Eloquent JavaScript (eloquentjavascript.net)

The Complete JavaScript Course 2023: Build Real Projects (udemy.com)

featured

Project

Make a to-do list app in Javascript

ReactJS

Ready to build user interfaces? You'll want to brush up on React. It's an open-source library and framework developed by Meta. And it's commonly used for user interfaces and web applications. Here are a few of our favorite resources on the subject.

Awesome React (github.com)

The Complete React Web Developer Course (with Redux) (udemy.com)

Git Basics

Git is a version control system commonly used by organizations to maintain their software. You don't need a deep-dive to get started, but you'll want familiarity with the subject even as a beginner. Our community of Front End Developers recommends the following resources for learning Git.

Git Guru Guide by Atlassian (atlassian.com)

How to follow this roadmap?

You should start by exploring HTML5 and CSS3.
Once you are comfortable with them, you can move on to Bootstrap 4 and build something. Try to copy the design of any famous website you like and see if you can re-create it on your own.
Next, you should learn Javascript and how to handle user interaction.
Once you have spent enough time perfecting your Javascript, then you can move on to learn a front-end framework of your choice. We recommend React.

Lastly, make sure you keep building something at every step of your learning. Remember, Practice is the key to perfection.

Discuss this roadmap:

Ask a question or write your feedback/review of this roadmap or tell anything to the people considering this roadmap.