As a naive beginner, I used to think that
if I learn HTML, CSS and Javascript, tech companies would fight over who wants
to hire me as a Software Engineer. In reality, I could not be more wrong. That’s because in today’s day and age,
very few people write web apps with vanilla CSS or Javascript. There are so many different ways to write
CSS. And for Javascript, we have 3 frameworks that
are widely popular. Knowing which of these technologies to learn
is a problem that confuses many beginners. Even if you figure out what technology you
want to learn, there’s still one big question that needs to be answered. And that is, how do you learn everything efficiently
for free? By the end of this video, you’ll know the
answer to all these questions. Not only that, you will also have all the free
resources that you need to go from an absolute beginner to an employable Web developer. On top of that, you will also know the 3 big
mistakes that you need to avoid. I will share these along the way. Before we dive deep into different technologies,
we need to understand how a website works. At its core, a website is nothing but a bunch
of files that are stored on a computer that is called a server. You can access these files on your computer
using a browser like chrome or firefox. Your browser sends the server a request to
access these files using the internet. Along with sending the files back, the server
might choose to do other operations like storing any useful information that came along with
the request. Server does this with the help of a Database. If you are writing code for what you see in
the browser, you are doing front end development. And if you’re writing code for what the
server does when it receives a request, you are doing back end development. And if you happen to work on both server and
browser code, you are doing full stack development. We’ll discuss both front end and back end
development in this video. But, you don’t have to know both to get
a job. Even if you master one of these, you are golden. Let’s start with front end development. As you might already know, HTML, CSS and Javascript
are the basic building blocks of front end development. To understand the role of each of them, let’s
take an example of this “Sign in” button on Netflix. HTML is what tells the browser that there’s
going to be a button here. CSS is used to define that button is going to
be red and the color of the text is going to be white. Javascript tells the browser what action to
perform when this button is clicked. Now that you know what each of them does,
let’s see what’s the best way to learn them. And this is where most beginners make their
first big mistake. They spend way too much time learning HTML,
CSS and Javascript. This is how most people learn Web development. They get their first course on HTML and CSS
which takes them anywhere between 6-10 hours. And then they do a Javascript course which
is another 10 hours. Even worse, some of them buy these 64 hour
Web Developer bootcamps. At the end of spending tens of hours, they
still can’t write a basic web app themselves. To understand why this doesn’t work, imagine
that you want to learn football and I feed you hours and hours of footage of Ronaldo
or Messi playing football. Do you think you can become a professional
football player by doing this? Do you think this is how Ronaldo and Messi
learnt to play football? The only way to become better at your craft
is by doing more and more of it. So, we want to spend the minimum amount of
time watching and more and more time doing. To learn HTML, CSS and Javascript, go to W3
schools and do some hands-on learning. W3 schools provides an interactive environment
where you can run your code right there in the browser. Feel free to play with the code to learn faster. For HTML, you want to go through all the exercises
until HTML graphics. For CSS, you want to cover everything until
the CSS grid. And for Javascript, you want to do everything
until JS HTML DOM. Once you’re done with the tutorial part,
test your knowledge by doing the quiz and exercises they have. When you complete these basics, you’ll
realize that CSS is very time consuming. That’s because it’s very hard to debug. With CSS, you’ll not get any error messages
that will tell you what’s going wrong. I can’t even calculate how many hours I
spent trying to figure out why the header doesn’t look the way I want. Or why different components don’t align
the way I intended. Another problem with CSS is that it’s very
verbose and the files can become unmanageable very quickly. That’s why you need a CSS framework that
will ease your life. There are many options here but I will only
talk about 2 popular ones. The first option is Bootstrap that comes with
pre-built components. For example you get all these headers out
of the box for free. But there are 2 major problems with using
Bootstrap. One, your website will look very similar to
countless other websites that use Bootstrap. Two, you would not have complete control over
what your website looks like. In theory, you can customize the components
you get from Bootstrap but at that point, you are again writing your own CSS. A better option that I personally prefer is
Tailwind CSS. Tailwind CSS gives you a good amount of control
over the look and feel of your website. It’s unbelievably easy to use. To be honest, when I used Tailwind CSS for
the first time, I was questioning myself if I needed to learn CSS before learning Tailwind. Another advantage of using Tailwind is that
it gets rid of all the unused CSS automatically for you. As a result, your website is lighter and
loads faster. The best part about Tailwind however is its
incredible documentation. To learn Tailwind CSS, I want you to go to
this documentation and get acquainted with everything below Core Concepts. You don’t need to remember anything. Just need a general idea of how it works. To learn by doing, go to the official Youtube
channel of Tailwind labs and follow this video where they build Instagram stories UI step
by step. This will give you a good feel of how powerful
Tailwind is. For every new concept in the video, read the
documentation to learn more about the related things. This is all the Tailwind CSS we’ll do for
now. Later in the video, we’ll come back to it when we build a big project using Tailwind Now that we have found a better way to write CSS, let’s talk about how to improve our Javascript workflow. If you use Javascript that you have learnt
so far to build a project, you’ll see that HTML and Javascript live in separate
files. To update a component of your website, you’ll
have to update multiple files. This is the first problem with our current
workflow. Another problem with using just Javascript
is that you’ll have to do a lot of manual lookups of HTML elements if you need to update
something on the Webpage. To solve these issues, we will use a Javascript
framework. We have many options here but I will discuss
2 popular ones. First option we have is Angular which is a
full fledged framework. It has a strong opinion about how a website
should be made and is hard to learn for the beginners. React on the other hand is a Javascript library
which gives you a lot of flexibility and it is a lot easier to learn. Once you know Javascript, getting started
with React is very easy. Official documentation of React gives 2
ways of learning. First one is “learning by doing” and the
second one is “learning concepts step by step”. By now, you already know what we prefer on
this channel. We’ll choose the first path and dive head first by doing this official “Intro to React” tutorial where we build a popular game called “tic-tac-toe”. Once we complete this, we’ll also look at all the Main concepts of React. Now that we have a good understanding of React,
we will build some projects. For that, go over to this video by Brad from
Traversy Media. In this video, Brad builds a basic Image Gallery using React and Tailwind. Just FYI, he uses VS code as code editor. So, make sure you have VS code set up before
you start on this project. Follow along with Brad to make sure you’re actually learning at every step. After this, head over to this video by Sonny
where he builds a Linkedin clone using React. He will also introduce you to some new technologies
like Redux and Firebase which will help you level up your front end skills. This channel is by far my favorite channel
for web development. If you have time, I recommend that you check
out his other videos where he builds Hulu and Facebook clones using NextJS. NextJS is an improved version of React and
if you already know React, Sonny would make it very easy to follow along. Now that you know front end development, it’s
time to make your portfolio website and you’re done. That's the second big mistake most people
make. They don’t build enough projects. Portfolio website is just to showcase your
work and you should make it only when you have enough projects to show. Easiest way to do this is to take inspiration
from Sonny’s channel and build clones of some popular websites that you use. Another way to do this would be to build websites
to ease your daily life. You can make a note taking web app or an app
to track your workouts. Choose these projects carefully because we’ll
come back to these apps and add a backend to them when we are done learning back end
development. In summary, show the hiring managers that you are
capable of making working web apps and you’ll automatically get preference over other candidates. If what we have discussed so far is already
a lot for you, you can stop here and keep honing your skills until you become a full
time front end developer. If you’re still hungry to learn more, we
can discuss back end development. As I already mentioned, in backend development,
you write code for the server so that it can do operations like storing or deleting data
or maybe calling some other server to get some information. For back-end development, you again have multiple
choices. You can learn Java with Spring or you can
learn Python with Django. These options have their own advantages and
there's a reason that they exist. Since we are interested in a fast route in
this video, I would recommend learning Node with Javascript. The main reason for this is that since you
have already learnt Javascript, learning Node would require the least amount of effort. At the same time, Node is very high in demand
and is becoming more and more popular. But what exactly is Node? Before Node, you could run Javascript only
in the browser. Node is just a way to run Javascript on the
server. The actual logic or code of what to do would
still be written in Javascript. Node will just run that code for you on the
server. Just like in the front end, there are libraries
that make it easier to write code for the back end. One of these popular libraries is called Express. We’ll get into how to learn Express in a
moment. With the help of Express, we can decide what will happen when a user connects to a particular particular path on our website. For example, in the case of this website,
“shopify.com” is the name of the website and what comes after that is the path. Among many things that you can do at a particular
path, one option you have is to store the data provided by the user. That’s exactly what happens when you go
and sign up to a website. The website stores the information you provide
in a Database. There are many kinds of databases that you
can use here. The ones that store data in the form of a
table are called SQL databases and the ones that don’t use table format are called NoSQL
databases. In our case, we will learn a NoSQL database
called MongoDB. As you might have already observed from the
discussion we had so far, writing backend code and adding or updating information in
your database goes hand in hand. So, we will learn both Express and MongoDB
together. For that, go to this video by Traversy media
and build an app using Express and MongoDB from scratch. Since we are learning directly by building,
some of the concepts might not be clear at the beginning. So, refer to the documentation whenever you’re
stuck and look up things online. This is how you’ll do things when you become
a Software Engineer. So, learn this process early. Now that we have seen how things work separately
in the front end and the back end, let’s bring it all together. To do this, go and build a Whatsapp clone using
this video by our friend Sonny. This tutorial is beginner friendly and will
take you through the entire process step by step. Once you're done with this, I want you to
go back to the apps you built at the end of learning front end development and add a back
end to them. By now, you have learnt all the skills you
need, you’ve built a portfolio of projects and you’re ready to apply for the jobs. This is where people make their third very
big mistake. They don’t prepare for the interviews. For smaller companies, you might be able to
get in just through your skills. But in bigger companies, on top of these skills,
they ask you specific kinds of questions in the interviews. All the hard work that you put into learning
Web Development might become useless if you can’t pass these interviews. For the interviews, you need to know the general preparation process. For that, watch this video at the top. I will see you in the next one.
