Web Dev 101 - A Roadmap for Beginners

Photo by Annie Spratt on Unsplash

Welcome to Web Dev 101! This course has been designed for absolute beginners. Take a look at some of the topics and if all this seems too easy, you should move on to Web Dev 102 (Coming soon)

In this course you are going to,

  • Learn about the basics of HTML, CSS and Javascript.
  • Build a few simple applications.
  • Get introduced to some advanced concepts like Design Patterns and Frameworks.

The next course will delve into the details of these advanced concepts.


There are two softwares that you would need to start this course.

VS Code

You can code in Notepad as well, but that would be boring. Code editors provide you with syntax highlighting and a lot of other features that would make your learning experience a lot better.

Chrome browser

Most probably you already use it.

Read this first

There is a ton of learning material already available online. The objective behind this course is to collect the best resources and provide you with a structure that you can follow with relative ease.

Each heading is linked to a study material. Read the description below the heading so that you get the idea about what you are going to learn.

Active learning is the only way you can learn to code. It might seem faster if you are just reading but at the end you wouldn't retain anything. Try out all the examples on your own. If you run into any problems, feel free to ask in the messenger.


  • HTML
    • Your first HTML Page

      Let's start with the basics first. What is HTML? What are tags, elements and attributes? How do you structure an HTML file? Follow the link above and return here once you are done.

      Did you see the example at the bottom of the page linked above? That is the most basic HTML page you can create. Save it using sublime as mypage.html and open it using a web browser. It should look like this.

    • HTML Basics from MDN.

      Now that you know what a basic HTML page looks like, let's go into a bit of detail. Mozilla Developer Network (MDN) is a great resource. They have tons of tutorials and guides. We will be using many of their resources in this course.

      In this section you will learn about, opening and closing tags, nested and empty elements, doctype and some of the most commonly used tags. Follow along with the tutorial and at the end you would have a page that looks like this.

    • Forms

      Now, you will learn about forms, basic input elements, labels and buttons. Forms are used to capture user input just like in the real world. Go ahead and read the doc.

      Don't worry about the section on styling for now. Just read and understand why we use forms and how to create them. This is how your form would look without styling and with styling

    • Further reading, creating layouts using tables
  • CSS
  • Javascript
    • Hands-on introduction

      This module should take you from 0 to 1 in no time. Do not worry if you don't understand something. You can always ask for help via direct messages.

    • Data types, conditions, loops, objects and functions.

      It's time for a more detailed look into the basics. You would have learned some of these things in the previous modules as well. Again, Keep calm and carry on.

    • Naming conventions and coding standards.

      Writing beautiful and organised code is probably the first thing that differentiates the average developers from the great ones. Understand how to name variables and functions, learn how to structure your code so that it looks great.

      Coding is a social activity. Any large project would have mutliple developers and you do not want people scratching their head trying to figure out what you have written.

    • Basics of jQuery
    • JS Frameworks and Libraries

      A few years ago, jQuery was the boss. Everybody used it. But now there are so many frameworks and libraries that it's difficult to keep count. Let's see why we need frameworks and what are the most common ones.

      ReactJS, Angular, VueJS are the most commonly used frameworks these days (August 2020).

    • Design Patterns - The revealing module pattern

      By now you must be a bit comfortable with javascript and it's basic concepts. Let's look into design patterns now. Basically, design patterns are ways to organise your code so that it would be managable and understandable even when your application grows to 1000s of lines of code.

      We will begin with the revealing module pattern. Go ahead and read about it.