A Beginner’s Roadmap to Becoming a Full-Stack Web Developer

0 Comments

I’ve been learning about web development for a while pretty much from scratch. I’ve gone over numerous guides, tutorials and documentation from various resources, among which I took note of the important and beneficial ones that I believe a beginner will benefit from the most. In this article, I’m going to share them with you as a roadmap that you can follow if you want to become a full-stack web developer in a fun and efficient way.

Introduction

Let’s make one thing clear. There are lots of programming languages, tools and frameworks out there in the world of web development. In most cases, there’s not a single best way to solve a problem. However, as a beginner, you shouldn’t attempt to learn every new thing for the sole sake of learning, or just because some people are hyped about it. On the contrary, you should aim to acquire the bare minimum skill set so that you can start building stuff as soon as possible.

For instance, you’re going to have to learn JavaScript in order to write browser (front-end) code no matter what. And guess what, there’s something called Node.js which lets you write server-side code using JavaScript as well. Now I’m not arguing here whether Node.js is the best option for developing your back-end or not. However, it’s certainly convenient to be able to build an entire web application by having to learn just one programming language. A deal too good to pass up, don’t you think?

You can (and should) always learn about other technology trends once you master the basics and have a solid understanding of how the web works.

Roadmap

I’m going to divide the steps in this roadmap into several chapters which are sorted below from basic to advanced:

  • HTML & CSS
  • JavaScript
  • Node.js
  • MySQL
  • React.js
  • Docker

I’m also going to label each item in a category as fundamental, optional or reference. I strongly advise against advancing to a category before completing all the fundamental steps in a previous category. You can postpone optional steps if you want, or skip them altogether if you’re feeling too lazy. References are not meant to be gone through from start to end. You’ll find them useful in the future when you forget some detail and want to quickly look it up, or when you need further information about a specific topic in the corresponding category.

By the way, I didn’t mention this above but if you don’t know how to use Git, stop whatever you’re doing and learn it ASAP. Don’t worry, it’s not going to take long. Actually this 30 min YouTube video is more than enough to get you started. Just make sure that you know how to use the following 7 simple commands for starters:

  • git init
  • git status
  • git add
  • git commit
  • git clone
  • git pull
  • git push

Lastly I just want to say that if you haven’t used Visual Studio Code yet, you should definitely give it a try. I think it’s an amazing code editor, especially for JavaScript.

Alright let’s begin…

Chapter 1 – HTML & CSS

Learning HTML & CSS is definitely where you want to start as a beginner. Once you have a solid knowledge, these two will let you build structured, elegant and responsive websites with static content such as a blog or a portfolio page. You’ll also use this knowledge in the following chapters where you’ll deal with browser-side JavaScript code or a front-end framework such as React.

Fundamentals
  • HTML Crash Course: HTML for absolute beginners.
  • CSS Crash Course: CSS for absolute beginners.
  • Responsive Design Tutorial: Responsiveness isn’t just a nice feature anymore in modern web design, it’s the default.
  • CSS Grid Tutorial: CSS Grid lets you easily arrange HTML elements in two dimensions on a web page.
Optionals
  • CSS Flexbox Tutorial: This is a useful yet optional item because it doesn’t really provide any extra functionality if you already know CSS Grid.
  • SASS Basics: SASS makes it simple to deal with CSS in complex websites. You’ll most likely find it useful in the future, but it’s not mandatory at this point.
  • Social Network Theme With SASS: This video clearly explains how to design a realistic website from scratch using SASS.
References
  • HTML and CSS: Don’t try to memorize everything. You can always look it up.
  • Netlify and Heroku: Come back here when you want to deploy your app.

At this point, I have to also mention some CSS frameworks such as Bootstrap and Materialize. Most people will advise you to learn one because these can really speed up your development process. IMHO this approach isn’t going to help you fully grasp the basics of web design. I think you should stay away from them until you’re comfortable with styling websites with your bare hands.

Chapter 2 – JavaScript

Being the only programming language that can possibly be used on the front-end side, JavaScript is an essential part of web development. As I mentioned earlier, you’re going to be able to develop back-end code with it too, once you learn Node.js as well.

Fundamentals
  • The Modern JavaScript Tutorial: This is by far the most important item in this list, maybe even in this whole roadmap. It’s going to take some time, but you should absolutely complete at least the first two parts. Since JavaScript is going to be your primary tool as a web developer, you won’t regret investing your time on learning it properly. The good news is, learning JavaScript is fun and you can build cool stuff with it as you learn.
  • What the heck is the event loop anyway?: Knowing how JavaScript works behind the scenes will give you a deeper understanding of the code you write.
  • async & await in JavaScript: Promises and async/await might get confusing if you’re not familiar with asynchronous programming. Check this video out after reading the corresponding section in The Modern JavaScript Tutorial in order to see some real action.
Optionals
  • Practical JavaScript: I’m listing this one here because The Modern JavaScript Tutorial covers everything in it and then some. You can consider it as an optional preliminary step for this chapter.
  • Modular Javascript: This one is a bit outdated in terms of JavaScript language features, but it’s still a good tutorial for learning basic design patterns.
  • RegEx Tutorial 1 and/or RegEx Tutorial 2: While not strictly a JavaScript thing, knowing a little bit of RegEx can make a big difference in your efficiency as a developer.

