How To Become A Web Developer (From Complete Beginner to Hired)

So you want to become a Web Developer. Maybe for a career change, to earn those big bucks, to break into the tech industry, to work remotely, or perhaps the idea of working from your computer appeals to you.

The only problem, of course, is that you’re stuck with more questions than answers:

• What exactly is a Web Developer?
• What do they do?
• Is it even something I'd be interested in?
• How do you become one?
• How long does it take?
• What's a full-stack Web Developer? Is that a different thing?
• Is web development worth learning or will AI take your job before you learn it?
• How much money do Web Developers make?
• How do you even learn web development?
• Is it expensive to learn?
• Do you need a degree or to attend a bootcamp?
• Can anyone learn? Am I too old?
• Heck… how do I even get paid or hired once I’ve learned it all?

Your mind is probably going a million miles an hour right now but don’t worry. Take a breath, relax, and let me walk you through the answers to all these questions and more.

My goal is that by the end of this article, you’ll not only know everything you need to know, but you’ll also have a plan of attack for exactly how to become a Web Developer and be able to start learning within 15 minutes of finishing reading.

Important: This post is LONG with a lot of resources and a roadmap to both learn web development and then get hired. You might want to bookmark it 😉

A key thing to realize is that you’re not expected to learn everything here right away.

And sure, it will take time and effort. Anything worth learning always does. But if you follow this guide and my recommendations, it will significantly cut down a lot of time you might waste trying to figure it all out on your own.

Also, although it may seem like a lot to learn right now, I’ll also share ways for you to start earning money as a Web Developer while you’re still learning, so you can transition to this career as early as possible.

So try not to be overwhelmed. You’re looking at the path to a brand new career and skill here, so of course there are a fair few steps. But I believe in you.

For now though, simply read through this post to get some answers to all those questions you have and make sure this is exactly what you want to do. Once you're ready to dive in, use the step-by-step section and the resources to become a Web Developer.

Simple!

So are you ready? Good! Let’s dive in…

What is a Web Developer?

When people say web developer, they are likely referring to one of two types of Web Developers:

1. A Full-Stack Web Developer (meaning they work on front-end and back-end... more on this soon), or
2. A Front-end Web Developer

Not to add to the confusion but there are also 'Back-end' Web Developers, but these tend to get referred to by this term alone.

All of these roles are writing code. The difference is just the types of tasks and projects the person is typically working on. Are they working on the front, the back, or both (full-stack).

In this guide, we’re going to walk you through the path to becoming a Full-Stack Web Developer.

Why this type? Well, let’s look at the difference between the two types, and break down a few terms you might not have heard before, and you'll see why this is the best option for you.

What is a Developer?

That's not a typo. A Web Developer is a type of Developer.

A developer is simply a broad term that refers to anyone who either creates, modifies, or maintains software applications or systems.

Depending on what areas they specialize in, then changes the name. So Web Developers work on web-based projects, app developers work on apps, etc.

Here's a list of the most common specialties:

• Web Development (Creating web-based applications and sites, such as Netflix or Amazon) hence the term 'Web Developer'
• Mobile App Development (Building mobile apps). These are often referred to as App Developers
• Software Engineering (Creating software programs)
• Data Science (Understanding data and what it means to make informed actions)
• Machine Learning (Building machine learning models and training AI to understand data and perform actions)
• Systems Design (Designing and implementing the overall plan for how a project can work, and all the connected parts)
• Database Management (Helping to store and capture valuable information)
• Game Development (So us nerds can get our Zelda on ⚔)

All cleared up? Good stuff.

Now let's get back to web development, and the different areas of focus in this role.

What’s the difference between front-end, back-end, and full-stack?

Web Developers will often specialize in either front-end or back-end or they'll do a bit of both (aka... full-stack).

Front-end development

Front-end development refers to coding everything that's front-facing in a website or application.

For example

When you go to a website, everything you see on your screen is what we call the 'front-end'.

That includes things such as the layout, the user interface, the animations and colors, and how it all fits together to create a great user experience.

Back-end development

Back-end development refers to coding everything that's working behind-the-scenes to make it all work.

For example

When you're on a clothes store's website, all the items for sale, available stock, and current prices are dynamically pulled and updated automatically from a database in the background.

