Introduction to Web Development

Introduction to Web Development

This module lays the theoretical foundation for understanding how the internet works and how websites come to life. Before building anything, it is essential to grasp the core concepts: the internet as a global network, the browser as the access tool, the client–server model, DNS (Domain Name System), IP addresses, and the physical infrastructure (underwater cables). The module also introduces the two sides of development – frontend (user-facing) and backend (server-side) – and the broader societal impact of the web.

Tips for Learning Web Development

Effective learning requires a mindset shift. Follow these strategies to build real skill, not just passive knowledge.

• Watch first, then code. Do not write code while watching the video. Focus on understanding the element being taught.
• Pause and try on your own. After watching, pause the video and write the code yourself. If stuck, search your book or online. This builds problem-solving ability.
• Embrace frustration. Getting stuck is normal. Take a break, clear your mind, and return with a fresh perspective.
• Use resources. Search online, read the provided book, ask on forums – do not give up.
• Understand, don’t memorise. Coding is about understanding how elements work together, not memorising every line.
• Troubleshoot independently. Attempt to fix issues on your own before checking the solution.

Exam tip: The single most important habit is pausing and coding from scratch. This trains the same debugging mindset used by professional developers.

What is the Internet?

At its core, the internet is a massive network of wires and connections linking computers worldwide. When a computer in Mumbai sends a message to one in New York, the data travels through these physical wires.

Key Concepts

• Clients and Servers
  • Server: A computer that is always online and stores/sends information (e.g., YouTube videos, Instagram reels).
  • Client: Your device (phone, tablet, laptop) that requests data from servers.
• IP Address (Internet Protocol address): Every device connected to the internet has a unique numeric address (e.g., 132.431.53.134). It acts like a home address for computers and servers.
• ISP (Internet Service Provider): The company that provides internet access (e.g., Jio, Airtel, BSNL in India). It forwards requests from your browser to the DNS server.
• DNS (Domain Name System): Acts as the internet’s phonebook. Humans use domain names (e.g., youtube.com), but browsers use IP addresses. DNS translates domain names into IP addresses.

What Happens When You Load a Website?

1. You type youtube.com into your browser (e.g., Chrome).
2. The browser does not know the server’s location → it asks your ISP for help.
3. The ISP forwards the request to a DNS server.
4. The DNS server looks up the IP address of youtube.com and sends it back to the browser.
5. The browser now knows the IP address and can connect directly to YouTube’s server to load the webpage.

Physical Infrastructure: Underwater Sea Cables

Data travels across oceans through massive underwater sea cables laid on the ocean floor, connecting countries and continents. These cables transmit data at nearly the speed of light, enabling global communication in milliseconds. (A map can be viewed at submarinecablemap.com.)

Key takeaways

• The internet is a global network of physical wires; computers communicate via clients and servers.
• Every device has a unique IP address; servers are always online.
• DNS translates human-friendly domain names into machine-readable IP addresses.
• ISPs and DNS servers are intermediaries that help browsers find the correct server.
• Physical data transfer across continents uses underwater sea cables (speed-of-light latency).

Web Browser

A web browser is any application that fetches and displays web pages, letting you navigate the internet. Popular examples: Chrome, Firefox, Safari, Edge. When you visit a website, the browser sends a request to the server for the files that make up the page — then interprets and renders them into the visual interface you see.

How a web page loads

1. User enters a URL (or clicks a link).
2. Browser sends a request to the server.
3. Server responds with a set of files:
   • HTML – structure and content
   • CSS – styling and layout
   • JavaScript – interactivity and dynamic behaviour
   • Other resources – images, fonts, etc.
4. Browser processes these files sequentially (HTML first, then CSS and JS, then assets) to construct the final rendered page.

Files that form a web page

Each file plays a unique role; the browser assembles them in real time to produce the complete page.

Key takeaways

• A web browser is an application for viewing and navigating the internet.
• It loads a website by requesting files from a server.
• The essential file types are HTML, CSS, JavaScript, and additional assets like images and fonts.
• These files are combined and rendered by the browser to create the visual webpage.

HTML, CSS and JavaScript

Web pages are built from three core technologies that work together: HTML, CSS, and JavaScript. Each plays a distinct role — structure, style, and behaviour — and a browser combines them to render a complete, interactive page.

HTML – Structure and Content

HTML (HyperText Markup Language) provides the skeleton of a web page. It defines the content to be displayed (text, images, links) and organises it into a logical hierarchy: headings, paragraphs, lists, sections, and more.

• Think of HTML as the outline the browser uses to understand the page’s structure.
• On a blog, the HTML file holds the article text, titles, and image references — but looks plain on its own, without colours or styling.

CSS – Style and Design

CSS (Cascading Style Sheets) controls the visual presentation of HTML elements. It adds colour, fonts, spacing, layout, background effects, and even animations.

