<DAY- 1> Web Dev | Love Babbar’s Course

Love Babbar has recently launched his Web Development course on YouTube. This is another initiative by him after the complete DSA series. Consistency has always been my problem, but recently I have started to be more consistent, this blog series is for “showing off my work” which would challenge me to remain consistent and might help you by giving you a quick revision guide.

Introduction

This blog contains an overview of Lecture 1 of Love Babbar’s Web Development course. Here we will discuss the following topics.

Table of Contents

1. What is the web?
2. Website vs Webapp
3. What is web development?
4. What is Full-Stack Developer?
5. Outro

What is the web?

We all work on the Internet and it has become an inevitable part of our lives. The web is a subset of the Internet. Web or WWW stands for world wide web. It is an interconnection of files (documents, photos, videos, etc).

Website vs WebApp

Both websites and web apps run on (and through) the Internet and might seem similar at times but they are very different from each other.

A website is a collection of web pages that are static in nature. It is mainly for ‘read only’ purposes and has minimal or no user interaction. If we refresh a website its UI (User Interface: What we see on the screen) won’t change since the content is static.

For example, Wikipedia. In Wikipedia, a user can log in, click on links and read the information. Other than these, there are only a few use cases such as search.

(Source — Wikipedia)

A web app on the other hand is dynamic in nature, which means it can interact with the user to perform a certain set of functionalities. It has more user interaction than websites. If we refresh a website its UI will change since it has dynamic content

For example, LinkedIn. On LinkedIn, a user can create a post, like a post, comment on the post, and can also reply to them. There are multiple sections such as profile, groups, news, feed, messaging, etc. We can see that it has much more interaction than a static website.

Before Refresh/Reload

After Refresh/Reload

We can see that the UI of the web app has changed upon refresh.

To summarize, if the content is dynamic and has great user interaction, then it is a web app. Otherwise, if the content is static and mainly for read-only purposes just like this blog then it is a website.

What is Web Development?

Web Development is the process of building a website or web app. The individual who does web development is called a web developer.

What is a Full-Stack developer?

Web Development consists of various sub-processes.

1. Creating the User Interface: This process is basically designing the look of the website (web app). It does not include user interaction (called user experience) and is generally referred to as Front-End. It can be implemented through HTML, CSS, React, etc. In simple terms, if we imagine a website to be a TV, Front-End will be the outer structure of the TV. A developer who looks after the front end is called a front-end developer.
2. Creating the functionalities: This process includes programming the logic of the website. It is called Back-End. It tells us what will happen when a user interacts with the website. For, eg. Pressing the + button will open a dialog box to write a post. Considering our previous example, Back-End will be the electrical components inside a TV that make it function. It can be implemented through express.js, node.js, etc. A developer who looks after the back end is called a back-end developer.
3. Database Layer: Any raw information when presented in a suitable format is called data. The collection of data is called a Database. For displaying content to the user, the data needs to be fetched from the Database. It can be implemented through MongoDB, etc. If we assume a TV to be a website, the data will be movies and shows which are fetched from their respective channels.

A developer who can work as both front-end and back-end developers while handling the database operations at the same time is called a Full-Stack developer.

Outro

If you are reading this, thank you for reading so far! I know you might find the quality of content low here, but it will improve with time. This is because I have tried to keep it as beginner-friendly as possible. This is just the beginning! A few introductory lecture blogs will contain some extra information, after that it is going to be a pinpoint precise summary just like lecture notes.

How to make the best of Love Babbar’s course? By watching the videos consistently and doing all the homework on time. Read documentation from MDN and W3 schools on the same topics taught in the video. Try to use your creativity and add your own features while implementing the project to give it a personal touch. Last but not least — Practice, Practice, and Practice.