That means a front-end developer doesn't have to manually go in and change the code each time a t-shirt is sold to specify there's one less t-shirt in stock.

Full-stack development

A Full-Stack Developer is someone who can fulfill both roles. They understand how to build and create both the front and back end, and they even know how to connect and get it all working smoothly.

Watch this 2-minute video below. Aldo does a great job breaking it down 👇

So in theory, a Full-Stack Developer can build entire projects on their own, depending on the size of the project and how much time they have available to create it.

This does mean that being a Full-Stack Developer requires more skills and knowledge, but it also pays better because you’re a one-stop shop for getting things built.

Even if you choose to specialize and focus on just front-end or just back-end later, you'll be much better at either of those by understanding both sides.

For example:

Knowing how databases work and how they interact with the front-end will ensure you make better decisions when coding as a Front-end Web Developer.

Obviously this is helpful, but it's not the only benefit of going the full-stack route.

Why should you become a Full-Stack Web Developer (instead of front-end or back-end only)?

Full-Stack Web Developers have to learn more skills but it also means:

• They get paid more money (exactly how much more in a second)
• They get a much deeper understanding and experience of how everything works together
• And they have more opportunities available to them (can apply for any web development role vs. just front-end roles or just back-end roles)

This is why I highly recommend you become a Full-Stack Web Developer, especially if you're just starting out.

It's also whay I'm going to cover in this guide, so you can go from zero skills and never coded before, to being a full-stack developer.

Is being a Web Developer a good career?

It sure is! Web Development is a fantastic first step into the tech industry. It’s not as complex as some other tech roles (especially frontend), which means it's great for beginners, while still having most of the same benefits.

Salary

The average salary for a traditional Front-End Web Developer is around $93,848, which is not bad at all.

If you continue to skill up and become a Full-Stack Web Developer, then you can expect around $117,880, for a $24K bump in earnings!

Not bad right?

Job demand

Not only does Web Development pay well, but there are a lot of jobs available in this industry, and it continues to grow.

According to the National Bureau of Statistics, there were 216,700 web development jobs in the US in 2022, with an expected growth of 16% year-over-year (higher than most industries).

If we look at ZipRecruiter, we can see that there are currently 86,877 Web Developer jobs available in the US alone right now.

If we narrow that down to just Full-Stack Web Developer jobs, there are still 55,509 roles available.

Again, this is just in the US and doesn’t include any international opportunities, so there are a lot of options out there!

Also, these benefits we're listing here are just from a full-time employment standpoint. You can make a lot of money as a Freelance Web Developer, and work for yourself if you really want to also, or even do some freelance work on the side for extra cash.

There's even more career benefits!

It's not just money, security and high job demand that makes being a full-stack developer a great career.

Because all the work you do is from a computer, this means you can pretty much work anywhere in the world.

Even better still, is the fact that this is not just remote work but geo-arbitrage. You can easily earn USD and live somewhere cheap, and suddenly that $100k a year job is worth twice or even 3x as much in local currency.

Editor's note: I have a friend who is doing this exact same thing right now. He's travelling New Zealand, while working as a SE 2 (which is simply a more senior developer role) at a large tech company in California. After conversion rates, he's making around $20,000-$24,000 a month!

It gets better though.

Because you’re often planning and building, you get to not only have a creative outlet for work, but you’re always learning new skills to stay on top of your game.

Is coding actually fun?

I'm guessing you have a rough interest in coding if you're here, but your vision of what it's like and the real life work is probably a little different.

The only way to really know, is to give it a try, and listen to people who've been doing it for a while. Be sure to think about what they're saying though. Some of the elements that they might like or hate, could be something you love.

If you're on the fence, I highly recommend you read this post to really help you determine if coding is for you.

tl;dr: Web development is a truly fantastic career to get into. Learning to code is one of those skills that will be useful to you no matter whether you make it your full-time career or not.

That said... if you don't enjoy it, you're not likely going to stick with it, so be sure to check out Cindy's guide above.

Can anyone become a Web Developer, or do you need a degree?

As long as you have a computer, the internet, and a willingness to learn, absolutely anyone can become a Web Developer - regardless of background.

Why?

Well, the tech industry is one of the few places where employers care less about your education and more about what you can do.

