So you've finally decided to take that bold step of learning to code, perhaps for fun or to get a new job and settle into the IT industry. You decide to take on Web Development and search on Google how to go about it, but you get carried away by the vast amount of information and opinions you get.

Should you become a Front-end developer? Back-end developer? Full-stack or Senior Developer? Should you learn React or Angular? Is No-SQL better than SQL databases? What is the MERN stack?

Technically there's an information overload out there and it's easy to get lost in all of it. I won't say this article is any different from the others you've read on getting started in Web Development, 'cos it's not, I just intend to make it more definitive.

STEP 1: KNOW THE BASICS

Yeah, before you get on to building the Instagram clone or any fantasy project of yours, you've got to appease the basics which are:

• HTML - HyperText Markup Language

HTML allows you to lay the basic foundation for your website or web app. Though it's an ugly thing both when typing it and when it's visualized on a browser, it's a necessary evil. While learning HTML you need to get familiar with the Semantic Tags. It's also important to know that HTML is not a programming language but just a markup language

• CSS - Cascading Style Sheets

Now CSS allows you to style your ugly-looking HTML code into something visually appealing and somewhat lovable. While learning CSS you will need to get acquainted with basic CSS syntax, Positioning, Selectors, Layout(Flex & Grid), Transitions and Animations as well as Responsive Design.

• JavaScript

JavaScript is a real programming language and I mean as real as it gets. You can use JavaScript to create websites, games, mobile apps etc. But for this article, you can use JavaScript to add functionality to your website like clicking a button to give the site a dark theme. Equally, while learning JavaScript you need to get quite comfy with basic JavaScript syntax, data types, DOM & styling, JSON, HTTP Requests etc.

Other technologies worth learning at this stage include:

• Version Control System (e.g Git)

• Browser Developer Tools

• Deployment (e.g Netlify)

Now you know the basics of Web Development, where should you go from here? You are literally at a crossroads, if you've enjoyed building the UI or visual part of websites as you've done so far you should continue with step 2, but if you are more drawn to logic than visuals then feel free to skip to step 3.

STEP 2: BECOME A FRONTEND GURU

It's time to get into the hamburger of Web Development, making your user interface (UI) better and a lot easier to create. Just kidding, it will be better looking but not easy to create, on the first try. Now you need to learn some more annoyingly awesome technologies.

• SASS - Syntactically Awesome Style Sheets

SASS is a CSS preprocessor/pre-compiler/library or whatever you want to call it. SASS extends some of the features of CSS and makes it feel more like a programming language by providing features such as variables, nesting, partials and functions. It is used for styling websites and is a must-know for front-end developers, at least in my opinion.

• BOOTSTRAP

Well, well, well, let's talk about something that can make your life a lot easier, Bootstrap. Bootstrap is CSS already created for your comfort, meaning you don't have to style your buttons, headings, padding etc from scratch. Just add the bootstrap class to your markup and problem solved. It's something worth learning as it can make your life a whole lot easier and your development work faster.

• A FRONTEND FRAMEWORK

Frontend frameworks allow you to create complicated user interfaces(UI) that you could build with vanilla JavaScript but would be too time-consuming. They do this by providing the developer with reusable code modules. There are a lot of frameworks out there you could choose from, but these are some of the more popular and established ones: React, Vue, Angular and Svelte.

Now you might just be wondering, which one of these nerds should I choose? Well, that depends on the requirements needed for the job you are applying for or the project you're working on.

Generally, Svelte is the easiest to learn but not the most stable as it's relatively new, React is intermediate and Angular is the most difficult to learn not for the most terrible reason though. Vue, while having a relatively easy learning curve, also provides high productivity and stability that Svelte currently doesn't have.

Now you know the basics to become a frontend guru, some other technologies worth researching but not necessary at this stage include:

• TypeScript

• Server Side Rendering

• Static Site Generators

• The JAM Stack

With your knowledge till this point, you can now create your jolly Instagram clone, Twitter clone and other cloneable that never asked to be cloned but are worth cloning because we just enjoy cloning them.

STEP 3: BACKEND

Now let's get into the brains of web development. I call it the brains not because the front-end does not involve brains but because... whatever let's just get into it shall we?

• SERVER-SIDE TECHNOLOGY AND FRAMEWORK

This can range from Python to Java. Here you've got to know a programming language and a framework for manipulating the backend of your web app. So I'm gonna leave you with a merry list of programming languages and their preferred frameworks for backend web development.

• Node.JS - Express

• Python - Django & Flask

• Java - Spring MVC

• Ruby - Ruby on Rails

• PHP - Laravel

• C# - ASP.NET

• Kotlin - Javalin, kTor

You could pick one of these languages, learn its basics and get on with a backend framework of its own. None is better than the other. Dear, just pick a language you are comfortable with and get on with its dummy framework.

• DATABASES:

Well, well, your web app can't possibly be complete without being able to store data, manipulate data, present data and eat data too. This is where databases come in as they can make organizing, storing, updating and deleting data a whole lot easier than trying to understand the logic behind Spongebob SquarePants, I mean how can there be a Fire Department under the sea? Sorry, I digress. Anyway, there are majorly two kinds of databases you've got to worry about now:

• SQL DATABASES

SQL(Structured Query Language) databases allow you as a developer, coder, and software engineer, man there are so many names for us these days, to store data in tables and create relationships between them. SQL databases are used in the Finance industry as well as other industries such as Music and Social Media. Examples of SQL databases include PostgreSQL, MySQL, Oracle Database etc.

• NO-SQL DATABASES

Like the name implies, No-SQL databases

are Non-SQL. Unlike SQL databases, they store data in a JSON (JavaScript Object Notation) format which looks like objects in JavaScript and dictionaries in Python. No-SQL databases provide more flexibility than SQL databases. No-SQL databases are great for gaming, social media, the Internet of Things (IoT) etc. An example of a No-SQL database and the most popular of them all is MongoDB.

Now that you've gotten your head around databases you might just be wondering which is better. The answer is actually up to you, depending on what you want to build you have to find the suitable database type for your project.

Before wrapping up this lengthy section, there are some technologies that I think are worth looking into to become a better developer and you should look them up, but again it's totally up to you:

• REST API

• GraphQL

• Docker

• Jenkins

• Kubernetes

• Vector Databases

• Artificial Intelligence

So there you have it, a complete web-developer roadmap that is easy to read and yet completely difficult to stick to, even for myself, because every new technology out there is super exciting and tempting to dabble with. I'll be leaving you with the words of an ancient wise developer on YouTube who said "You don't have to learn every new technology out there".

I'm not saying be stagnant and not learn new stuff, 'cos that's what we signed up to do as developers, but if you find yourself having a "knowledge overload" and the whole development process becoming a burden then stop and breathe and try to find the balance, I know you will.