The Challenges of Becoming a Web Developer
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.
Understanding Front-End and Back-End Development
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.
Front-End Development: HTML, CSS, and JavaScript
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. HTML would be the blueprint of this house. CSS is like an interior designer that decides what your rooms look like. JavaScript is like an electrician that installs smart home features in your house.
Avoiding the First Big Mistake: Overlearning the Basics
Most people make their first big mistake: they spend months, sometimes even years, learning HTML, CSS, and JavaScript. 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.
Mastering CSS: Using Tailwind for Efficient Styling
When you start working with CSS, you’ll see that the same things repeat again and again. Your CSS files start becoming very big and hard to manage. 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 like Tailwind CSS. Tailwind is a utility-first framework. It already has all the repeated code pre-written. You just need to go to your HTML elements and use it.
Diving into JavaScript Frameworks: React
There are many popular JavaScript frameworks, but we will only talk about the most popular option, which is React. 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. The official React documentation has a quick start guide that covers 80% of the React concepts.
Applying What You’ve Learned: Building Real Projects
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. You can start following along with someone who’s building a real-world application on YouTube. My personal favorite is this channel by Sonny S. His videos will introduce you to popular patterns in React.
Building Your Own Projects: The Instagram Clone
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. I recommend that you build a basic version of the Instagram app. 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.
The Second Big Mistake: Rushing into Full-Stack Development
People make their second biggest mistake by falling victim to the buzz around full-stack development. Full-stack developers work both on the front end as well as the back end. 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.
Learning Back-End Development: Node.js and Express
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. To be able to run JavaScript on the server or back end, we need to use Node.js. 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.
Also read:
English