If you’ve built projects and have a portfolio to show that you can do what they’re asking, they don’t care if you have a Computer Science degree.

Heck, we’ve had 1,000s of people hired at Google, Tesla, Amazon, and other companies who’ve never even tried coding before and just learned at home following our training courses.

I even taught myself how to code after switching careers from the travel industry. So we've all been in your shoes!

If these other students can do it, so can you.

Is being a Web Developer hard?

Yes and no. It’s going to be a learning curve at first as this is likely completely different from what you’ve done in the past.

It’s not overly complex but will take time for you to understand each new concept.

That’s why following a roadmap (which I’ll share in a second), is such a good idea. This way you learn the right things, in the best order, without making it overly complicated or time-consuming.

That said, the actual job of being a Web Developer can be easy if you want it to be. There are plenty of companies where you can do pretty basic coding and get paid good money.

The hardest part of being a developer is that you constantly have to be learning new things because tech evolves so quickly.

Is Web Development worth learning, or will AI take your job before you learn it?

Nope! I cover it more in this guide here, but let me simplify, and explain why AI tools are actually a good thing.

Right now the tech is very cool, but fairly limited:

• AI tools are not actually sentient. It's pattern recognition and a few other cool things. But the fact that the answers sound like a person, makes it seem like it's smarter than it is
• It's also limited by the data that it has been trained on. Newer versions are getting access to the internet and new sources, but it still needs a lot of content on the same topic to learn from it
• Results are affected by how good the user is at leveraging the tool. Ask the wrong questions (prompts), or ask them poorly, and it will give you weak answers or even fake ones

Maybe you saw the court case recently where a lawyer used ChatGPT to find prior examples for their case.

The tool provided the lawyer with 10 prior court cases to use... but it turns out they weren't real cases. The tool simply made them up to give the user what they wanted to hear.

We're not the only people to have this opinion either.

Does this mean that AI tools are useless for Web Developers?

Not at all. In fact, if you can learn to both use these tools correctly, and also apply that with some topical knowledge, you can make your life far easier.

In the example above, the lawyer should have verified that those cases were real and double-checked ChatGPT's work. Instead, they simply trusted it as fact, and cut corners.

The key really is to pair these tools with your current skills, and that's why they won't steal your job.

For example:

You could use an AI tool to help write the outline for some code to solve a problem. Then, as a trained Web Developer, you could check that code and test it out.

This would help you speed up your process and find solutions to problems.

Important: The Developers who learn to embrace these tools in this capacity will have a huge advantage over others in their field. This is because they'll be able to produce more output with a faster and easier workflow, and this is where you get the real threat to jobs. The threat is not with the tools themselves - it's being left behind by not embracing them!

It's also why we're leaning heavily into teaching Developers how to use these AI tools while learning to code and beyond. This way, you'll be a much more efficient programmer, and learn far faster!

How long does it take to become a Web Developer?

Again, this varies and depends on how much time you can invest, and any prior knowledge or experience.

It also depends on how far you want to go. Obviously becoming a Front-End Developer will be a bit faster than becoming a Full-Stack Web Developer, as you typically learn front-end first before you learn back-end.

This is also why we recommend you start applying for work and getting paid for Front-End Web Developer jobs or do some freelance work, and then continue to learn what you need to become a Full-Stack Web Developer. This way you can earn while learning to code.

But, to answer the question. If we were to give an approximate time frame to "How long it takes to learn and become a Full-Stack Web Developer", you would probably be looking at:

• 2-3 months, if you already have some basic knowledge. Maybe you built some drag-and-drop websites, and you’re also able to put in 40-80 hours a week. Obviously, not everyone has that much free time, but we’ve seen people do this
• 4-6 months if you can spend 20-40 hours a week. Possibly working evenings and weekends
• 7-12 months if you can only manage 5-10 hours a week, such as 2 hours a night, or one day on the weekend
• 1-2 years if you are completely self-taught (i.e. just using Youtube videos without a clear path of what to learn). It can be faster but you need to be incredibly disciplined

Clearly, if you dedicate more time and have a set path to follow, such as a roadmap or course (like Zero To Mastery), you’re going to fast-track your progress.

Am I too old to learn to code?

Nope!

As long as you have a few hours a week to learn, it doesn't matter how old you are.

