Prologue 🚀

The idea of the roadmap is cliché. But an adequate and appropriate roadmap will give you a direction to learn something without a proper roadmap you may not be able to achieve your desired outcome. And one of the mistakes people make is mastering the language by binge-watching the tutorials. So I'll also tell you how much you need to learn and also you don't need to master everything just learn the basics then make some projects and you'll learn gradually according to the requirement and it will master your skills too. And I'll also provide some resources for your ease which you'll need in your journey and will make your task easy and your learning part too. And this roadmap is inspired by me, and how I learned. Initially, I made lots of mistakes I spent around 2 years just watching the tutorials and trying to master them by watching the video but that doesn't work out. And one day my friend told me that "don't master it just learn the basics and made some project on that and eventually you'll learn everything according to the requirement" and Boom! within 3-4 months I did so much progress and from that day I've been following this simple tip and it helped me learn anything I want to.

Web Development Is Overwhelming !

Web Development is comprehensive, the frontend itself is too comprehensive, vast, and overwhelming but it's not rocket science a proper roadmap and consistency will pay off.

The roadmap will be like this:

📍 HTML

Semantic Element - Semantic HTML defines the different parts of the web page. Such as header, main, nav, section, footer, etc.

Non-Semantic Element - Non-Semantic elements are types of element in HTML that don't possess any meaning or that don't imply the type of content they have.

Multi-Media HTML - Learn to deal with image, video, audio, and SVG in your website.

Forms - Almost every website contains a form element. Forms are interactive elements for taking user input considering everything number, email, name, address, DOB, user opinion, and so on.

Table - The table element is used to provide a piece of information in a form of a table consisting of rows and columns.

SEO - Search Engine Optimization is a technic in HTML by proper utilization of meta tags, title tags, and some of the operations that need to perform to improve your website so that your website will drive traffic and the chances of appearing your website will get higher in search result.

Emmet - Emmet provides a shorthand or a shortcut and eventually it increases the speed of your writing code. Learning emmet will substantially increase your efficiency in writing code and result in avoiding writing wrong code or syntax errors.

📍 Internet

Well, as you're working on websites and there are certain things you should probably know.

Such as

• What is the Internet? And how its work?

• What is a browser? And how its work?

• What are HTTP, HTTPS, HTTP2, and HTTP3?

• What is DNS? And how its work?

And so much more but these are the essential ones.

** 📍 CSS**

• Basics - Learn to format the text, change the color of the text, and background, style the text, letter-spacing & word-spacing.

• Selectors - Selectors used in CSS to select the element you want to style from HTML. Selectors provide the convenience to style almost everything on the website.

• Layouts - Layout is basically the structure of your website. It helps you to visualize your website or how the website will look by dividing it into layout.

• Box-Model - Learn Box Model, in HTML every element is a box and we can deal with it(element). As Box Model provides convenience to control the elements.

Box Model ↓

• Flexbox - I can bet ! 99 % percent of website use flexbox. Flexbox makes it easy to arrange elements in HTML in one direction or another and also helps in specifying dimensions between elements.

• CSS Grids - Just like flexbox, Grids helps you arrange element in two-dimensional unlike flexbox where you can arrange element in one-dimensional.

• CSS Units - Learn CSS units, different types of units that express the length and measure the elements of an object according to its unit.

• Media Queries - Responsiveness is one of the key parts of the website. To make the website adaptable and efficient to every screen media query is a must!

📍 CSS Frameworks

CSS is pretty old ! Writing, maintaining, and updating a website with Vanilla CSS gets tedious and requires strenuous efforts. The help of frameworks makes it easier than Vanilla CSS.

There are many frameworks out there but I'll recommend these two. And These are the widely used frameworks.

⭐ Bootstrap - Bootstrap provides built-in HTML CSS templates such as buttons, navigation bars, tables, and forms.

⭐ Tailwind CSS - With Tailwind CSS you no more require an additional CSS page, within the HTML page now you can style your element. The good thing about Tailwind is that you don't need to know about the specificity, and you would know which element you are styling.

📍 Preprocessors CSS

CSS is a style sheet language and it is like programming languages where you can write logic. With preprocessors you can increase the capabilities of CSS, like other programming languages, you can write logic to your styles which will eventually help you in writing less code and avoid you to write the same code again and again.

The most famous and widely used preprocessors are

• SASS / SCSS

• Less

• Stylus

** 📍 JavaScript**

**Grab the basic knowledge of JavaScript programming language such as **

• Basic Syntax.

• JavaScript Variables.

• JavaScript Data types.

• JavaScript String & String Methods.

• JavaScript Array & Array Methods.

