Web development: A Roadmap of 6 steps

In the simplest form, web development is the process of making functional websites / web apps. Like the one you are seeing right now, and everything you encounter in the web.

While its example and applications are everywhere, to become a web developer, or to simply learn web development, there are plenty of skills you should be familiar with, and this what I am going to talk about in this post, along with my preferences (yes there are many choices you need to make too). So without further ado, lets begin

1. Networking basics

While a lot of people might not stress telling about you this, but according to me, knowing the bits and bytes of computer networking is going to make your task of learning the others really easy. You would be tackling terms like – IP address, PORT numbers, HTTP methods etc. and having an idea of what they are will give a sort of familiarity of what you are learning .

There are many learners who consider this a new concept (some what alien) of web development, but its not. Its a thing web development is built on.

2. HTML, CSS and JavaScript

Don’t spend a lot of time learning them, just understand how they work with each other, as these are the standard language of creating a website’s interface the users interact with.

  • HTML – Defines the structure of a website.
  • CSS – Defines the style / look of a website.
  • Javascript – Defines the logic inside a website. Like what action would occur if someone click on a link etc.
html css, js web development

HTML, CSS and JavaScript together create what we call the frontend of a website. As already stated earlier, they build up the client side interface only. These are not the only languages involved in web development.

Do you know why ? Well you probably know that another aspect of a website, along with its interface, is the data it stores, where it stores its data (database) and how it manages a clients request, and most importantly how the site is served. And all these things concerning the origin of a website, fall under the backend of a website. The thing we will be talking about soon.

3. Choosing your backend language/s and framework/s

There are many backend languages you can learn to use. In fact, you can even use more than one languages to create a website’s backend, so things get crazy( if thats what you are into).

Here are my top picks for you.

  1. JavaScript
  2. Python
  3. PHP
  4. Java
  5. GoLang

If you want to know the specifics about each, you might wanna refer to this post —>

Most of the times, you would be utilizing some, library or framework specific to the language you are using, to design the backend. Here are some of the most famous frameworks / libraries provided by the languages stated above.

  1. Javascript – express
  2. Python – Django, Flask.
  3. PHP – Laravel
  4. Java – Spring, struts
  5. GoLang- Gin, beego, echo

According to me, you should go with JavaScript, along with its library Express. JavaScript is the most popular backend language, and that also means, you would not have to learn another language, you are using Javascript both for the backend and the frontend.

4. Choosing your Database

database - web development

Your site can’t exist just for its look. You would probably have plenty of users and data specific to each. And for that, you would need to have a database. Now there are many kinds of database. Mostly classified as

  • Hierarchical databases.
  • Network databases.
  • Object-oriented databases.
  • Relational databases. like PostgreSQL, MySQL
  • (maybe more idk)

But according to me, you should go with MongoDB, a document based database. Not too hard to understand, and probably the most emerging and convenient way of storing data today.

One another database management system you might have heard about, is MySQL. Well, it is in fact, the most used kind of database today, and indeed a powerful one.

But there are many advantages and reasons I think MongoDB is better. One very obvious reason I find, is that MongoDB lets you store data in any format. While MySQL and other SQL based system don’t. MongoDB is much more scalable, and gives a more ‘modern’ solution of storing data.

5. Choosing your Javascript framework

Most of the time, or probably, you won’t be using vanilla (plain) javascript to create logic for every page, instead you would use some javascript framework which is going to make your code much more smaller and efficient. The most known ones are :-

  1. React (actually a library)
  2. Angular
  3. Vue

Among these, I recommend learning react. Yes it takes some time to learn, but it should be relatively faster than learning the other two. Its right now, the most in demand, and powerful frontend tool.

6. Choosing your CSS framework

Just like Javascript, you won’t be using traditional CSS to design your site, instead use one of these:-

  1. Tailwind
  2. Bootstrap
  3. Bulma

But unlike js frameworks, learning one shouldn’t take any time.

The one I prefer is Taillwind.

Final Thoughts

To sum up here’s my roadmap to learn web development

  1. Learn the basics of networking
  2. Understand the workflow of HTML, CSS and JS
  3. Express
  4. MongoDB
  5. React
  6. Tailwind

Finally after taking an overview of all the above, try to learn a react based framework called NEXTjs. And that would be the last thing you need to learn. NextJS is considered both, a frontend and a backend framework, as it lets you control both through its features.

The main reason you need to learn NextJS, is because it makes your site SEO friendly by creating your site much more faster and organized. Its basically the key to make it go out in the real world. A lot of popular websites like Walmart, Apple, Nike, Netflix, Uber, Lyft, and Starbucks. So its worth adding to your roadmap too.

Thanks for reading this. Feel free to share your opinions in the comments.