What’s the best way to learn Web Development?

There are 4 major options to learn to code, and they each have their own pros and cons. We did a deep dive into each option in this article here.

But let me give you the mile-high version.

Option #1. Self taught

• Cost: $0
• Time: 1-2 years or more, depending on if you have a plan to follow, and are disciplined.

A lot of devs have started this way, but you really do need to stick to it and know what to learn. There are hundreds of things you could dive into and it's easy to get lost, procrastinate, or keep pushing it back and never finish aka tutorial hell!

However, it is also free which is pretty nice 😀.

I actually learned to code this way, but I’ll be honest - I'm super disciplined, which is incredibly important if you want to take the free route.

I actually wrote about my process here in this guide on learning to code for free in 6 months. This new article that you're reading right now is simply a more detailed version to that same process, and answering a few more common questions.

Option #2. Attend an in-person bootcamp

• Cost: Anywhere from $1,500 to $35,000
• Time: Can be as short as 6-12 weeks, while others can last up to 2 years, depending on the provider

Basically, you pay for the bootcamp, show up every day, and then get pushed through an intensive learning and building program so that you can learn asap.

Some offer payment plans but can be a little iffy, asking for X percent of future earnings for the next few years. It’s not always a bad deal if you’re getting the training and sealing a $100k a year job, but it's not always guaranteed that you’ll be hired by the end of the camp.

tl;dr: Bootcamps can be very costly (but cheaper than College) and time intensive but are good for people who struggle to follow through on their own as you have the motivating factors of cost and someone on your back for X week/months.

PSA: Be very skeptical of the marketing used by many of these bootcamps. Many of them make some pretty grand claims (ex: job guarantees) that don't actually turn out to be completely true.

At the end of the day, you still have to do the work. You still have to put your resume and portfolio together. You still have to apply for the jobs. You still have to interview and land the jobs.

They don't do these things for you.

What they might do is have some companies that come and do recruiting and give you some advice but please just make sure you know what you're getting into if you choose this option.

Just read the fine print 🙂.

Option #3. Get a Computer Science degree

• Cost: $50,000-$100,000 per year, for 4 years. That’s a whopping $200,000-$400,000 in total. Oh dang!
• Time: 4 years

Hmm… insanely expensive, a long time until you get a job, possibly learning out-of-date curriculum content and most tech companies and jobs don’t really care if you have a CS degree.

So why bother taking this path? Well, if you can afford it and want to take the time, you have a dedicated path to learn, with people pushing you to keep at it. There’s nothing like the fear of wasting $400k to really motivate you to get your work done.

Also, college is a HEAP of fun. Add in the fact that you’ll cover theory content that FAANG-level companies i.e. the biggest, best, and highest paying (Facebook, Apple, Amazon, Netflix, and Google) will want you to know before they hire you and it's a nice bonus.

That being said, as long as you learn about data structures and algorithms from somewhere and practice FAANG-level coding interview questions, you can get those same jobs without the degree. (This is the same content that FAANG wants you to know).

Option #4. Learn online with a semi-guided course

I'm a little biased here because this is exactly what we offer but I truly believe that this learning option provides the best value (whether it's us or a few other very good platforms out there).

• Cost: Usually around $35 a month depending on which platform you go with. Most will offer an annual discount or even a lifetime, one-off cost. We currently offer an annual option of $279, or a lifetime membership to every course and all future updates, for just $999
• Time: As we said earlier, anywhere from 2-12 months depending on how much time you have and what you current level of experience is

Online academies are slightly more expensive than being completely self-taught, but with the added benefit of plans, roadmaps, updated and relevant content, and a fast track of what to learn and how to get hired.

Added bonus? People are weird, but by having a small monetary commitment to pay for the training, you’re actually far more likely to follow through and do the work vs if it was totally free.

Top tip: Try to find a platform / course that has a dedicated and active community that you can interact with vs. a one-time purchase and zero interaction (ex: most Udemy courses). This community aspect can also help you stick to your course, while also giving you the chance to ask questions.

Like I say, I'm a little biased but we truly do this this is the best option to learn with. It's extremely affordable but still gives you the same content and many of the benefits of bootcamps / degrees.

As I said earlier, we’ve had people hired at major FAANG companies when they were waiting tables earlier in that same year.

