For every web developer who has a job, there are at least 10 who are stuck in the endless loop of learning HTML, CSS, and JavaScript again and again. That's because people underestimate what it takes to become an employable web developer. On this path, there are so many

different technologies to learn that many people give up midway. This video will make sure that you are not one of them. I'll also cover three mistakes that you need to avoid at any cost. Let's get started. Web development contains two parts: front-end development and back-end

development. Front-end developers program the feel and behavior of a website. This is what a user actually experiences when they visit a website. Back-end developers make this behavior possible. They do some things behind the scenes that users don't get to see. Think of it this way: when you

go to a restaurant, you just experience the dining area, the tables, chairs, menu, and the overall ambiance. That's your front end. Now, back end would be the kitchen of the restaurant. It's where all the behind-the-scenes action happens: ingredient preparation, cooking, and order

fulfillment. All of that happens in the kitchen. In a restaurant, we also have a server. What would be the equivalent of a server in the web development world? If you're thinking that the answer is a web server, that is not correct. I'll answer

this when I cover back-end development in detail, but if you think you know the answer, leave a comment anyway. Let's start with front-end development. HTML, CSS, and JavaScript are the building blocks of front-end development. To understand what each one of them exactly does, let's imagine that you are building

A house's HTML would be the blueprint of this house. What are the different rooms in the house? How many bathrooms will be there? All of that is in HTML. For example, on YouTube, HTML is what decides that there will be a like and subscribe button here. CSS is like an interior

designer that decides what your rooms look like. For YouTube, it decides the shape, color, and size of the Subscribe and like button. When you hit the Subscribe button, the color of the button changes. That's also CSS doing its magic. JavaScript is like an electrician that

installs smart home features in your house. In the YouTube example, when you hit the Subscribe button, JavaScript sends a request to YouTube servers to update the subscriptions of my channel. YouTube servers will store this information and use it to recommend my next videos to you. Now that you

understand the basics, let's see how we can learn HTML, CSS, and JavaScript. And this is where most people make their first big mistake. They spend months, sometimes even years, learning HTML, CSS, and JavaScript. Don't get me wrong, I'm not saying that basics are not important, but

the basics are just the starting point. There are a whole lot of other technologies that you need to learn in order to become an employable web developer. So I would not spend too much time here. I'll just learn the top 20% concepts that cover the 80% of use cases.

I'll learn the remaining concepts in the next steps to learn and test my knowledge at the same time. I'll go to W3Schools for HTML. I'll start from the top and do everything until HTML graphics. For CSS, I'll do everything until CSS grid. For JavaScript, I'll cover

everything until JS, HTML, DOM. I will add all the links to the resources in the description. Congratulations, you have covered 15% of what needs to be done to become a web developer. Let's keep going. When you start working with CSS, you'll see that same things repeat again and

again. You'll set height, add padding, and fix alignment of different objects, and so on. And when you do this for so many objects in your web app, your CSS files start becoming very big and hard to manage. On top of that, debugging becomes a huge pain because there is so much

repeated code. To solve all these problems, you would want to learn a CSS framework. Now, there are so many different frameworks that you can choose from. Different people prefer different frameworks for different reasons. My reason is very straightforward: I would choose a framework that is easiest to

learn. Once I know the basics of CSS, I want to be productive as fast as possible. If you're someone like me, you would go for Tailwind CSS. Tailwind is a utility-first framework. In other words, Tailwind already has all the repeated code pre-written. You just need to go to

your HTML elements and use it. This makes Tailwind very easy to pick up for beginners to learn Tailwind quickly. You can go to the Tailwind playground and play around with the code. You can read their beautifully written documentation and test what you are learning in the

playground. If you already know HTML and CSS, they should be fairly straightforward. If you need more help, you can also check out the official YouTube channel of Tailwind Labs. We have covered another 5% with Tailwind. Let's move on to the JavaScript framework now.

Just like CSS frameworks, we also have JavaScript frameworks to make our life easy. There are again many popular options here, but we will only talk about the most popular option, which is React. Technically, React is not a framework, it's a library, but that's not important

for now. React makes building user interfaces more manageable by breaking them into small reusable components. React has a virtual DOM that allows it to update only part of the web page rather than rendering the entire thing. If you don't know what that means, don't worry about it; you will learn as you go.

But why did I pick React over all these other options? My reason remains the same: I want you to get to a stage where you are building your own projects really fast, and React is among the easiest to learn and most in demand at the same time. So, how do we learn React

effectively? The official React documentation has made it very easy for us. They have a quick start guide which, according to them, covers 80% of the React concepts. This guide also contains a walkthrough of how to build Tic Tac Toe in React, and they also teach you how

to think in React. There's a Learn React section that I highly recommend you go through, but if you are short on time, you can move on to the next step. With React basics, you have covered another 10%. So far, you have just learned the basics of

a few technologies, but learning technologies and actually applying them to solve new problems are two different things. And that's the gap we are going to bridge now. With everything that you have learned so far, if I give you a new web app to build, most people are going

to struggle with it and that's totally fine. Struggle is where you actually learn. So if you're someone who enjoys the struggle, more power to you. Please go ahead and start building because that's how you learn the most. But for others who need a little bit of hand-holding in

the beginning, I have a recommendation for you. You can start following along with someone who's building a real-world application on YouTube. You'll find many people building clones of popular applications like Amazon or Netflix. My personal favorite is his channel by Sonny S. His videos will introduce you to

