Front-end Development Roadmap in 2023

Photo by Elsa Noblet on Unsplash

Front-end Development Roadmap in 2023

A road to being a front-end developer in 2023

Why a roadmap?

In today's tech industry, the biggest mistake beginners do is jumping from one language to another as they follow trends, check out 'what is popular' and start learning it without a roadmap. That is a bad way to start in the industry and if you don't start well, the path ahead goes and becomes more and more difficult. One of the things my friend did for me when I first started in IT was to create a learning roadmap, and it was one of the things that helped me improve. Although it may appear complicated, the frontend development learning map is not that large. It won't seem daunting if you approach it to step by step.

Let's get started

  • Foundation Knowledge

    as you will be developing websites it will be beneficial to understand the Internet, how websites work, etc. It will help you understand the rationale behind why things are done the way they are.

  • Into the Basics

    The three pillars of Front-end development are HTML, CSS and JavaScript. 90% of websites we go on, through our phone, our laptop or tablet are made using these three languages, HTML, CSS and JavaScript. So I don't think so you have any doubt about why we should start with these three.

    Let's take the example of the human body, how our body is built with the skeletal system, muscular system and nervous system. Just like the skeletal system is responsible for all the structure of the body, HTML is responsible for the structure of the website. And the muscles on the body are responsible for how we look, just like CSS takes responsibility for how our website will look. All the aesthetics of the website is under the influence of CSS. Now comes the functionality, as the nervous system takes care of the functionality of the human body, and JavaScript takes care of all the functionality in the website.

  • Now come Libraries and Frameworks

    after the basics, libraries and frameworks like React, Vue and Angular etc. make the work easier and faster. As React is a library, not a framework. The major difference between a library and a framework is that a library doesn't force the application to be in a pre-defined structure but a framework forces the application to follow a structure. For example, a project that uses bootstrap may be identified by the way it looks and functions since bootstrap is a CSS framework.

  • Learn the usage of version control software

    Learn how to use Git, as Git is the most popular and most used version control system, and is used in 70% of software development. It is utilized to keep track of our project history and collaborate with others, hence it is virtually universally mentioned in job descriptions. Whilst there are several version control systems, it is advised to become familiar with Git because of its popularity.

  • CSS pre-processors

    Because of its age and inability to handle extremely large projects, CSS is insufficient. Whenever you try to make changes to your code, a bug pops up, and the process may be quite daunting. The CSS preprocessor streamlines and expedites your work. There are other CSS preprocessors, however as SASS is more widely used, learning it is advised.

  • Resources

    Front-end Libraries Certification by FCC

    Video by FCC on Front-end Development

    Portfolio Website tutorial using HTML, CSS and JavaScript

See you folks in another blog.