You click, join, follow a career path, and then get it done. Simple.

A key point of difference here at ZTM (and I promise to be less salesy after this), is that all our training is focused on getting you hired as soon as possible.

We don’t want to teach you everything there is to know about Web Development, because it would take years and years, and it wouldn’t all be useful or relevant. Many people get stuck in this loop of trying to learn "everything".

Instead, our instructors have actually worked as Senior Developers at companies and have hired new developers in these roles. So they're able to give you a curriculum of exactly what you need to know to be their perfect hire and cut out what's not needed.

You're also going to learn 10x more and faster than any course or tutorial once you're actually working at a company working on solving real problems every single day.

So let's get you the foundations you need and then get you hired ASAP. Then if you want to come back and add some additional skills to your toolkit with us, great!

Anyway, enough of the sales pitch! Those are the 4 core methods you can use.

The Full-Stack Web Developer roadmap: From zero experience to building sites, apps, and getting hired

OK, so by now you can clearly see that becoming a Full-Stack Web Developer is an awesome career, but how do you actually learn it? What do you need to know? What order should you learn it all?

Well, good news. I'll give you two options:

Option #1.

You can keep following along with me here. I'm going to give you the mile-high version below along with some free resources to get started so you can get a sense of what you're getting yourself into.

Option #2.

However, if you're ready to commit and want to become a web developer as efficiently as possible, then I highly recommend you just take our dedicated Web Developer Career Path here.

It does a way better job than I can do in this free post and condenses the information into specific steps to take, so you can ignore the rest while you work on each part.

Not only that, but it takes all the guesswork out. You just follow along, take the recommended courses and learn the right things in the right order, and then continue to follow the training to get hired.

Who is this Web Developer Career Path for?

Anyone with zero experience who wants to learn Web Development, and not spend crazy money on bootcamps or college degrees.

Take the ZTM Career Path if:

• You’re an absolute beginner with no coding experience
• You want a fast track to learning to become a Web Developer
• You want to build real-world projects, not just learn theory
• You want to learn up-to-date, relevant content!

Still with me? Alright padawan, let's get started.

Part 1:

Part 2:

Feel free to watch those videos, and then continue reading the rest of the article below.

Simply because I also share multiple resources at each point where possible, so you can get some hands-on experience or deeper knowledge.

For example:

When I recommend you learn React in step 12 of this guide, I also share a video with 6 hours of free React training! You wouldn't want to miss that right?

Alright, let’s get into it…

Step #1: Learn how to learn

Here’s the thing. You’re going to be consuming a lot of new information, and the simple fact of the matter is that most people are not great at learning new things.

We pick up habits in school and then that’s it. However, like most things in life, there are ways to hack and improve these processes. If you want to learn how to learn more effectively, then check out this guide.

It might seem like a detour but if you can pick up these skills first, then not only will you be able to go through all the content to become a Web Developer faster and more efficiently, but you’ll also retain it better.

Take a minute to make everything after this easier. Then come back to this post.

Step #2: Learn how the Internet works

If you’re going to be building projects for the Web, then you need to know how the Web works. More specifically, how pages are delivered, built, etc, as well as understanding domain names, hosting, HTTP, and more.

Watch the first 40 mins of this video to learn how the internet works:

Don’t worry about watching all of this video now (unless you can’t look away from its awesomeness). We’ll be coming back to this video multiple times, and I’ll include the time stamps in each section below so you dive back in at the right points.

Step #3: Learn the basics of Computer Science

So now you know how the internet works, it’s time to learn how computers work, and how this all relates to each other.

Watch this video first to understand how computer networks work:

Then, watch this video for an overview of how Computer Science works:

As well as this playlist:

Then, go ahead and watch this CS50 “Intro to Computer Science” playlist from Harvard (and save a fortune in college fees).

Note: Although this video is from 2017, it’s still incredibly relevant, and the teacher is amazing. There are newer versions of this lecture series but 2017 is still the best one.

Step #4: Learn how to use the command line

The command line interface (CLI) is a text based environment, designed to let you interact with your computer.

The command line is a topic that comes up in all programming fields, including web dev so it's important to understand it.

Zed Shaw has a great book/article on the topic that you can read here for free (click the ‘next lesson’ at the bottom of each page to move along).