On a side note, it’s not necessary to learn jQuery unless you have to read and/or modify existing code that uses it. Vanilla JavaScript is equally powerful today except for a few use cases.

References
  • The Modern JavaScript Tutorial: Let’s face it, you won’t remember everything in this tutorial after reading it once.
  • Chrome DevTools: This is an excellent reference if you use Chrome developer tools. Besides JavaScript, you can find lots of useful information in it regarding HTML & CSS too.

Chapter 3 – Node.js

Node.js is an asynchronous event-driven JavaScript runtime built on Chrome’s V8 JavaScript engine, which is designed to build scalable web applications. You’ll have acquired the minimum skill set to build an entire dynamic web application after completing this chapter.

Fundamentals
  • A Beginner’s Guide to NPM: This is a quick guide on how to install and get started with Node.js and the Node Package Manager (NPM).
  • Node.js Crash Course: A good introductory video to learn Node.js basics.
  • Express Crash Course: In this video, you’re going to learn about a very popular Node.js framework called Express, which is widely used for developing web applications.
  • Building a RESTful API with Node.js: An amazing YouTube playlist which walks you through the process of building a practical REST API using Node.js and Express. You’ll also learn how to interact with a NoSQL database called MongoDB along the way.
Optionals
  • Node.js Presentation: A presentation of Node.js by its original developer Ryan Dahl. Check it out if you want to learn what kinds of problems Node.js has been designed to solve and how it handles I/O compared to some other back-end frameworks.
References
  • HTTP Reference: Lots of useful information including HTTP request methods, response codes, headers and so on.

Chapter 4 – MySQL

You should’ve learned a little bit about MongoDB in the last chapter if you completed all the fundamentals. Now it’s time to learn some SQL. I think MySQL is a good place to start learning about relational databases.

One thing I would recommend you is, don’t just go with the flow and automatically opt for NoSQL just because everyone is using MongoDB with Node.js these days. This decision requires rational thinking and comparing the pros and cons of each option. There’s a good chance that a relational database is going to fit your needs better for your first real application as a beginner.

Fundamentals
  • MySQL Crash Course: A very good intro to SQL.
  • Using MySQL with Node.js: Learn how to make use of SQL queries as part of a REST API built with Node.
References
  • SQL Quick Reference and SQL Keywords Reference: Because ain’t nobody got time for memorizing all that.

Lastly, Object Relational Mapping (ORM), e.g. Sequelize can be tempting to use at first but I say stay away from them before fully grasping SQL. Have a look at this if you want to know why.

Chapter 5 – React.js

So far you’ve been building your front-end using plain JavaScript. And that’s perfectly fine if you want to become a back-end developer. In that case, please proceed to the next chapter in an orderly fashion.

If you’re still here, we’ve got a little bit of additional work to do. Almost all front-end or full-stack development job openings these days require some knowledge about a front-end framework, particularly either React, Angular or Vue.

At the end of the day, choosing between them really boils down to personal preference unless you want to apply to a specific job. I opted for React after some research, and therefore that’s what I recommend you to learn as well. You might also want to check out some statistics if you’re feeling skeptical about it.

Fundamentals
  • Intro to React: Learn React by building your own tic-tac-toe game!
  • Create React App: Learn how to quickly initialize a React project in a Node.js environment.
  • React Crash Course: Come on now, finish off all the React on your plate.
Optionals
  • React & Redux Tutorial: This is optional because it might feel a bit repetitive after completing the fundamentals. You still might want to watch this series if you want to learn about Redux.
  • React Hooks: React Hooks is a relatively new and cool feature, although I don’t think it’s something you absolutely have to learn at this point.
  • Adding SASS to React: This will only make sense if you haven’t skipped SASS in the first chapter.

Chapter 6 – Docker

Congratulations! You’re now officially a full-stack developer. Go ahead and pat yourself on the back. You must feel like how Neo felt just after he learned Kung Fu. But you still have to complete this chapter if you don’t want to get your ass kicked by Morpheus.

To some of you, Docker might not appear as an absolutely necessary thing to learn. While that’s not incorrect, it’s an investment you’re not going to regret.

Fundamentals
  • Docker Overview: Just so you know what you’re getting yourself into.
  • Get Started Part 1 and Part 2: Learn how to set up your Docker environment, build an image and run it as a container.
  • Dockerfile Tutorial by Example: Learn why and how to create a Dockerfile.
  • Getting Started with Docker Compose: Because single-container apps are for losers.
  • Docker Compose Tutorial: Keep calm and Docker Compose.
Optionals
  • Data Management in Docker: Learn how to persist data in host machine even after the container stops.
  • Environment Variables in Docker Compose: Learn how to deal with environment variables in Docker Compose.
  • Networking in Docker Compose: Learn how to specify custom networks for your services.
References
  • Dockerfile Reference: In case you forget how to create a Dockerfile.
  • Dockerfile Best Practices: In case you forget how you should create a Dockerfile.
  • Docker Compose File Reference (v3): In case you forget how to create a Docker Compose file.
  • Docker Compose Command Line Reference: Usage information for the docker-compose subcommands.

That’s it, I hope you enjoyed following this roadmap. I’m sure there are many more useful resources out there that I’m not aware of. Feel free to leave a comment below and share anything that may be helpful to other readers. Also don’t forget to subscribe if you want to get updates on my future articles.

More Stories

May be missed