• CSS transforms a raw HTML skeleton into something visually appealing.
• You can target any HTML element (e.g., a text block) and change its colour, boldness, background, or position.
• Styling ranges from small font-size tweaks to the entire page layout.

JavaScript – Interactivity and Logic

JavaScript is a programming language that brings the page to life with dynamic behaviour. While HTML and CSS handle static content and presentation, JavaScript enables:

• Interactivity – e.g., a button that shows a pop-up message when clicked.
• Logic – e.g., an online shopping cart that recalculates the total price as items are added or removed.
• The core idea: “When this, do that” – JavaScript executes functions in response to events.

How the Browser Puts It All Together

When you load a website, the browser receives the HTML, CSS, and JavaScript files from a server. It then stitches them together:

The browser processes each file in order — first the HTML to build the document, then CSS to style it, and finally JavaScript to add dynamic features. The result is what you see on your screen.

Exam tip: A common question asks which technology does what. Remember the analogy:
HTML = skeleton, CSS = skin/clothes, JavaScript = muscles that move. Never mix them up.

Key takeaways

• HTML defines the content and structure of a web page.
• CSS handles the visual styling (colours, fonts, layout).
• JavaScript adds dynamic behaviour and logic (click actions, calculations).
• The browser requests all three files, then combines them to display a functional page.
• Each technology is essential; without one, the page would be incomplete (plain, unstyled, or static).

HTTP Request

When you type a URL, your browser must ask a server for files. But browsers and servers are built by different companies, run on different devices. How do they understand each other? They need a common language—a protocol. HTTP (Hypertext Transfer Protocol) is that language for the web. An HTTP request is the formal message your browser sends to the server to initiate this conversation.

What HTTP is

HTTP = Hypertext Transfer Protocol. A set of rules (grammar) that defines how data is formatted and transmitted between browsers and servers. It ensures any browser can talk to any server, regardless of device or network.

How it fits into the request–response cycle

1. User types flipkart.com in the browser.
2. Browser sends an HTTP request to Flipkart's server.
3. Server processes the request and responds with files: HTML, CSS, JavaScript, and other resources.
4. Browser interprets these files and renders the webpage.

HTTP is the middleman that makes steps 2 and 3 work universally.

Other protocols – a comparison

HTTP is one of many application-layer protocols. Each serves a specific purpose.

Exam tip: HTTPS is the secure variant of HTTP. Do not confuse FTP (file transfers) with SMTP (email).

Key takeaways

• HTTP is the protocol that governs browser–server communication.
• An HTTP request is the browser’s formal message asking for resources.
• The protocol guarantees interoperability across different devices and networks.
• Other protocols (HTTPS, FTP, SMTP) exist for security, file transfer, and email respectively.
• The request–response cycle: browser requests → server returns HTML/CSS/JS → browser renders page.

Frontend and Backend

The web application is split into two main sides. The frontend is everything the user sees and interacts with in the browser (layouts, buttons, images). The backend is the hidden machinery that stores, processes, and serves data. The two communicate via the request-response cycle using HTTP.

Frontend (Client‑Side)

• What it is: The user interface (UI) — everything rendered in the browser.
• Technologies: HTML (structure), CSS (styling, colors, fonts, layout), JavaScript (interactivity, dynamic behaviour).
• Goal: Provide an appealing, smooth visual experience. Clicking a button, scrolling, or watching a video all happen on the frontend.

Backend (Server‑Side)

• What it is: Everything that happens behind the scenes — data storage, processing, retrieval, user management, authentication, transaction handling.
• Technologies: Languages like Python, Java, Ruby, or JavaScript‑based frameworks like Node.js. Backend code runs on a server.
• Goal: Power the features the frontend presents to users (e.g., logins, course tracking, personalised feeds).

When a Backend Is Needed

Not every website requires a backend. The need depends on complexity.

Backend handles:

• Data storage and retrieval (e.g., profiles, uploaded files)
• User authentication and management
• Complex processing (e.g., transactions, recommendations)

Course Focus: Frontend Web Publishing

This course concentrates on web publishing – building and styling static websites using frontend technologies only (HTML, CSS, JavaScript). You will learn to create interactive, attractive sites for blogs, portfolios, small businesses – no backend required.

Exam tip: “Static” = no backend, content fixed; “dynamic” = backend processes data and serves personalised content. Know the difference and examples.

Why learn JavaScript here? JavaScript is the bridge – mastering it in the frontend gives a strong foundation for later exploring backend development (e.g., Node.js).

---

Key takeaways

• Frontend = browser UI (HTML, CSS, JavaScript); backend = server‑side data processing (Python, Java, Ruby, Node.js).
• The request-response cycle and HTTP connect frontend and backend.
• Simple sites (e.g., information pages) can be purely frontend; dynamic apps (e‑commerce, social media) require a backend.
• This course covers frontend web publishing – no backend; JavaScript learned now prepares you for future backend work.