Ignore the fact that it talks about Python. It’s still relevant.

Step #5: Learn some basic programming languages

Alright. Now that you understand the command line, it’s time to start learning some basic programming languages.

Learn:

• CSS, and
• HTML 5

These 2 'languages' are the basic building blocks of working on the web.

For example

Imagine you're building a web page.

HTML is the basic structure of the page. It helps define what elements are where on the page, such as the header section, the body, the footer or any other elements you want to add.

You don't just want a blank layout though, and that's where CSS comes in.

CSS allows you to set styling and decorations to that page, such as colors, fonts, sizes etc.

You also need to learn how these 2 fit together, so go ahead and watch the video below:

Yep, this is the same video as before, but it will start at the right time stamp for you to learn this concept. Continue watching until you get to the 3 hour 6 minute mark (we’ll come back to the rest again later on).

Step #6: Apply what you’ve learned and build a basic website

One of the best ways to learn and retain information is to start applying what you’ve learned so far. At this point, you should start using your new HTML / CSS skills to create a simple website.

Maybe not this simple but you get the idea. Ideally, you want to create a portfolio site where you can then add future projects. Perhaps something like this.

You can also follow this video series below to learn how to build it from scratch:

Step #7: Learn to use templates for easy site design

Alright so you did the hard work and created a basic site with HTML and CSS. Now, go ahead and check out Bootstrap, and start playing around with editing some of their templates, and see how this compares with coding a site from scratch.

Much easier right?

Sidenote: Technically, you could actually start making money at this point by building basic sites for people and customizing templates.

However, don’t stop here. The big bucks are when you learn Web Development proper, and you can earn 10x this amount.

Step #8: Learn Flexbox and CSS Grid

Flexbox will help you to make sure that all your CSS elements appear in the right locations on your site, as well as its size, alignment, etc. While CSS Grid will help you design more customizable layouts.

Watch the video below from this timestamp until the end:

Then, go ahead and practice what you’ve learned. You can practice Flexbox here and then practice CSS with CSSGrid Garden.

Step #9: Learn a general-purpose front-end language: JavaScript

HTML and CSS are great for learning the fundamental building blocks of the web, but they have limitations, and the topics are quite frankly huge.

Rather than get stuck trying to learn everything about them, you can bypass a lot of struggles and build on what you’ve learned so far, by learning a more advanced language, such as JavaScript.

Why JavaScript?

• Every web browser uses it
• It’s easy to learn
• It connects with front-end frameworks and back-end server environments. Many of which are also built in JavaScript code
• It’s one of the most in-demand languages in terms of employment
• It can manipulate HTML and CSS
• You’ll learn more about HTML and CSS simply by working with JavaScript
• Oh, and JavaScript will let you add far more functionality to your site design from earlier!

Sold? OK, so how do you learn Javascript? Well, you can learn it as part of our Web Developer course (that fits this roadmap).

Alternatively, here’s a few other resources. You can take this mini course and start applying the lessons in there to your current site design from the earlier steps.

Also:

• Be sure to check this GitHub info on JavaScript if you get stuck
• I would also recommend reading this article to get a deeper understanding of how programming languages work
• Then, you need to learn about DOM manipulation. I’ve made some of the lessons in my Web Dev course free to view on the topic, so check them out here also
• Then learn the difference between synchronous and asynchronous Javascript
• Finally, be sure to stay up to date on the latest JS features

Step #10: Make your life easier with GitHub

Learn Git and Github with the tutorial below:

Also use this Git Explorer to practice and then learn more about Git Branching here.

Then, go ahead and create a Github profile.

Follow the steps in the video below to get setup and create a nice looking profile in under 20 minutes. Once you're done, start making commits every day.

Next, use Github pages to put your website online for free. This will be your portfolio.

Step #11: Apply what you’ve learned and improve your website

Again, it’s time to apply what you’ve learned.

You could make a bunch of different JavaScript projects right now, but instead, why not go back and make improvements to the website you already built? How about making it responsive to different screen sizes?

There’s a 100% chance you will need to do this for work in the future, so it’s good to get some experience with it now and maybe add in some extra styling for good measure.

Step #12: Learn how to use your first framework: React