popular patterns in React. He also covers some new technologies like Next.js. Next.js is a React framework that enables extra features like server-side rendering. If you know React, Next.js is very easy to pick up. If you do all this, you will cover another 10% of your web development

journey. Like I mentioned earlier, true learning will only happen if you start building new things by yourself. Building your own projects would be the next 20% of your journey, but what should you actually build? I recommend that you build a basic version of an Instagram app.

Don't worry about videos or Reels for now. Just build a version where people can share their photos and see a news feed containing pictures of their friends. You can also add functionality to like photos and add comments. Showing pictures from friends might not be possible right now because we have not

covered backend yet. You can use some hardcoded URLs for now. After learning the backend, we'll come back to this project and build the backend as well. Congratulations! You have successfully completed the front-end part of the web development. It's time to move on to

the back end. This is where people make their second biggest mistake, which is that they fall victim to the buzz around full stack development. For those who don't know, full stack developers work both on the front end as well as the back end. Now, I'm not saying that you should

not become a full stack developer. Full stack is a great end goal. The point I'm trying to make is that you don't have to be a full stack developer to find your first job. Front end development is enough. There are many jobs for front-end

developers. So I recommend that you don't rush into the back end development. Test yourself early in the job market to see where you stand, and you can continue learning back end on the side. For the back end, we'll again pick something that is easy to learn. We already know

JavaScript, so the easiest thing to do would be to use JavaScript in the back end as well. JavaScript was designed to be a scripting language for web browsers. To be able to run JavaScript on the server or backend, we need to use Node.js. Node.js is a JavaScript runtime for

servers. If you don't understand what I'm saying, that's completely fine. You will learn all this when you start working with Node. Now, similar to the front end, we need a JavaScript framework for the back end as well. Express provides you all the tools you need to build APIs.

Remember in the beginning of the video we talked about how the dining area is the front end and the kitchen is the back end of a restaurant. An API would be the equivalent of the server of the restaurant. Basically, you place all your orders or requests with the API and the

API responds to you with the information you need. An API does this with the help of the data stored in a database. So in addition to Express, you'll need to use a library like Mongoose to talk to the database. Mongoose is a Node.js library for MongoDB, which is a popular database. I

know all this sounds confusing, but it's not that hard when you start using it. To get acquainted with Express, you can quickly go through their documentation. But to actually learn Express and you can follow along with this video by Traversy Media and create a web app from

scratch. I recommend directly building because if you have come so far, you already know enough programming to pick up Express easily with this project. And if you finished this step, you would have already covered another 20% of the journey. Now you are on the last leg. You

need one final push, and that would come by building the back end of the Instagram project that you started. Add the capability to upload photos and follow each other by storing all the required information in a database. Create a news feed that contains actual photos of your friends and not the dummy

data. Once you do that, you will finish the last mile of the journey. And this brings me to the final big mistake many people make: they don't trust the process. They start this long journey of learning web development, they copy a few projects on the way and add them to their resume.

Eventually, they are not able to find the job and they give up. Every step of the journey is important, so don't skip any step and trust the process. It might take you slightly longer, but you'll eventually get there. Now I did not get a

chance to cover how to prepare for coding interviews in this video. If you're interested, you can watch this video. My name is Sahil and I'll see you in the next one.

Fastest way to become a Web Developer in 2025

On this channel, Sahil and Sarra share their experiences to help you fast-track your career in Tech. Subscribe and hit the notification button to stay up-to-date on new content :)

Au revoir!

DISCLAIMER: All opinions shared on this channel are our own and don't express views or opinions of our employers. We only use our experiences and public knowledge to make our content. NO CONFIDENTIAL INFORMATION of our employers is used or shared on this channel. This is not a Professional Coaching channel, it only highlights the public resources that have worked for our careers.


Sahil & Sarra

많은 웹 개발자 지망생이 필요한 노력과 관련된 방대한 기술을 과소평가하여 어려움을 겪고 있습니다.

웹 개발은 프론트엔드 개발과 백엔드 개발로 구성됩니다.

프론트엔드 개발은 사용자 경험(UI/UX)에 초점을 맞추고, 백엔드는 서버 측 로직을 처리합니다.

비유하자면: 프런트엔드는 레스토랑의 식사 공간, 백엔드는 주방입니다.

집짓기 비유를 통해 HTML, CSS, 자바스크립트를 소개합니다.

프런트엔드 개발을 위한 효과적인 학습 전략

기본 HTML, CSS, JavaScript에 과도한 시간을 소비하지 말고 80/20 법칙에 집중하세요.

HTML, CSS 및 JavaScript(W3Schools)에 대한 추천 학습 리소스입니다.

대용량 CSS 파일을 효율적으로 관리할 수 있는 CSS 프레임워크(Tailwind CSS)에 대해 알아보세요.

사용자 인터페이스를 구축하기 위한 자바스크립트 프레임워크(React)에 대해 알아보세요.

학습한 기술을 적용하고 학습 격차를 해소하기 위한 프로젝트 구축의 중요성.

백엔드 개발 및 일반적인 실수 피하기

풀스택 개발에 서두르지 말고 먼저 프론트엔드에 집중하여 직무 경험을 쌓으세요.

JavaScript를 사용한 백엔드 개발에는 Node.js와 Express.js를 사용하세요.

API는 데이터베이스 정보를 사용하여 요청과 응답을 처리하는 서버 역할을 합니다.

튜토리얼(트래버시 미디어)을 따라 Express.js를 학습하세요.

과정을 믿고 포기하지 말고 학습 여정의 각 단계를 완료하세요.