Learn web development

Web Development Study Plan And Best Free Resources

Do you want to learn web development? If yes you just hit the jackpot! Why? Because we have gathered up the best resources available on the internet and made a study plan for you to learn the most in fewer days! Join our discord server and post your daily learning achievements with the #30DayChallenge channel/hashtag. (Join us on discord here: https://discord.com/invite/Qwv3Eyw)

Finding Help

If you ever get stuck on these tutorials and guides that I am going to share below, which I’m pretty sure will happen quite a few times since these resources are from different people, here’s what to do:

  • I’m stuck!: The first thing you can try is Googling: Just search on google. There’s a very likely chance that the problem you have faced have been faced by someone else and has been answered on the internet.
  • “I don’t remember how you do this?”: For this problem too you can try google. But if it’s something you don’t remember about HTML, CSS, JS just look it up on w3schools. These guys got one of the best free documentation for you to look up anything when you forget it. Don’t worry you don’t need to memorize anything because even professional Programmers do these things every day: looking upon w3schools and other similar websites. This is one of my favorite things about programming. They don’t want you to remember stuff since you are always just a click away from an answer while working on a computer 🙂
  • Still, stuck? Ask us on Discord (Join here: https://discord.com/invite/Qwv3Eyw) Or you can ask on other popular forums like https://stackoverflow.com/, which is the most used forum made especially for Programmers like you and me.

The Preparation

Day 01

Let’s start by preparing your plan. For this, I highly encourage you to read this article https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Thinking_before_coding
Also, go watch this interesting video on how to learn efficiently.

How to Study Efficiently

Now let’s start by knowing what we are getting ourselves into a bit more: This article here explains how the internet works in a brief and easy to understand language. By the way, take note of this website MDN Web Docs. They discuss a lot of web development topics that every web developer should know. They also have guides and tutorials on many programming stuff.

Day 02

Now let’s find a bit more about web development. Rest easy. No articles to read today. I know reading is kinda boring, so I’ll try my best to share videos more. But one thing to note is that, you will have to read a lot when you become a web developer. Documentations, guides, articles to keep you updated and much more.


While watching this 2 part video series, be sure to take notes. It’s really worth and you will find out a lot about how the web development industry works.

Day 03 & 04

Lets Learn HTML Today!

FreeCodeCamp.org is one of the best websites to learn Programming from. They got 100s of hours of video tutorials on their YouTube channel as well as countless tutorials and articles on their websites. So do add them to your bookmarks :D.


Day 05, 06 & 07

One thing I forgot to speak about was Code Editors. Choosing a good code editor can help you a lot in your coming web development days. So choose a good one that fits your likes and needs.

My favorites are:

  • VS Code (Really powerful)
  • Sublime (Very lightweight)
  • Atom (Like a combination of the previous ones + Beautiful UI!)

Let’s make you familiar with one another cool website: https://www.w3schools.com/css/. This is one of the websites you will find quite a lot useful in the early stages of web development. This is like a reference book that you will use whenever you don’t remember something.

Day 08 & 09

Time to learn bit more about CSS: Flexbox and Grids. Check out this awesome visual blog post on FlexBox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

For Grids watch this video below:


Day 10,11,12,14

Time to Learn JavaScript! Finally the exciting part! I’m sure you will love it. If you got any doubts ask us in our discord channel 🙂 (Join here https://discord.com/invite/Qwv3Eyw).

Watch 3 of these videos straight in order and you can finally call yourself a JavaScript Programmer (and maybe add it to your resume).

Putting Everything Together

Make Netflix Landing Page Clone – Day 15, 16

Making projects can help you persist the knowledge you gained in your memory. And doing Projects can open you to new ways of thinking and seeing how others approach a certain Programming Problem can help you see things in a new set of eyes.
While doing this problem you might find things you don’t understand or don’t make sense. If you do, don’t be shy to search on google. No ones gonna pity you for that. Instead I would encourage you to google things. But never, ever copy paste code. And even if you do, do at this one condition: Make sure you understand it from A-Z of that code.

After completing this Project you can upload this onto your GitHub account. But what’s that? Let’s find out tomorrow 🙂

Day 17, 18 – Git and GitHub

After this watching this short introduction I’m pretty sure that you are excited to learn more about Git and GitHub!

Now watch this video series on Git and GitHub: https://www.youtube.com/playlist?list=PL4cUxeGkcC9goXbgTDQ0n_4TBzOO0ocPR.

After this be sure to upload your NetFlix onto GitHub.

Nodejs, NPM, and JavaScript Frameworks

Day 19 – Node

Up till now we could only run javascript on our browser. Now what if we wanted to run it on our computer outside the browser? That would be cool right?

Well, here comes Node. Let’s clear some misconceptions first. Nodejs is not a programming language. It’s a run time environment. What this means is that it’s literally just making a place for you to run javascript code outside of your browser. Simple isnt it?

Now, this video would be more than enough to get you started on Node. Try to spend 3 hours on programming today 🙂

DAY 20 – NPM

If you have used Linux or Mac before you might be familiar with package manages like apt, dnf or brew. Well, npm is something similar.

Day 22, 23, 24 – React

Finally! You are learning a JavaScript framework. Here you will put use of all that you learned up till now. HTML, CSS, JS, Node, NPM. Let’s get straight into it with this awesome crash course by Mosh

Day 25, 26, 27 – Express & MongoDB

After finishing this section you can call yourself a MERN Stack developer. MongoDB, Express, React, and NodeJS. Congrats! If you have made it till here you are truly awesome and that’s something to be truly proud of 🙂

2 thoughts on “Web Development Study Plan And Best Free Resources”

  1. That’s simply awesome.
    A kick start for web development is here.
    Guess what, I’m gonna recommend this to all my friends who are aiming to learn web development.
    Anyways the major drawback for this generation is having many resources. And you have got that point and made it crystal clear.
    Thanks dude.

  2. Thanks for the feedback Harsh. Yup, there are many resources and that turned out to be a problem now. So why not make something like this we though 🙂

Leave a Reply