In this article, I will help you learn Web Development by following the shortest path possible. To get this most out of this guide, I urge you to leave all your distractions behind for 10 minutes and focus.

To help anyone and everyone get started, I'll provide you with a collection of excellent free resources to learn Web development.

So let’s get started.

How I Started Learning Web Development

I was in my first year of Engineering, studying Electronics and Telecommunication Engineering. I wasn't at all interested in coding and all that tech stuff.

Until one day.

Accidentally, one of my friends recommended a Udemy Course to me on Web Development. Before that, I didn't even know about Web Development since I didn't have a technical background, and I wasn't trying to learn new skills.

So I didn't know what HTML, CSS, and all that techy stuff was about. My friend let me watch the course on his own Udemy account.

Well, I ended up watching the course two hours a day because I liked it. But at that time I wasn't practicing coding on my laptop like many of you.

Within days, I learned the basics of HTML and CSS. After that, I started up my laptop and tried to create websites based off what was taught in the course.

And in this way I started to learn about Web Development.

How to Get Started as a Front End Web Developer

frontend
Source: GitHub

Here you can see a broad roadmap for front end Web Developers. If you haven't seen it before, read through it to get a sense of the overall path.

There's a lot to take in – but in this article, I am going to help you create a shorter path to learn Web Development.

Before we dive into the skills you need to learn to become a web developer, you should know that web development isn't a single concept or subject. It has numerous subfields in it.

You can focus on front end development, back end development, graphic design, and so on. We'll start with the front end now.

For Front-end development, you need to learn HTML, CSS, JavaScript, and a library or framework like React, Angular, or Vue.js.

So now let's talk in more detail about what front end development is and what you need to learn.

What is Front End Development?

The front end of an application typically refers to the layer that represents the UI (user interface). This can include anything from a static site with HTML and CSS to a full React app that powers the UI. - Colby Fayock

There are some basics you'll need to know for Front-end Web Development. They are:

  1. HTML
  2. CSS
  3. JavaScript

HTML and CSS use to create static websites.

What is HTML?

HTML stands for Hypertext Markup Language. It is used to add content to a website. The information which you see on a particular website is only visible because of HTML. You can run HTML code in an IDE like Visual Studio, Sublime Text, Atom, and many more.

HTML consists of tags like <h1> (for heading) and <p> (for paragraph).

For instance:

<!DOCTYPE html> 
<html>
<body>
  <h1>Hello, Readers</h1>
  <p>You are good to go.</p> 
</body>
</html>

This is some basic syntax for HTML. We have to write code inside body tags to display on Web pages. Here we're displaying an h1 tag with a paragraph tag.

The output of this code will look like this:

ht

What is CSS?

CSS is an acronym for Cascading Style Sheets. You use it to create styling for a Website so that it looks attractive.

Once again, inspect the above HTML code. It doesn't display background color or shadow. This is because we haven't applied CSS to it yet.

So, CSS enhances HTML and tells elements how to display on Web pages.

CSS consists mainly of 3 types:

  1. Inline CSS.
  2. Internal CSS.
  3. External CSS.

To help you to understand a bit better, we will use Inline CSS. Inline CSS is a type of CSS where you can add style properties inside HTML tags.

For example, here we have added a style property to the body tag. We just changed the body's background-color to pink:

<!DOCTYPE html> 
<html>
<body style="background-color:pink;">
  <h1>Hello, Readers</h1>
  <p>You are good to go.</p>
</body>
</html>

And here is the output:

css

Isn't it cool?

What is JavaScript?

So what about dynamic websites? That all happens thanks to JavaScript.

Even Google has mentioned JavaScript as the most popular programming language out there these days.

java
Source: Google

JavaScript is a programming language used mainly on the client-side to help web pages be more interactive.

While HTML and CSS are languages that give structure and style to web pages, JavaScript provides web pages with interactive elements that engage a user.

Let's explain how it works with an example.

Think about your house. Building the foundation and framework of your home with bricks and cement is all a part of HTML. Painting and decorating your house is CSS's job. And integrating technology – like IoT – is part of JavaScript.

That’s it. Front-end Web Development consists of HTML, CSS, and JavaScript.

Once you know the basics, you can add frameworks and libraries like React, Angular, or Vue.js to your skillset.

These are the basic skills you need to start as a Front-end Web Developer.

How to Learn Back-end Development

backend
Source: GitHub

Now let's talk about Back-end Development.

For Back-end Development, you'll need to learn Node.js, Express, MongoDB, and Mongoose.

But What is Back-end Development?

Back-end development is also known as server-side development. It is the practice of communicating between the database and the browser.

Back-end Development languages and tools include:

  1. Node.js
  2. Express
  3. MongoDB (Including Mongoose)

These three skills are important to learn if you want to become a Back-end Developer.

What is Node.js?

According to Node's documentation, Node.js is an open-source and cross-platform JavaScript Runtime Environment. It is a popular tool that you can use for basically any type of project.

Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. This helps Node.js be very performant.

Now, What is Express?

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. - Express Docs