Alright, let’s make your life easier by adding in frameworks. These will not only help you to be more efficient when coding, but they’ll also open up the door to other projects such as web apps.

What’s a framework?

A framework is simply a structure that you can use to build software on and not have to start from scratch, kind of like a template.

This means faster and easier builds while also giving you the ability to manipulate almost everything that you’re using in one place.

There are many options but I recommend you use React.

Oh and guess what? We have a React course also.

Here are the first 6 hours from the course below:

Enjoy!

Once you’ve finished that video, go ahead and watch this one next.

Bonus React steps:

• Head on over to the official React documentation and read through it
• If you have the time and you want an even more in-depth tutorial on React, here it is for free in text form
• Optional: Learn Redux → Watch this course. Don’t let your head explode. Then read the documentation for it as well. This will help you to understand why managing state is a big problem that all large applications need to solve

Step #13: Apply what you’ve learned and build your first web application

Alright, time to retain and apply that knowledge again. If you watched the full React Crash Course above, Yihua walks you through how to create your first React app.

Once you've built that, get some more experience by trying to customize it or build your own basic React app using create-react-app.

Create-react-app will blow you away, and open up a whole new world for you. Command Line Interfaces (CLIs for short) are now becoming common practice with all frontend frameworks and lets us set up a project quickly.

Then go ahead and deploy your React app on GitHub pages. In the future, you should deploy all your projects on Github pages to show off in your portfolio. Also, deploy your React app on Netlify.

Step #14: Get paid while still learning to code

Another chance to earn money. By this point, you should be a fairly competent front-end web dev and can start applying for roles or freelance work, and getting paid while you're still learning to become full-stack.

However, getting hired in a full-time tech role is a little different from what you’ve done before, so let’s get into it.

Step #15: How to ace the tech interview

Alright, so if you want to get hired now while you’re still a front-end web dev, there are a few things to do. You would have to do these exact same things later, I’m just mentioning these now as this is the point where you could start earning while still learning.

If you don’t plan on applying for jobs yet, you can skip this step. Otherwise, there are 3 major things you need to do:

• Start building out more projects for your portfolio. This way potential hires can see what you are capable of, and it helps you stand out. Here are 20 JavaScript web projects that you can build
• Put together a killer resume
• Start practicing for your job interview

And by practicing, I don’t mean just learning how to talk to interviewers. You need to actually start learning how to pass the technical interview test.

“Wait… there’s a test?”

Yep! Well not every web development job will make you do a test, most will.

You see, one of the reasons the tech industry doesn’t really care about degrees is because they can simply test their applicants' knowledge and skills to make sure they can do what they say they can.

This is great for you because if you've put in the work and can do the job, you'll have a chance to prove yourself vs. years ago when you HAD to spend 4 years getting a fancy piece of paper.

The good news is, we cover everything you need to know and do to pass coding interviews and get hired at smaller or even larger companies (including the FAANG companies) in these two guides.

