Web Development Roadmap-'The Base-Builder'.
Tags: beginners, webdev, node, javascript
Published: 2020-06-01 15:35:45

<b>
Web development is a rapidly growing field in software development. Every beginner would love to put his hands on this fragment.
 </b>
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.
<h4>
Before moving forward, let's look at a website from very high level.
</h4>
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. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eprqmov1naft29ox6io6.jpg)
<sub>(Img Src: Self Taught Coders)</sub>
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. 

<b>Hence every web application has (atleast) these three parts:</b>
1. The part which is visible on Client Side (or what we call as **FRONTEND**).
2. Server Side (**BACKEND**).
3. Database.

<strong><i>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" </i>
</strong>
<h4>
Roadmap: Part-1 -> The Front-End
</h4>
A webpage is built considering three points which are provided by three different technologies:
<b>1. HTML:</b> The most crucial basic building block of a website. It defines the content and structure of the webpage.
<b>2. CSS:</b> 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.
<b>3. JavaScript:</b> 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.
<h4>
Roadmap: Part-2 -> The Back-End
</h4>
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.
<h4>
Roadmap: Part-3 -> Databases
</h4>
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.*
 **