So it’s 2022, we’re in for another heck of a year, might as well make the most of it. I challenge to make a change. I want 2022 to be the year that you learn how to code, become a developer, and change your life.

In this article, I’ll be covering everything that you need to know to become a developer, a Front-End Developer to be exact, as soon as possible.

I won’t go over all the reasons on why I think one should become a developer, and how literally life-changing, as I mentioned, it can be, and is, because I cover those reasons on my TikTok, so check me out on there too.

Before we get into it, I want to elaborate a little more on why I said “Frontend Developer” specifically, but if you’re not interested in this intro stuff, feel free to skip to the main content right away, you can find all the timestamps in the description.

Now, as I was saying, why Frontend, specifically? Why not Backend? You may even wonder what Frontend or Backend even is altogether. No worries, I got you. Frontend and Backend are specialized fields of web development. A frontend is, in simple words, everything that a user sees and interacts with when they’re on a website. Backend is everything that the user doesn’t see that happens behind the scenes, like server logic, calls to databases, etc. But we’re not going to worry about that. The reason we’re picking Frontend development for our journey is because it’s considerably easier to get started with, it’s visual, and there’s instant feedback when we make updates to our code! And lastly, companies are more likely to hire self-taught Jr. Frontend Developers rather than Backend ones, but not to say that companies don’t hire self-taught jr. backend devs, of course, they do, but number-wise, there are a lot more jr. frontend positions compared to the aforementioned ones. Also, one last thing to note, this video’s purpose is to outline a general guide for you to follow in order to become a self-taught developer. I wish I could fit all my knowledge into one video, but that would frankly be impossible. You might hear some terms that may sound like gibberish, but that’s only because it’s up to you to research and learn those terms. Now that we have a basic understanding of what Frontend is and what this video is about, we’re ready to jump right in.

CHAPTER 1: HTML

This is the first thing anyone who’s getting into web development has to learn. HTML is a MarkUp Language that is used to structure a web page and its content. If we were to think of a website as a human body, then HTML would definitely be the skeleton of that body. Now, while HTML is not really that difficult to learn and understand, it might require some time for you to know how to write valid, or semantic (as they call it), HTML. See, HTML is a very loose language, very chill- if you will, you can get away with writing some dirty HTML code just to get things to show up on your screen, but if we want our website to rank up high on google searches, as well as to be accessible by users with disabilities, then knowing how to write proper HTML code is very important. With all that said, I really don’t think you would need to spend more than a month. I think that will be more than enough time for you to grasp the fundamentals of HTML. The best place to learn HTML is freeCodeCamp.org. freeCodeCamp is a non-profit learning platform that has some of the best free interactive material out there. This is actually a great way for you to start writing code right away, without having to set up your local environment or download any code editors, and you get to wet your toes a little and see what programming is all about. And did I mention that it’s free? If at any point you decide that programming’s not for you, no strings attached, no money lost, it’s literally a no-brainer. The cool thing about learning HTML is that it goes hand in hand with the next technology you will be learning.

CHAPTER 2: CSS

CSS is used to style and layout web pages. Continuing with my previous analogy, CSS is the muscles, skin, and maybe even the clothing of our website’s body. The reason why I mentioned that it goes hand in hand with HTML is because CSS is nothing more than rules that target specific HTML elements in order to alter the font, color, size, spacing of that element, or even add animations to it. Without HTML elements, there is no CSS, but without CSS, a website would look something like this. When you add CSS into the mix, you get something like this. And that is a big difference. This is where a little bit of memorization will come into play. Because of the fact that CSS is basically just rules, those rules will have to get engrained in your mind, but the good news is that will happen organically as you work with CSS more and more. For the most part, what you’ll want to focus on are Flexbox and GRID. If you learn those two at a competent level, then trust me, you’ll be able to achieve just about any layout you see on the internet. How much time would I spend on this if I were to go back? I would give CSS a month, or maybe even two, of complete dedication, starting from basic things like how to style elements and then getting deeper into complex layouts, as well as transitions and animations. Where would I learn it? Good news! freeCodeCamp has an entire section dedicated to CSS. Now at this point, I would suggest you start considering spending some money in order to get access to some other resources. Specifically, I’m referring to Udemy. Now I’m not going to get into how reliable Udemy is, because it can certainly be a hit or miss, but when it comes to the courses that I’ll be mentioning here, then you can take my word for it, these courses are well worth it. I just want to make a little note here that I am not affiliated with the creators of these courses nor do I gain anything out of them, I just genuinely think this great material, but as with all things in life, you should always do your own research and maybe look into other learning material, everyone is different of course. With all that said, the course that I would recommend for diving deep into CSS would be Advanced CSS and Sass by Jonas Schmedtmann.