(Larger companies ask more advanced questions that smaller companies don't, hence why we have 2 seperate guides).

Either way, the process to getting hired in tech is the same for companies of all sizes.

It looks something like this:

• You fill out an online application form, where you submit your resume + portfolio
• If they like your work and you get through, then you might be sent an online quiz with some basic job-specific questions.
• If you pass the quiz then you will have either an in-person or Zoom call interview. Regardless of if it's inperson or via Zoom, that interview will also feature a technical coding test section. This means that for part of the niterview, they will ask technical questions and you solve them while they watch
• And then a final interview to see if you would fit in with the company dynamic

Don’t freak out.

Sure, this is more prep than you will have done for most other jobs, but it's also why you don’t need to spend $400k and 4 years at college. You can simply take a data structures and algorithms course, and then if you want to apply for the larger companies, practice with some FAANG-level interview questions.

Then, go ahead and build up your soft skills so you can crack that final ‘behavioral’ interview to see if you’re a good fit.

That’s all there is to it. Simply, practice the tech questions, ace the interview, and you can easily secure a $100k a year job or higher, and save yourself $400k in college fees.

Step #16: Start learning back-end Web Development

Even if you did stop to get hired in the last step, we recommend you keep learning and become full-stack, so stick to it.

Remember: The difference in average earnings between a Front-End Web Developer and Full-Stack Web Developer is almost $19k, and that’s just the average starting rate. Add in the fact that you can then open up $150-200k roles later down the line, and full-stack is where the fat stacks are.

Most of back-end development is working with servers and databases so let’s get into what you need to learn.

Step #17: An intro to HTTP, JSON + AJAX

Go ahead and read the following 3 guides, and learn how these allow you to communicate with servers.

• HTTP
• JSON, and
• AJAX

Step #18: Learn Node.js + NPM

Node.js is an incredibly popular cross-platform server environment that’s going to allow you to start building a server and all those fun things on the back-end.

Also, thanks to its popularity and volume of users, you’re spoiled for information if you ever get stuck using it, as well as a whole host of libraries that you can grab code from.

Add in the fact that Node works very similarly to regular JavaScript, and it means you’ll not only pick it up fast, but you also won’t get too confused like you would if it was a completely different language.

Go ahead and download Node.js and NPM.

Then, download lodash from NPM and use browserify to use CommonJS imports, and learn about it in this tutorial. (Hopefully you’ll start to see why NPM is such an amazing tool for developers.)

Then, dive deep into Node with another free 6-hour crash course, this time on Node.js!

Note: The crash course video above is from our full Node.js course. It deep dives into Node.js but it doesn't show you how to set up a server in this teaser, like we do in the complete Web Developer course. That being said, the video is still incredibly helpful to watch and learn from, as it will give you a headstart when you come to learn Node fully.

Step #19: Learn Express.js

Time for another framework! Express.js is a framework built for Node.js, with a focus on web applications on the server side.

Just like other frameworks, it’s designed to make your life easier, thanks to its heap of features and easy accessibility. Grab it from the link above and learn how to use Express.js with Node.

Step #20: Apply what you’ve learned and build an API server

Time to put what you’ve learned on the back-end to work, and build your first API server.

Watch this video to learn how:

Once you are done with this, use a fun API that I found here to build a simple app. This is my favorite one.

Step #21: Add further back-end knowledge

Learn some basic Web Architecture concepts by reading this article.

Then, learn the difference between server-side rendering, client-side rendering and pre-rendering (static site generator).

Step #22: Learn SQL

OK so the last ‘major’ element to learn on the back end, (other than pushing projects live), is how to collect, manage, store, and manipulate data within your applications.

And one of the best languages to manipulate databases is SQL.

Again, everything in this roadmap is covered in our Complete Full-Stack Web Developer Course, where we show you how to use both types of DBMS (Database Management System):

• Relational Databases with (PostgreSQL), and
• Non-Relational Databases (with MongoDB)

Don’t worry if all that seems confusing. The naming simply refers to how they store and process data. Once you get to this step and start working with these, it’ll be super clear how they work.

If you want to deep dive into SQL, we also have a dedicated SQL and databases course.

Want a sneak peek? You can watch the first 8 hours of our SQL and Databases course below for free:

Not only that, but we also have some excellent SQL projects that you can practice with and use to boost your portfolio.

Step #23: Apply what you’ve learned. Build a database

Again, it’s time to put what you’ve learned into practice. Go ahead and build a server using SQL, so that you can then connect this with the server you built earlier.

Build a small project using a database you create here.

Then, go a step further and create an app using firebase as the database and use firebase to set up user login/logout.

Step #24: Deploy your project

At this point, all that’s left is to connect the front-end and back-end of your app, and then get it deployed online!

Same as before:

• Deploy your React app on GitHub pages
• Deploy your React app on Netlify

Oh, and add it to your portfolio website for employers to check out 😎!

What’s next?

Congrats, you made it! You’ve learned pretty much everything you need to know to be a working Full-Stack Web Developer excluding a few small things.

Now’s the time to keep practicing what you’ve learned through the roadmap, build some more portfolio projects, prepare for the interview, and apply for jobs.

Sure this is a lot to learn, but this is a whole new career. As we said earlier, you’ll be surprised how fast the time will go by once you start to learn. Heck… the time will pass anyway, so why not change your life and career and become a Full-Stack Web Developer?

If you want to go the free route, then the roadmap above along with my learn to code for free article will be the fastest path for you to follow on your own.

If you want to fast-track your journey though and have some help along the way, then make sure to follow our Full Stack Developer Career Path.

You’ve got this!