First thing that you would want to do is learn the basics which includes learning the basics of HTML, CSS and some familiarization with JavaScript syntax.

Learn the basics of HTML

HTML is what gives structure to your pages. Its like the human skeleton that keeps you standing. First thing that you would want to do is learn the syntax and learn everything that it has to offer. You should focus on learning the below:

• Learn the basics and how to write semantic HTML
• Understand how to divide page into sections and how to structure the DOM properly

Task — Once you have learnt the basics of HTML, make at least 5 HTML pages. I would recommend you to pick any website e.g. look at any github profile page or twitter’s login page. And focus on structuring the content properly. It is going to be ugly, but don’t worry about that for now and keep your main focus on proper structure.

Learn some CSS

Now that we have learnt how to prepare the skeleton for the page, its time to add some skin on top of it and to make it look beautiful. CSS — Cascading stylesheets are used to add beauty to your HTML pages.

• First thing that you will have to do is learn about the syntax and familiarize yourself with the common CSS properties.
• Learn about the box model and how to prepare layouts using Grid and Flexbox
• Once you are done with that, learn how to make your websites responsive with media queries.

Task –– Once you have the basics out of the way, next thing that you should do is style the HTML pages that you made in the last step. For example if you wrote the HTML page for the Github profile, its time to apply the CSS and make it actually look like the actual Github profile page. Do so with all the 5 pages that you wrote in the previous step.

Learn the Basics of JavaScript

JavaScript is what lets you make your HTML pages more interactive. For example all these sliders, popups and toast notifications that you see on websites and when it reloads certain parts of the pages without having to reload the page, it is all done with JavaScript. In this step, you are going to learn the basics of JavaScript to prepare you for the Journey –

• Learn the syntax and the basic constructs of the language.
• Learn how to manipulate DOM with JavaScript e.g. how to remove some element from the page, how to add some element, adding and removing classes, applying CSS styles etc with JavaScript.
• After you are done with that learn and understand the topics such as scopes, closures, hoisting and event bubbling etc.
• Learn how to make HTTP calls with XHR or Ajax. Ajax is what lets you perform certain actions without reloading the page.
• After you have learnt that now it is time to learn about all the new features in ES6+. ES6 is just a version of JavaScript which introduced lots of interesting updates to the language e.g. classes, different ways to declare variables, added new methods to arrays, string concatenation etc. Most of the articles that you will find online, they will use Babel to explain ES6 which is a transpiler that converts the new JavaScript to old JavaScript since it is not supported by the old browsers. But don’t worry about Babel for now, just get the idea about the concepts and use them in any of the latest browser which support ES6 for practicing. We will revisit ES6 later on.

You should now be feeling that the things are getting real. You need a pat on the back if you have been following along. These were some of the most important things that you have just learnt