CHAPTER 2.5: Real-World Experience

So fast forward, to about 2 or 3 months from now, you’re familiar with HTML, CSS, you’re able to use a code editor like vs code, and hopefully, you have a few projects under your belt. Let me just say that learning HTML and CSS alone is already a game-changer. By now, you should be able to create marketing pages that actual businesses would benefit from. This is where I want you to switch your mindset from “I’m just learning how to code” to “I can get paid to code”. Because if you think like that, you’ll start seeing opportunities around you. This is the time that I would ask family, friends, or acquaintances to see if they need a website. Usually, if someone is just starting a business and is in need of a site, all they really need is to get their brand out there, and a place where people can easily get that brand’s contact information. And that’s where you come in. With the skillset that you now have, you can easily build a stunning website with a fully functional contact form. Don’t be afraid to charge people for your skillset and time. It’s very common to feel that since you’re just starting out, you’ll just do it for free, maybe you don’t even feel confident in your ability to actually offer something valuable, but I’m here to tell you that your skills are already wanted, needed, and you deserve to get paid for them and your time. You’re also basically getting paid to learn. In any case, those websites will make a world of difference on your resume. To this day, when I look at resumes of Jr. developers looking for their first full-time positions that have created websites for actual business in the past, I already know that those candidates know how to deal with clients and users. Those jr. developers get callbacks.

CHAPTER 3: JavaScript

And now it’s time to learn JavaScript. The language of the web. And again, in our analogy, JavaScript is the brain of a website. Anything on a website that is dynamic, like comments, number of likes, or even complex animations, those are all handled with JavaScript. These are the main things that you should focus on understanding when it comes to JavaScript:

• Primitive Data Types - like numbers, strings, and booleans
• Loops and Conditionals.
• Objects and Arrays.
• Functions - Which are the fundamental building blocks of your program.
• Classes.
• Debugging - I can’t stress this enough. This is the process of finding and fixing errors in your code.
• Asynchronous Programming - This is especially important when you need to communicate with a server, which is very often the case. So spend some time learning about Promises and Async/Await.

Now, if some of these words sound scary, don’t worry that’s normal. The process of learning a programming language with 0 programming experience can certainly be daunting. So it’s normal to feel lost most of the time, hell, even all of the time, but you figuring your way out of things even when you feel lost is also part of the learning, so just take it one step at a time. Where do I recommend you learn JavaScript? I know I’m sounding like a broken record, but a really good start will be the JavaScript section of freeCodeCamp. Additional resources are The Complete JavaScript Course by Jonas Schmedttmann, as well as JavaScript - The Complete Guide by Maximilian Schwartzmuller. Both courses are exceptional and you can’t go wrong with either of them. It’s hard to say how long you’re going to spend on learning JavaScript. One thing’s for sure, you have to be creating your own projects on the side and learn by doing, not just by watching! Having said that, depending on how much time you dedicate to studying, achieving a basic understanding of JavaScript could take anywhere from 3 to 6 months.

CHAPTER 4: React

React is a library of JavaScript, a ready-made toolbox, if you will, that helps us create dynamic User Interfaces with a lot more ease than if we were to use just JavaScript itself. React breaks down pieces of our website into components, and allows us to handle those components individually, as well as coordinate and bring them together, to form the website in its entirety. The following are the topics that you should learn in order to get a good understanding of React:

• JSX - This allows us to write HTML in React.
• Functional vs Class Components - A little note here, class components are now deprecated but you should still be familiar with them because they still live in a lot of codebases, and you should know how to convert them into functional.
• Props - Which is the way to pass data from one component to another.
• State - This is an object that holds all the component’s information at a given moment.
• Hooks and Lifecycle Methods
• Forms and Validation
• Routing - Which is how we deal with navigating through pages in a React app and understanding how it differs from a traditional website.
• Rendering Lists and all the intricacies that come with that.
• State Management Library (Redux) and why we use one.

If you have a good understanding of JavaScript then React shouldn’t be too hard to understand because, at the end of the day, React is just JavaScript. With that in mind, I think learning React at a competent level would require at least a month. Personally, if I had to go back and do it all over again, I wouldn’t change a thing, and I owe my complete knowledge and understanding of React to Maximillian Schwartzmuller’s course React - The Complete Guide. His course is excellent, and the way he breaks down React concepts are second to none and it’s guaranteed to take you from 0 React knowledge, to being a well-rounded React developer.

CHAPTER 5: Job Hunting

