Frontend Web Developer Roadmap 2024

February 19, 2024

A detailed step by step frontend web dev roadmap for tech newbies who want to become self taught frontend devs

Ugochukwu Paul

Latest in tech

Software Dev

After we decide to become frontend developers, the questions we ask are:
"How do I become a good frontend developer?", "How do I know I'm doing the right thing?" ,etc.

In today's article , I'll provide a roadmap that I believe should be a good start for an aspiring frontend developer in the year 2024. I'll start with the basics and go into more technical things . I'll also do my best to provide courses you can try out for everything I mention.

Fristly, we'll talk about HTML. HTML stands for Hypertext Markup Language. It's not a programming language, but it's the standard markup language for creating Web pages. It describes the structure of a Web page and tells the browser how to display the Content . Let's look at a website like a house. To get a good structure, you need blocks / bricks . HTML is the block for websites that describes the structure we have in mind for any website . To understand HTML, you can check out W3school or Freecodecamp.

Secondly, just like houses , we can't just leave blocks . We need to paint it and make it look good and attractive. In web development, CSS is your paint . CSS stands for Cascading Style Sheet. It helps describe how HTML elements are to be displayed on screen, paper, or in other media. For instance , if you look at the top of this website, you can see a colored button for toggling light or dark mode. Without CSS, that button can't be blue . To understand CSS, you can check out W3school or Freecodecamp.

Learn HTML and CSS and get a certificate on Freecodecamp!

Thirdly, we will need Javascript. Let me explain. We now have a house well painted, but, we can't live here yet. We need doors, windows, chairs, and everything else that makes a house functional. JavaScript is the world's most popular programming language. It is the programming language of the Web. When you click on the Join Newsletter button below this website, without Javascript, we can't receive your email and send you newsletters. Javascript makes websites functional . You can learn Javascript and get a certificate at FreecodeCamp or W3School.

We recommend Freecodecamp because, the fastest way to master these technologies is by building projects and freecodecamp gives you projects to build before giving you a certificate.

After Javascript, you can now build websites that people can use . You can basically build any website you can imagine with Javascript. However, there's something called "JavaScript Frameworks.". They're pre-written codes that make it easier and faster for you to ship Javascript codes . There are a lot of Javascript frameworks, and you can also build your own if you feel like it. However, some of these frameworks are managed by senior developers. Here's a list of the popular ones:

1. React
2. Vue
3. Angular
4. Astro
5. Svelte

I'll be focusing on React . It's very popular, and it's what I use . With a good understanding of Javascript, picking up any framework shouldn't be a problem. React combines HTML with JavaScript functionality into its own markup language called JSX. React also makes it easy to manage the flow of data throughout the application. For a proper understanding of React, you can check out CodeDamn or w3school.

You can also checkout the React courses on CoddingAddict Youtube channel

Advanced

After React, you can decide to advance and learn other technologies that are compactible with React and Js like Nextjs , Typescript, Redux, how to deploy , security, testing, etc. However, with what you already know, you can start building your ideas, looking for junior roles, internships, etc .

We recommend You join our tech community to meet like minded people . The journey to becoming a frontend dev can be overwhelming and when you have questions we'll answer them!

Conclusion

There's no specified time to spend on any technology mentioned in this article. We recommend you pick your pace and make sure you build something with each tech you learn . If you have corrections to make to this article, please feel free to express them in the comments.