• JavaScript Function - A function is a set of instructions that perform a certain task when invoked.

• JavaScript Classes.

Now starting with your website

• Learn DOM(Document Object Model) Manipulation.

• BOM (Browser Object Model).

• Event Listeners - With Event Listeners website becomes more interactive, like when the user clicks on the button and then certain code runs and produces the result of it.

• ES6+ (Ecmascript) - ES6 was introduced in 2015 with some new features such as arrow function, spread operator, etc.

• JavaScript Modules - Modules help you to divide your code into a pieces and can be accessed later in another module which is eventually helped you to maintain your code base and get easy to work.

• Learn to fetch data from API

• JavaScript Promises

• JavaScript Scoping

• JavaScript Hoisting

• JavaScript Closures

📍 Chrome DevTools

The Chrome DevTool set is a set of tools that are designed specifically for developers who use the Chrome browser for debugging, identifying errors and problems in code, analyzing performance issues, and so much more that ultimately help you to build your website fast and in a very efficient way.

Some of the features of Chrome DevTools.

• Chrome provide virtual devices to see the responsiveness of the website.

• Network activity tool.

• Performance of the website by analyzing the website reload time, rendering even you can record not only that you can distinguish your website performance by slowing down your website.

📍 Version Control

Having a good foundation of version control is important. In a project where several developers work together version control help in working together on the same project by having access to the most recent code and modification. It will probably help you when you're working on a team.

• Learn to use Git & GitHub.

There are other alternatives too, but I'll recommend Git & GitHub.

Need Of A Web Frameworks.

Well, thus far you'll have gained a good understanding of frontend. But in a real-world application, it's very onerous to make, maintain and update the application in Vanilla HTML, Vanilla CSS & Vanilla JavaScript. Additionally, the code will become bulkier and bulkier and the process will become slower. As a result, the code will become increasingly complex and the application slow as result. And it's not about slower and bulkier but there are features that provide frameworks and libraries that Vanilla doesn't.

To make faster, more efficient applications with a smaller code base with rich functionality which is very easy to maintain, update and write I'll recommend the top popular library and frameworks. React JS, Angular, Or Vue JS.

I'll recommend React JS, this is the most popular one and widely used.

📍 React JS

React is a JavaScript library utilized for the creation of single-page dynamic applications that are based on UI components and UI sync when changing URLs i.e. when routing on website information changes dynamically without changing UI which helps in writing less code and high functionality.

The Roadmap of React will be like this.

• What is JSX?

• What is React Virtual DOM?

• React JS Components.

• React JS Props.

• React JS Conditional Rendering.

• React JS State.

• React JS Events.

• React Router.

React JS Hooks

• useState

• React Hooks Lifecycle

• useEffect

• useRef

• useContext

• useReducer

• useMemo

• useCallback

📍 React UI Frameworks

There are lots of frameworks for React UI, but these are widely used by developers.

**Material UI -**Based on Google's Material Design, Material-UI is the React UI Component library by Google. Material UI is the most famous library for React.

• Ant Design - Ant Design is the second most famous UI library built on TypeScript. Ant Design uses Less.js. Less stands for Leaner Style Sheets is a preprocessor of CSS and it is easy to learn. It is more helpful when you're using the same style again and again.

• React Bootstrap - Bootstrap it is the most lovable and famous CSS framework and is easy to implement, bootstrap comes with pre-built UI components. React Bootstrap is truly and especially build for React. And it is built by a team of GitHub.

📍Things to learn after React

• **NEXT.Js **

Next JS is built on top of react js and comparatively React JS is slower than Next JS. Some of the features that react lack Next Js fulfilled it. For e.g. Next JS has better Search Engine Optimization than React and it is more powerful and fast on server side rendering.

• **React Native **

React Native is a UI framework for developing cross-platform applications basically for mobile applications. React Native is written in JavaScript and on runtime it builds on the true native component corresponding to its platform.

• Electron

"If you can build a website, you can build a desktop app" ~ electron js

Electron JS is a framework created for developing native cross-platform desktop applications. You can build a desktop application with just HTML, CSS & JavaScript.

📍 Host Your Website

You've created the website now you've to host it so that it can be accessed by others. Web Hosting is an online service to deploy your website into the World Wide Web so that it can be accessed by everyone.

The platform that provides web hosting services.

• Vercel.

• Netlify.

• GitHub.

• Heroku.

Epilogue 🏆

Yepp! that's all there is to it. You don't have to be perfect at everything, just learn the basics of the languages which are the basic foundation of every web application. As soon as you become more immersed in this field by working on different projects, you will gradually learn and master your skill.

Hope you have found this blog helpful 👍.

Thank You for reading this out ❤️.