Now let’s talk about job hunting. Even though I’m putting this section at the end, by no means does it mean that you should do the following things last. What I’m about to mention in this section are things that you should put into practice while you’re learning. With that in mind, let’s get into it. The most important thing throughout this journey will be networking. I can’t stress this enough. Try to integrate yourself into as many communities as you can, and if possible, find a mentor because that will speed up your learning process dramatically. Being a part of a community will keep you going even when you feel like quitting, so don’t underestimate the importance of it. I actually go over this on one of my videos, make sure to check that out. Another thing you should be doing is keeping your LinkedIn profile looking crisp. I’m planning on making a dedicated video on some tips on how to maximize your reach and opportunities you get through LinkedIn, so stay tuned for that, but basically, you want to make sure that your LinkedIn profile screams that you’re a developer, even if you’re not, it does not matter, fake it ‘till you make it. Portfolio. Incredibly important. You need a personal website that houses the most impressive projects that you’ve worked on, and if you want an exact number, I say five. Five of your best projects that showcase your understanding of JavaScript, React, HTML, CSS, authentication, as well as handling user input. The more visually appealing your portfolio is, the more likely it is to impress recruiters. So you’ve got your portfolio, you’ve got your LinkedIn, time to talk about your resume. First, you’ll want to have a “Skills” section. This is where you will include all the skills and technologies you’ve learned throughout this journey. Depending on the number of them, I recommend breaking everything down into these categories: Languages (like HTML, CSS, and JavaScript), Technologies (for example React, Redux, etc.), and Tools. I understand that since you will be looking for your first job as a developer, your “Experience” section may lack, or may even be empty. If have any sort of experience from your current job or any of the past ones that have transferable skills that could vaguely be related to programming, then I recommend you include those, showcasing those transferable qualities. If you followed my advice from earlier and you’re lucky enough to have created websites for others, even friends or family, this would be a great place to include them. Otherwise, not including an experience section in your resume is also fine. Similar to your profile, you will want to have a “Projects” section that showcases three of your best projects, bullet points on what those projects are about, as well as the technologies used for each of them. Under the “Education” section, if you do have a bachelor’s degree, then I would just include that and not bother with anything else. For someone who doesn’t have a degree, then I would recommend filling this section with certificates from the programming courses that you have completed, and this is what I did too when I started out. I included my freeCodeCamp certificate, as well as a few certificates from Udemy. Obviously, I don’t even have to mention this, include a link to your portfolio, oh, and please make sure to have links next to your projects so that the recruiter who’s reading your resume can easily access them. A few closing words on this section would be to start applying as soon as possible. Don’t wait until you feel ready, because you will never be ready, and if you do feel ready, then it’s already too late, you should have started applying months ago. And just know that your first few interviews are going to be bad. So just try to get those out of the way as soon as possible, and then ace your next ones!

EXTRAS

Some additional and necessary things that you should fit into your learning are:

• Basic usage of Git.
• Understanding of code hosting websites like GitHub.
• Fundamental understanding of a package manager (for example, npm).
• Basic Linux commands ****to navigate a terminal.

CLOSING THOUGHTS

I want to close this video by saying a few parting words. The learning material I mentioned in this article is not the end-all be-all. Everyone is different so some of you may learn better through books, or maybe a different instructor goes at a pace that’s more comfortable, or whatever the case may be, my point is, make sure you look for other learning resources and try to find the one that best suits you. These were just the ones that I found helpful, but the cool thing now is that since you know what you should learn, you know what to look for. Also, I want to be frank with you. This will not be an easy journey. I’m not saying that to scare you, I just want to give you all the facts so that you know what you’re getting into. There are going to be a lot of frustrations, a lot of losses, even moments where you’re going to want to quit. But if you can just push through those, the feeling of accomplishment, as well as how positively life-altering this experience will be, is very much worth it. Thinking like a programmer might seem like a completely foreign and unintuitive thing at first, especially if this is your first time being exposed to programming, but I whole-heartedly believe that anyone can get to a point where they can at least understand the basics of programming. If I did it, so can you. With that said, at some point throughout all this, you’ll have to be honest with yourself. Like I said, while I believe anyone can get to a point where they understand the basics of programming, not everyone can be a programmer. You’ll have to be okay with always being a student and always having to learn, and most importantly, you’ll have to be able to sit in front of a screen for hours and hours at a time, especially when you’re in the zone, I’m not proud of it but there have been times that I haven’t gotten off my chair for way too many hours than I feel comfortable saying. But anyway, as I said, I don’t mean to scare you. If you do decide to do this, you’ll figure out on your own if you’re up to the task or not. I sure hope you are, and if you don’t believe in “you”, believe in me that believes in you. You’re all gonna make it. Just take it one step at a time.

Thank you so much for sticking with me until this point. If you found this article helpful, or if you think that anyone in your life could benefit from this, then please share this with them. I have more articles and videos coming, to help new developers get into the industry.

Until then, stay safe, and keep coding. I’ll see you all next time.