The Beginning of the Digital Age (Early 1990s)

The modern internet began in the early 1990s with Tim Berners-Lee inventing HTTP and HTML — the foundational technologies that enabled information sharing and browsing. Before this, networks existed only within research institutes and government. Websites were basic, text-based, and static. Early browsers like Netscape Navigator and Internet Explorer let people explore the web, but content was largely one-way.

Businesses recognised the potential and rushed to establish an online presence, sparking the dot-com boom. Venture capitalists invested heavily in any venture with a .com name, assuming every such business would become a global giant (e.g., Peck.com, Boo.com).

Key takeaways

• Tim Berners-Lee introduced HTTP and HTML, enabling the World Wide Web.
• Early websites were static and text-only, accessed via Netscape Navigator or Internet Explorer.
• The dot-com boom was driven by hype and easy venture capital.

The Dot-Com Boom and Bust (Late 1990s–2000)

The rapid growth of internet-based businesses created a bubble. Companies launched websites believing any .com would make money. Around 2000 the dot-com bubble burst, causing a market crash. Businesses built on hype without real substance disappeared. Those with a sound business plan and a unique or well-defined market niche survived and thrived — e.g., Amazon and Google. In India, early players like Rediff (email & news) and Naukri (job search) were part of this wave.

Key takeaways

• The bubble burst eliminated companies with no real business model.
• Survivors (Amazon, Google) had clear value propositions and sustainable plans.
• Indian examples: Rediff and Naukri.

Post-Crash Maturation & Rise of Digital Business (2000s)

After the crash, digital businesses matured, becoming user-focused. Global platforms like Google, Facebook, and YouTube redefined search, social connection, and content sharing. In India:

• MakeMyTrip (founded 2000) transformed travel booking.
• Shaadi.com brought matchmaking online.
• Flipkart (founded 2007) started as an online bookstore and expanded into a full e-commerce platform.

Key takeaways

• Focus shifted from hype to real user value.
• Indian startups addressed local needs (travel, matrimony, e-commerce).
• Flipkart’s growth showed the potential of Indian e-commerce.

Mobile & Social Media Era (2010s)

The launch of the iPhone in 2007 made internet access mobile and always available via apps. In India, Reliance Jio (2016) offered affordable data plans, bringing fast internet to millions and accelerating digital adoption. WhatsApp became India’s primary messaging app; Paytm led digital payments. Social media platforms (Facebook, Instagram, Twitter) connected people in real time, influencing trends, culture, and politics. Businesses used these platforms for direct customer engagement and real-time brand loyalty.

Key takeaways

• Smartphones (iPhone) made internet ubiquitous; apps became the primary interface.
• Reliance Jio dramatically lowered data costs, expanding Indian internet users.
• Social media enabled direct business-to-consumer engagement.

UPI & India’s Digital Payment Revolution

The Unified Payments Interface (UPI), launched in 2016, revolutionised cashless transactions. Apps like PhonePe, Google Pay, and Paytm adopted UPI, making payments quick and seamless. Today UPI processes billions of transactions monthly, positioning India as a global leader in digital payments.

Key takeaways

• UPI made digital payments instant, simple, and interoperable.
• Apps like PhonePe and Google Pay drove mass adoption.
• India became a world leader in digital payment volume.

Cloud Computing, Big Data & the Modern Indian Digital Ecosystem

As digital businesses scaled, cloud computing (AWS, Microsoft Azure, Google Cloud) removed the need for physical servers. Indian startups like Swiggy (food delivery), Zomato, and Ola (cab booking) leveraged cloud and data analytics to deliver real-time services without heavy infrastructure investment. Big data — collected from searches, social media, and transactions over 30+ years — became a crucial resource for training modern AI systems and delivering personalised services.

Key takeaways

• Cloud computing enabled startups to scale without owning servers.
• Big data drives AI and personalisation.
• Indian startups (Swiggy, Zomato, Ola) exemplify cloud-powered local services.

Internet’s Lasting Impact on Businesses & Daily Life

The internet now touches every industry: retail, entertainment, education, finance. Traditional businesses have moved online; digital-first companies like Swiggy, Hotstar (streaming), and Zerodha (stock trading) have created entirely new markets. Digital marketing, e-commerce, and cloud services are essential for all businesses — even small ones need an online presence to reach customers. Since the 1990s, the internet has transformed how people communicate, learn, shop, work, and do business globally and in India.

Exam tip: The dot-com bust is a classic case study: survivorship depended on real business models, not hype. Know the distinction between survivors (Amazon, Google) and failures (Peck.com). Also note UPI as a uniquely Indian innovation that accelerated digital payments.

Key takeaways

• The internet has reshaped every major industry globally and in India.
• Digital-first companies (Swiggy, Hotstar, Zerodha) created new markets.
• Modern businesses require an online presence regardless of size.