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,
- 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.
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.
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.
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.
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.
- Further reading, creating layouts using tables
- Your first HTML Page
Now that you know the basics of HTML, let's move on to CSS. If HTML is the skeleton and muscles, CSS would be the skin.
First off all, let's see how we can add CSS to our HTML documents.
- CSS Basics - selectors , colors , fonts and text
- The box
Cascade and inheritence
By now you should have a basic understanding of what CSS is and how to apply it to HTML elements.
It's time for some details. Here you will learn how the rules are applied, the meaning of "cascade" in CSS, and inheritance. Make notes but don't try to remember everything. You can revisit this anytime you run into problems.
- Selectors - Classes, IDs and pseudos.
- Adding styles
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.
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
We will begin with the revealing module pattern. Go ahead and read about it.
- Hands-on introduction