You can think of Express as an NPM package that helps Node.js applications.

Let me explain how it works through some code. The below code is the basic syntax for Express.

const express = require('express');
const app = express();
const port = 5000;

app.get('/', (req, res) => {
  res.send("Hello, World")
})

app.listen(port, () => {
  console.log("App is running on port 5000");
})

Here we are installing and then requiring Express. You just initialize the app as express() and the port as 5000.

Then we request the '/' route to respond with Hello, World.

When our app is running, we log that it is running on port 5000.

Lastly, What is MongoDB?

Before proceeding further, I have to explain a crucial concept: databases.

To create websites, you need a Database. We know that websites require databases to store information. The database helps us store user information, show information based on user requests, and much more.

Databases come in two types: SQL and NoSQL.

What is the difference between SQL and NoSQL?

  1. SQL is a relational database, while NoSQL is a non-relational database.
  2. SQL is represented in tables, while NoSQL is in key-value pairs or JSON format.
  3. The most popular SQL databases are MySQL and PostgreSQL while the most popular NoSQL database is MongoDB.

Now let’s talk about MongoDB. According to mongodb.com,

MongoDB is a general-purpose, document-based, distributed database built for modern application developers and the cloud era.

When you need to work on a database, MongoDB is a great NoSQL option.

You also have to learn Mongoose.

Mongoose helps you work more easily with MongoDB.

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks, and more, out of the box.

Those are the basic technologies you need to learn to become a back-end developer.

Once you've learned all these skills, you can call yourself a Full Stack Web Developer.

By the way, you might have heard people referring to certain tech stacks, like "MERN" or "MEAN".

Well, if you choose to learn React.js, you will be a MERN (MongoDB, Express, React, Node) Stack Web Developer.

With Angular.js, you will be a MEAN (MongoDB, Express, Angular, Node) Stack Web Developer.

Free Resources to Learn Web Development

image-309
Photo by Brooke Cagle / Unsplash

If you want to learn to code, this is the best time to dig into it.

And to motivate you, here are some facts:

  1. According to Glassdoor, the average Web Developer salary in the US is $68,524/yr. Much more than we expect to earn during the pandemic.
  2. There are a ton of great and high-quality free resources out there. Yes, you can learn everything related to Web Development for free.
  3. You can start a Web Development Startup without a single cent. I have started something similar.
  4. You can earn money in numerous different tech-related fields.

And the list could go on.

Before we get into these resources, I want to let you know that I use or have used all these languages, tools, and resources professionally. There are no affiliate links in the article, so there are no resources here that will help me earn money.

I have also spent about 10 days researching more about these resources. I've consulted more than 50 top web developers so I can provide free access to my readers.

Do note, though, that some of these resources are free up to a point. So you can check those out and see if you want to invest more.

I know many of you are beginners and don’t know the best resources to try. So I will keep it simple.

You can check all these websites and even bookmark your favorites to come back to again and again. Alright – let's check 'em out.

freeCodeCamp

The most crucial website I've ever visited in my life is freeCodeCamp. They have a full 3000-hour web development curriculum, and they've recently added certificates for scientific computing, data analysis, and machine learning with Python as well.

