HTML|Css|Javascript @ 11:00 AM (IST) by Mr.Ram Kumar Day-2

Course Focus: Web Technologies

The instructor reviewed the previous session’s introduction to full-stack development and said upcoming lessons would cover HTML, CSS, JavaScript, and Bootstrap. Together, these were described as web technologies. Adding frameworks or libraries is part of frontend development.

The Web, the Internet, and Technology

The instructor used the image of a spider’s web—many connected points—to introduce the idea of the web. The web was described as a way to share and collect information through interconnected resources.

The internet was presented as a public network that people can access. An intranet was contrasted as a private network used within an organization.

Technology was explained simply as something people create to reduce human effort. For example, communication has changed from letters that could take weeks to online messages that arrive almost immediately.

Web Pages and Websites

Web technologies are used to create web pages, and a website is a collection of web pages.

The instructor connected web pages to practical benefits such as shopping online, gathering product information, saving travel time, and having items delivered.

The Roles of HTML, CSS, and JavaScript

The instructor compared building a web page to producing a vehicle:

• HTML creates the page’s structure.
• CSS styles and arranges the page, including its colors, layout, and alignment.
• JavaScript adds functionality and interaction, such as search suggestions, changing images, or responding to button clicks.

An Amazon page was shown with CSS and JavaScript removed. This comparison illustrated how HTML supplies the basic content, while CSS and JavaScript make the page more polished and interactive.

Static and Dynamic Pages

The lesson contrasted two broad kinds of web pages:

• Static pages: Content is generally consistent for different visitors, with relatively little user interaction or database activity. Wikipedia was used as an example.
• Dynamic pages: Content and features can respond to the user through feeds, preferences, likes, comments, subscriptions, location, and other stored data. Instagram was the main example; Facebook, WhatsApp, and shopping or food-delivery services were also mentioned.

The instructor associated static pages mainly with HTML and CSS, and dynamic pages with HTML, CSS, JavaScript, and more database interaction.

Multi-Page and Single-Page Applications

The instructor described two application patterns:

• Multi-page applications (MPAs): Moving between pages generally triggers a new page load, with HTML, CSS, and JavaScript requested again. Amazon was used as an example.
• Single-page applications (SPAs): The initial page loads first, and later interactions can update only the relevant content instead of reloading the whole page. The instructor described later requests as returning data in JSON format. YouTube was used as an example.

SPAs can feel faster because they may load only the data needed for an interaction. The course was expected to focus on building multi-page applications with HTML, CSS, and JavaScript. Frameworks and libraries such as React, Angular, Vue, Ember, and Backbone were mentioned in connection with SPAs.

JSON and Data Reuse

JSON stands for JavaScript Object Notation. The instructor compared keeping previously obtained data available to storing food in a refrigerator: if the needed data is already available locally, the application may use it instead of requesting it again. Otherwise, it may contact an API for the data.

Class exercise: Open Amazon and YouTube, turn off the internet connection, refresh each site, and observe what happens to their content.

How a Web Request Works

The instructor outlined a basic request-and-response flow:

1. A client (the user’s device or browser) sends a request using a URL.
2. DNS translates the domain name in the URL into an IP address. DNS was compared to a phone contact list that maps recognizable names to numbers.
3. A server processes the request and may communicate with a database.
4. A database stores information such as user accounts, orders, payments, likes, comments, and messages.
5. The server returns a response to the client.

The instructor also named several server categories: DNS, email, FTP, proxy, and database servers. FTP was associated with transferring files, and proxy servers were described as routing traffic through another network or location.

URLs and Protocols

A URL is a web address used to reach a page or resource. HTTP stands for Hypertext Transfer Protocol, while HTTPS was described as its encrypted version. The instructor said HTTPS is generally used for deployed sites, while HTTP may be used during local development.

Technical Note

The contrasts between static and dynamic pages, and between MPAs and SPAs, were presented as teaching simplifications. A site’s actual behavior can be more nuanced, and the examples given are not absolute classifications.

Speakers and Sources Featured

• Mr. Ram Kumar — instructor and primary speaker.
• Unidentified students — responded to questions and asked follow-up questions.
• Illustrative websites and services mentioned or demonstrated: Amazon, YouTube, Wikipedia, Instagram, Facebook, WhatsApp, LinkedIn, Zomato, Swiggy, Flipkart, Meesho, Myntra, and Naukri.