Welcome to Web Dev Wisdom!
If you've ever wondered about making websites without diving into confusing tech talk, you're in the right spot. This blog is your friendly GPS through the world of web development, keeping things simple and easy to understand.
Why need a Roadmap?
Roadmaps for web development function as simple instructions for beginners. They keep you moving forward in a challenging field. You can divide your study into simple sections using roadmaps; start with the fundamentals. They aid in goal-setting, tracking your advancement, and effective time management. They also allow you to choose your own pace and recommend the best resources. Roadmaps are your compass in a rapidly evolving industry like web development. They help you stay motivated, focused, and well-equipped for success.
Full Stack Roadmap
These days learning Full Stack Web Development is a bit difficult because there is so much conflicting information available about various technologies that you should or shouldn't be learning. For a beginner, this may be the most difficult maze to solve.
So in this blog, I will share the most streamlined approach from start to finish that you can start today or use to guide your progress if you've already started.
Let's begin without further ado with
FRONT-END
HTML
Hypertext Markup Language, or HTML, is the first thing you should learn because it is the language used to define the content and structure of a website. For example, if you had some text that needed to be on a website, you would need to define what a heading, what a paragraph, and so on are using HTML. For now, the goal is to be able to take some simple text and turn it into a basic HTML document.
CSS
After learning the fundamentals of HTML, it's time to learn about CSS, or Cascading Style Sheets, which is how we add style and layout to a page. Essentially, this is how we take our content and make it come to life by giving it some colours and a layout and describing exactly what it should look like. Now that you've completed a small amount of CSS, it's time to take a break and try working on your first project.
PROJECT - For starting a Portfolio Website or Resume using HTML and CSS is a good choice.
NOTE - I strongly believe that you should be actively learning, so instead of merely watching tutorials, make sure you're engaging in activities that will help you learn new things and evaluate your existing knowledge. So escape the Tutorial Hell and add up some projects to your arsenal.
It is also an excellent time to become comfortable with the developer tools, which you can use to test your CSS and sort of toggle different properties and try out different things for the time being.
JavaScript
Now that you've completed your first project, first of all, congrats, it's time to move on to JavaScript. JavaScript is how we add interactivity to our websites; it will be the primary programming language used on the web. Therefore, to begin, you must simply learn the language's fundamentals, which will likely take the longest amount of time. I'd recommend you go through some courses, whether it be available on YouTube or free courses at Scrimba.
DOM
Now that you've mastered this new ability to include some interactivity in your website, you can move on to DOM (Document Object Model) Manipulation, which is how we utilize JavaScript to change the contents of the website thus how we add that interaction to it. Once more, a project is due.
PROJECT - A decent project to tackle here would be to create some game in the browser, such as tic-tac-toe or Sudoku. You can either take whatever website you have developed and add some interactivity to it or design an entirely new one.
NOTE - You'll likely discover that it's the most difficult thing you've ever attempted, but that's a good thing because it will provide you with more opportunities to practice new debugging techniques. Therefore, learn how to use JavaScript with the dev tools, as well as how to Google JavaScript problems and search for them on Stack Overflow. Additionally, I'd recommend trying to use chat GPT a little bit whenever you run into problems. However, don't just copy code from Stack Overflow or GPT or whatever it is use them as tools to teach you how to do things but do try to start incorporating them into your workflow.
Terminal
I'd also advise you to learn how to use a terminal. You only need to learn the fundamental commands, so you can change directories, rename files, move files around, and delete files, among other things. One more thing you should learn with the terminal is how to use Git and GitHub. Git is a version control system that simply records all of your changes, similar to Google Docs history but only for coding. GitHub is a platform for sharing code.
Deep Dive
Okay, so you now have this amazing website with some interactivity, but it's time to level up your skills a little and revisit some of the topics that we kind of skimmed over earlier, so with HTML, I'd focus on how to write accessible HTML, and with CSS, I'd focus on responsive design. If you're particularly interested in CSS, you can learn things like transitions, and animations, how to create selections that are more sophisticated utilizing pseudo-classes and pseudo-elements and the grid layout system. To be clear, I don't think you have to do this; I'm just mentioning it in case you happen to be interested in CSS.
You can also use this time to learn some CSS Frameworks like Bootstrap and Tailwind, which are essentially just pre-recorded CSS for you, or you can explore some preprocessors like SASS or Less, which add some interesting features to CSS.
BACK-END
Fetch
It's time to start working with the back end now that you should feel fairly comfortable on the front end, so what I would suggest doing at this point is learning how to make a server request from the front end using JavaScript, how to use Fetch, and how to write asynchronous code. To do this, you can simply use some public APIs, or application programming interfaces, which essentially just allow you to make a request and their server will send some information.
Node.js and Express
Now to start writing some back-end code I'd recommend you learn Node js with Express. The reason I say this is because Node.js allows you to use JavaScript on the back end so you don't need to learn a whole new programming language just a few new functions for JavaScript and Express is a flexible web framework for Node.js that offers a wide range of functionality for both web and mobile applications. With the node, you also need to learn npm or the node package manager which just allows you to integrate open source code into your projects and you'll be using this a lot more in the future.
Databases
Typically, with a back end, we need to store some information that truly survives over time. There are two main sorts of databases, and I would learn a little bit about each of them. We have SQL databases and NoSQL databases. SQL is a relational database, so this just lets you have a bunch of different tables and have them somehow be related to each other. There are many different flavours of SQL, most of which are very similar to each other, but MySQL is probably a good starting point. A NoSQL database is just any other type of database, so it could be a document store or some sort of key-value pair system, among other things. Let's start with MongoDB just because it happens to be the most popular one. Subsequently, of course, if you ever require a different sort of database for a particular purpose, you can learn it at that time.
PROJECT- It's time to create your first full-stack project now that you should understand the fundamentals of back-end development. Feel free to use your imagination, but if you need inspiration, consider adding a persistent leaderboard to the game you previously created or creating a productivity app that uses a database.
FULL STACK+
Now, you might be wondering where frameworks and libraries like React, Vue, and Angular are. We took so long to learn these, in my opinion, because frameworks and libraries are simply a simplification process that provides some pre-written code to simplify the development process. However, if you just jump right into these Frameworks and libraries from the start, you're going to find it difficult to learn them and understand everything they do. If you don't grasp the code that they are replacing, you won't be able to construct your applications without the frameworks and libraries, therefore once you reach this stage, it's time to start learning them because they are crucial for the industry.
React
Since React is the most widely used, has the greatest ecosystem, and is a result of all these factors the most marketable skill, I would recommend starting there. Of course, if you'd rather learn anything else like Vue or Angular, you may do that as well.
PROJECT - Time to start a new project, I simply take the previous project you completed and translate the code into React for this one.
Typescript
At this point, I would also learn Typescript, which is a superset of JavaScript. Typescript only adds strict typing, which allows you to define the types of everything you write in JavaScript, which can be very useful in larger code bases and for open-source.
Computer Networks
Now that you've spent a lot of time writing code, but not much time considering how that code even actually gets to the browser or how the entire internet thing works, I'd recommend learning a little bit about computer networking because it will be crucial in the future. Start by understanding the fundamentals of, roughly speaking, what happens when you type some URL in your browser; if you can do that, you're probably good with computer networking. Unless you're just curious about it and want to delve deeper, which necessitates knowing about things like IP addresses, HTTP, HTTPS, and the DNS system.
Cloud Computing
You have been developing these websites, but we only know how to run them from our computers, so now is the time to learn a little bit about cloud computing. If the power went out in your home, your website would go down, and that's not good, so what we want to do is learn how to use the cloud instead. Amazon with AWS will be the biggest cloud computing supplier, Azure from Microsoft and GCP from Google. For now, just learn how to deploy your web application to the cloud. I'd suggest starting with AWS because it's the most well-known, but all of them are acceptable options, and for many things, you don't need to get very detailed for now.
Infrastructure
Now that you're learning how to use the cloud, it can also be beneficial to dive a little deeper into infrastructure and learn how to use tools like Docker and Containers, which essentially just allow you to ensure that your code will run in isolation and the same environment every time it runs, wherever it is.
Web Security
The ability to protect not only your website but also the data of your users requires a solid understanding of security. To do this, you must first understand some of the more common attacks that could be made against your website, such as SQL injection, cross-site request forgery, or cross-site scripting. Then you must learn about the various concepts being used to prevent these types of attacks, things like CORS (Cross-Origin Resource Sharing) and Input Validation on both the front end and the back end, as well as just encryption—ensuring that we're using HTTPS and that we're encrypting user data like passwords—are all necessary to prevent these types of attacks.
Next (SSR)
Now that you're creating these amazing websites, you need to ensure that they're effective and that they rank highly in Google search results. A good way to do this is to use Next JS and, more generally, to learn about Server-Side Rendering, which enables you to render some components on the server and send them back to the front end as raw HTML. This not only makes your pages more effective but also makes it simpler for Bots used by Google to actually understand the contents of your page and properly index them in search engines.
Conclusion
Naturally, as you learn all these different things, there will be things you like and don't like very much, so feel free to skip over some of the less significant lessons you might not like as much and delve deeply into the lessons you do like. However, as you do this, you want to ensure that you're still learning in the right way.
You can learn all of the skills mentioned above necessary to become a Full Stack Web Developer using YouTube, thanks to freecodecamp and a variety of other incredible channels.
I'll remind you once more that you should be actively learning, therefore do projects that will help you learn new things and assess your current knowledge rather than only watching tutorials.
And remember, stay curious, keep learning, and stay ahead in the exciting world of web development!
For more informative blogs like this, check out my other blogs. Do give me a follow if you love my content. Thank You.
See you all very soon.