Front-End Roadmap for beginners

Hello Folks, Front-end tech stack has always been a hot topic talk or to write a blog on. I'm in front-end development for more than 8 months. I have seen lots of buzzwords around this along the journey coz of tons of libraries & frameworks. Today I would like to put my thoughts around getting started with front-end & what tech's you should learn.

so, let's begin...

I have divided this article into three sections ;

A: The core of Web
B: The UI & Ecosystem
C: Code maintenance & Testing

A: The Core of Web

As a web dev, we need to understand some of the basic and core concepts to understand it better.

Internet Fundamentals
HTTP/HTTPS/DNS
Server-Client architecture

2: HTML

HTML is a markup language that tells the browser the layout of the website. You can relate this to the human bone skeleton or car body.

3: CSS

CSS stands for cascading style sheets. It is used to design web pages to make them appealing and handy to the user.

4:JavaScript

JavaScript is the most popular and the only programming language for front-end web development. It used to add more interactivity to the website and make it more functional.

B: The UI & Ecosystem

After reaching a certain level of confidence & mastery in HTML,CSS,Javascript . Now is the time to explore the libraries & framework to build beautiful & Scalable web applications in fewer efforts.

1. React.js Library

React.js is one of the most popular UI libraries from Facebook & now it's Open Source.

Being with a huge community of developers react stand with top frameworks like Angular & Vue.

The main essence of using react is Reusable components & Speed of application.

2. Bootstrap

Bootstrap is a component-based framework, which means it comes with prebuilt components and includes other utilities for layering displays. It has JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Note: There are other similar alternatives to bootstrap such as Tailwind CSS which is the utility-first framework. There have been a lot of dev debates going around these.

B: Testing & Management

1. Git & GitHub

Every developer on this planet should be aware of git & GitHub to maintain their code & collaborate on it. Here is my brief guide for getting started with git & GitHub

2. Cypress

Cypress is the new standard in front-end testing that every developer and QA engineer needs.

Cypress can be used to write several different types of tests. This can provide even more confidence that your application under test is working as intended.

3. React Testing Library

The React Testing Library is a very lightweight solution for testing React components.

It Provides Simple and complete React DOM testing utilities that encourage good testing practices.

4. NPM or YARN

npm is the package manager for the Node JavaScript platform. It puts modules in place so that Node can find them, and manages dependency conflicts intelligently.

Also

Yarn is a new package manager that replaces the existing workflow for the npm client or other package managers while remaining compatible with the npm registry. It has the same feature set as existing workflows while operating faster, more securely, and more reliably.

Wrapping up...

In this article, we went throw the roadmap that you can follow for Front End Web Development. We talked about the basics of the web to maintenance & code testing. I hope this information was insightful to you. Also, note that the most important technology in this article was React.js. So ill recommend you to give it a try once I'm sure you'll never look back.

< Happy Coding >

Let me know your thoughts on this article. I tried to explain in the most simple manner. I hope you liked it!

Also, any suggestion or feedback is always appreciated🙏.

Connect me on

This article is published w/ Scattr ↗️

Blog