Roadmap to learn and practice HTML, CSS & JavaScript in 6 weeks
Tags: html, css, javascript, webdev
Published: 2020-10-13 16:21:11

It’s never too late to learn code or make a career change in web development. The demand for web developers is high all the time and is still increasing, The best part is that a CS degree is not a prerequisite to get into web development.

In this article, you will explore how to master HTML, CSS, and JavaScript in 6 weeks.

##So, what should be the first step?

The very first step is to make your foundations strong. Learning HTML would be the very first step. There are plenty of free materials available on the internet. I’ll mention some of these.

##What is HTML?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7frjmcjha6w2u90vbia6.jpg)

The Hypertext Markup Language (HTML) is essential for every website you’re implementing. By using HTL you’re defining and structuring the content of a website by using a simple markup syntax.

##How to learn HTML?

You should start by reading about the basics of HTML.
[Marksheet](https://marksheet.io) is the best resource for learning HTML and CSS as well. If you are clever enough you can get a lot of information and you may not need any other material to learn.

The next thing is watching crash courses on YouTube to get enough knowledge by not just watching but practicing along the way.

[HTML Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=UB1O30fR-EE&list=PLillGF-RfqbYeckUaD1z6nviTp31GLTH8&index=1&ab_channel=TraversyMedia) will help you to understand HTML very well.

####Build Something!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kt5vs3emi4bv26125i1w.png)

After learning the syntax the next step should be to build something from HTML. Start by creating simple web pages the contains some headings, paragraphs, forms, etc.

It should not take more than a week.

####After getting your hands dirty on HTML, you should start exploring CSS.

##What is CSS?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/elmyzp7omur6zm927xax.png)

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript

##How to learn CSS?

Learning CSS is very interesting. CSS is how things end up looking as you want them on screen, so it is worth being reasonably up to date. You need to be more creative to put many things together to get the beautiful layout for your web page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6e4ymzjz8z7jblaomwlw.png)

Again, start by reading about CSS. [Marksheet](https://marksheet.io) is a good resource for learning CSS as well.

Your next step would be watching [YouTube](https://www.youtube.com/) tutorials from [CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI&list=PLillGF-RfqbYeckUaD1z6nviTp31GLTH8&index=2&ab_channel=TraversyMedia). You will practice things alongside watching tutorials.

Now you have learned the basics of HTML and CSS. Now it’s time to do some practice.

Start by taking a “Responsive Web Design Certification” free course from [Freecodecamp](https://www.freecodecamp.org/).

In this course, you will be learning by practicing. At the end of this course, you have to submit some projects and you will receive your certificate.

Congrats on your first certificate in Web Development.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ewd7uy7c7qc9yvgapwtd.png)

Now the next step is to learn [flexbox](https://www.youtube.com/watch?v=JJSoEo8JSnc&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=4&ab_channel=TraversyMedia) and [CSS grids](https://www.youtube.com/watch?v=jV8B24rSN5o&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=5&ab_channel=TraversyMedia). Now it’s time to make some beautiful layouts.

Now explore [dribble](https://dribbble.com/search/web%20pages) and select some cool web pages and try to re-create them in HTML and CSS. You should be using flexbox or CSS grids.

Now you are actually creating layouts by yourself.

Now it’s time to learn JavaScript.

##What is JavaScript?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3cu38hiitr8m0ttdvoy0.jpg)

JavaScript is a programming language that adds interactivity to your website. It is powerful and one of the most important tools in web development.

##How to learn JavaScript?

Start by reading JavaScript from [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics). Alongside reading start watching [JavaScript Tutorial for Beginners](https://www.youtube.com/watch?v=W6NZfCO5SIk) from YouTube. You should spend two days on learning things from those resources.

After that take a [Modern JavaScript From The Beginning](https://www.udemy.com/course/modern-javascript-from-the-beginning/learn/lecture/8764960?start=90#overview) course from [Udemy](https://www.udemy.com/).

You will learn:
* DOM (document object model) WITHOUT jQuery
* Asynchronous programming with Ajax, Fetch API, Promises & Async / Await
* OOP including ES5 prototypes & ES2015 classes
* JavaScript Patterns
* Regular expressions, error handling, localStorage

This is the best beginner’s JavaScript course.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l8b483qm2qtybl9viqws.png)

Now it’s time to create some JavaScript projects. Start by creating a “to-do list” project in JavaScript and then creating beautiful responsive landing pages.

Now if you are feeling that you are still not good enough in JavaScript and wants to create some projects than I recommend you taking [20 Web Projects With Vanilla JavaScript](https://www.udemy.com/course/web-projects-with-vanilla-javascript/) course from udemy.

You will create different projects that will help you a better understanding of how things work in JavaScript.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/acmwyrgx6l9mn29ld1gw.jpg)

* Give at least 5 to 6 hours daily on learning
* Try to complete HTML CSS in two weeks
* Give more time to JavaScript
* Don’t move forward until you are not satisfied with what you are currently doing
* Try to make your foundations strong
* PRACTICE PRACTICE PRACTICE!!!\

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g5ti7hcp38fgsf8gsce0.jpg)

####Other resources:

You can also explore these sites for learning purposes.

* [YouTube](https://www.youtube.com/)
* [Udacity](https://www.udacity.com/)
* [Coursera](https://www.coursera.org/)
* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/)



I hope you enjoyed this article.
Let me know in the comments if you have any questions.



I am currently on my #100DaysOfCode challenge. To see my daily progress, follow me on twitter [@zeeshanhshaheen](https://twitter.com/zeeshanhshaheen?s=09)