Web Development Roadmap-'The Base-Builder'.

Web development is a rapidly growing field in software development. Every beginner would love to put his hands on this fragment.

If you are currently looking for grasping the concepts and knowledge of this technology for your college or personal project, the following roadmap can help you.

Before moving forward, let's look at a website from very high level.

Websites are not all about entering URL and viewing web pages. To create the full stack of website, you need to know how things actually work. I will not enter into very much technality, but to understand how things work let's look into this picture.

_{(Img Src: Self Taught Coders)}
When you enter URL in your browser(client), it sends a request to the server which then gathers the required data (from database) and sends it as response.

Hence every web application has (atleast) these three parts:

1. The part which is visible on Client Side (or what we call as FRONTEND).
2. Server Side (BACKEND).
3. Database.

Note: This roadmap does not involves very advanced frameworks. It is made for having a good exposure to build the base of a newbie. That's why I have named this roadmap- "The Base-Builder"

Roadmap: Part-1 -> The Front-End

A webpage is built considering three points which are provided by three different technologies:
1. HTML: The most crucial basic building block of a website. It defines the content and structure of the webpage.
2. CSS: The design of the webpage. It tells how the website will look to the viewer. Everything related to design like background, fonts, colors etc. are covered by CSS.
3. JavaScript: The behavior of the webpage. Here you define how website responds with user interaction. For example displaying of popup when hovering over some text etc.

Roadmap: Part-2 -> The Back-End

There are many technologies and frameworks through which you can create the server side of a web-application. I am listing most preferred ones below:

1. Node.js (JavaScript) or Deno (TypeScript).
2. PHP.
3. Python (Django Framework).
4. Java (Spring Framework).
5. Ruby on Rails Framework.

You can choose any of the above frameworks according to your comfort.

I have worked on projects using all the above frameworks and I prefer working with Node.js as it is comparatively light-weight, fast, easy to maintain and, most importantly, it's JavaScript. So no need for working on learning different languages for beginners.

Roadmap: Part-3 -> Databases

At the heart of an application, what really takes place is exchange of data.
We know that all the databases store data but the main factor that we should consider while choosing a database for an application is fast retrieval and storage.
There are databases that either store data in form of tables (relational databases) or not (non-relational databases).
For beginners, I would recommend the most popular database in the world i.e. MySQL database. The language syntax and logic is easy to grasp and is very effecient for data handling.

Integrating Database to Server

To integrate database with server, there are many drivers available. To connect a Node.js server to MySQL, we can use the node-mysql package. Similarly to connect Spring Boot to MySQL we can use JDBC driver or JPA. The drivers differ with every technology stack so choose one according to yours and use it to connect server to the database.

"Once I am done with above listed, how can I enhance my skills and technology stack?"

The roadmap above is for very basic full-stack development of a website. Nowadays web development has grown quite complex. There are many libraries, frameworks and technologies used across the world for web development. There is another roadmap; that I call the "STEP-UP" roadmap which will be posted soon :-).
**
This is my first blog post so I will really appreciate your views, corrections and suggestions.
Thank You.
**