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.
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.
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.
I’m going to divide the steps in this roadmap into several chapters which are sorted below from basic to advanced:
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:
Alright let’s begin…
- 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.
- 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.
- 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.
- 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.
- 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.
- HTTP Reference: Lots of useful information including HTTP request methods, response codes, headers and so on.
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.
- 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.
- SQL Quick Reference and SQL Keywords Reference: Because ain’t nobody got time for memorizing all that.
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.
- 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.
- 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.
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.
- 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.
- 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.
- 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
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.