In addition to the curriculum, freeCodeCamp has a publication (where you're reading this article), a YouTube channel, and a Forum where you can get help with your programming problems.

You can also sign up as a subscriber, and Quincy (freeCodeCamp's founder) will email you some of the latest tech-related articles from freeCodeCamp's publication every week.

Want to know why Quincy founded freeCodeCamp?

Quincy Larson summarises in a podcast interview as follows:

freeCodeCamp is my effort to correct the extremely inefficient and circuitous way I learned to code. I’m committing my career and the rest of my life towards making this process as efficient and painless as possible. […] All those things that made learning to code a nightmare to me are things that we are trying to fix with freeCodeCamp.

Udemy

Yes, you can still get free courses from Udemy. Just search for Free Web Development Course, and it'll filter out your options. You'll see both paid and free course, but you can just choose the free ones and enjoy.

If you remember, my first programming course was from Udemy – the one my friend signed me up for. So it helped me get my start.

Documentation to Reference

When I want to learn about or implement a new concept, I visit Google. And Google often recommends the MDN or a tool or language's official documentation.

This is also helpful when I forget how the details of a specific topic (like Flexbox, for example) work.

W3Schools provides tons of short reference tutorials for many topics including Java, Python, JavaScript, jQuery, React, Angular, AJAX, SQL, Node.js, Raspberry Pi, Artificial Intelligence, Machine Learning, Data Science, NumPy, SciPy, Matplotlib, and MongoDB.

When I was studying engineering, I had to learn Java. And I didn't want to read a 500 page book for that. So I jumped onto w3schools to learn the language. Since I knew C, the logic was the same and there were just some syntax changes and new concepts like encapsulation, inheritance, polymorphism, and so on.

Believe it or not, I learned Java basics in about two days.  

YouTube Channels to learn Web Development.

I have personally used every one of these channels for years and have learned a lot from them. I've also consulted a bunch of working web devs to help provide you with the best resources out there.

1. freeCodeCamp

freeCodeCamp's YouTube channel was the first one I tried out to learn Web Development after Udemy.

They publish courses on a wide range of topics from Python and Data Science to Game Development, JavaScript, Design, and more.

It's one of the largest programming-related channels on YouTube and they release new full video courses a couple times a week.

2. Clever Programmer

Rafeh Qazi, a tech expert, was a freelancer and then shifted his path to begin directly teaching students.

He started his YouTube Channel with Sonny Sangha and a few others to teach programmers through creating clones of popular websites.

I have used those tutorials to build clones of Amazon, Instagram, and more.

My YouTube history has tons of Web Development and App Development videos. And YouTube recommends similar topics to me. So one day, I got a recommendation to try building an Instagram clone with React.js, so I checked it out.

3. Traversy Media

Brad Traversy is the creator of Traversy Media. He is a freelancer, works for companies, and runs his own business.

Along with that, he runs a YouTube channel to teach Web Development.

I have been following him for a long time. Throughout his career, he's worked very hard and let his health suffer. So what did he do - quit? No – he invited other YouTubers to teach his students with him.

What great passion. Hats off to Brad Traversy.

Through Brad's channel, I have learned Chart.js, Pusher, Full Stack React, and Django.

4. Academind

I wanted to learn more about the MERN Stack when I was a beginner. So I went to Udemy and took a course.

I didn't know about Academind at that point but I learned about it from the course I took. So I went to check out his YouTube channel and really enjoyed it – so I subscribed.

5. Stefan Mischook

We all get stuck at some point. We might start thinking, how can I possibly become a web developer? How can I ramp up my learning? Are there any jobs out there for me, and how do I apply?

All these questions knock at our mind's door, and we need to answer. To help you tackle these questions, Stefan Mischook's is the best channel for you.

He answers many general questions that programmers and developers might while they're learning to code or gaining new skills.

6. London App Brewery

Angela Yu and her team run this YouTube Channel. And indeed, I am her biggest fan.

Why? Because my Web Development journey began thanks to her.

Other than Web Development, she teaches Flutter, iOS Development, and many more topics.

7. The Net Ninja

When I was learning the MERN Stack, I discovered that that React Native is simple enough. When I wanted to start learning about it, The Net Ninja helped me out.

There are tons of tutorials here that explain Vue.js, Angular, React, React Native, Flutter, PHP, Firebase, CSS, JavaScript, GraphQL, and more topics.

Code Editors for Web Developers

As a web developer, you'll need a good code editor to help you in your work. Let's look at a few of the most popular editors now.

Visual Studio Code

Personally, I use Visual Studio Code (or VS Code) for all of my projects. I really like its many features like live share, the built-in terminal, dark mode, and tons of extensions.

Extensions such as Prettier, ES7 React/Redux/GraphQL/React-Native snippets, and Live Server are a regular part of my life.

I am also learning Java for my placement. Many of you may have heard about NetBeans and all, but I am using VS Code for that.

In Visual Studio Code, you can run every programming language, as well as frameworks like React Native and Flutter.‌

Sublime Text

Sublime Text is another popular editor. I have not used it so far, but many of my friends do.

It has more than enough features for a beginner to use while learning Web Development.

Want more?

Want a full list of resources I recommend?

Here is a list of 80+ resources for Web Development.

80+ Free Resources for Web Designers and Web Developers in 2021.
If you want to code, it is the best time to dig into it. There is no better time to start than right now. There are tons of reasons for this and If I explained it, it will be going to be more than…
0*x3-FPO0RRtaz7tM2

Why Should You Be a Full Stack Web Developer?

I know some of you might be a bit overwhelmed after learning about Web Development and all the different skills you need to learn.

Knowledge is everywhere and it's vast.

But it's totally worth it to learn these skills. Let's talk about some of the benefits that come with being a web developer.

Benefits of being a Web Developer

  1. Compensation (it's quite good)
  2. The industry is not going anywhere any time soon
  3. The work is fun and interesting
  4. You can work as a freelancer or for a company
  5. You can work from home or anywhere else

So...how much can you earn?

glass
Source: Glassdoor

According to Glassdoor, the average salary for a Full Stack Web Developer in the US is $105,813/year.

What about app development?

Want to be an App Developer? You can dive right in.

Suppose you learn React.js to become a MERN Stack Web Developer. The same concepts apply in app development.

For example, React Native, a mobile app framework, uses the same concepts as React.js to create mobile applications.

To get started, you don't need to learn any other languages or major concepts. Focus on React.js and you'll be able to create your applications.

Getting Started with React Native for Beginners
Learn everything about React Native-- An Introduction.
0*TLJgBflAr1c6NMv7

Wrapping Up

Congratulations on working your way through this long post.

It was just a brief guide for Web Developers, to help you get started in the field. You can bookmark this article for further use or even share it with your friends who want to start their careers as a Web Developers, too.

Good luck :)

Thanks for reading!

This article is a combination of 3 stories I wrote on Medium.