Lecture 1: Introduction to Web Page Designing & Web Development Strategies

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-01-26

Lecture 1

Introduction to Web Page Designing & Web Development Strategies

Week 1 | Unit I: Web Page Designing
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor
Department of Computer Applications
Galgotias College of Engineering & Technology

Learning Outcomes

After this lecture, students will be able to:

  • define web designing and web development in academic and industry terms
  • explain the role of frontend, backend, and web protocols in an application
  • differentiate major development roles and responsibilities in a web project
  • analyze how MVC and layered architecture organize a web system
  • apply the concepts of HTML, CSS, and JavaScript to simple web pages

Prerequisites

  • Basic computer knowledge
  • Familiarity with internet usage and websites
  • Understanding of browser-based navigation
  • Basic file and folder handling
  • Programming basics are helpful but not mandatory

Syllabus Mapping

  • Unit: Unit I - Web Page Designing
  • Topics Covered:
    • Introduction to web page designing
    • Web development strategies and project roles
    • Core web technologies and architecture overview
    • Foundation for upcoming HTML, CSS, and protocol lectures
  • OBE Alignment:
    • CO Mapping: CO1
    • Bloom’s Level: L3 (Apply)

Agenda

  • Introduction and motivation
  • Web context: history and protocols
  • Core concepts in web designing and development
  • Architecture, roles, and workflow
  • Real-world example and comparison
  • Summary, exam preparation, and practice

Introduction and Motivation

  • Every modern business, service, and institution depends on web applications.
  • Web technology combines creativity, communication, and software engineering.
  • A clear understanding of roles, layers, and technologies reduces confusion in later topics.
  • This lecture builds the conceptual foundation for the full Unit I sequence.
  • Real systems such as Gmail, Amazon, and college portals all rely on these basics.

Think About It - Interactive Questions

Before we dive into details, think about these:

  • What happens when you type google.com in the browser address bar?
  • Where is a website actually stored?
  • How does your browser know where to find it?
  • What is the difference between the internet and the web?

Web and Internet Context

timeline
  title Evolution of Web and Internet
  1969 : ARPANET foundation
  1989 : World Wide Web proposed
  1994 : Browsers popularized web access
  2004 : Web 2.0 interactive era
  2010+ : Mobile and cloud-first web

Web and Internet Context

  • The internet provides the network foundation.
  • The web provides content delivery using standards such as HTTP and HTML.
  • Modern applications evolved from static pages to interactive platforms.

Internet Protocols at a Glance

  • HTTP: transfers web requests and responses between browser and server
  • HTTPS: secures HTTP using encryption for safe communication
  • DNS: translates domain names into IP addresses
  • TCP/IP: supports reliable network communication across systems
  • These protocols form the base for all web applications students build later

Concept 1: Web Designing vs Web Development

flowchart LR
  D1["UI Layout"]
  D2["Colors and Typography"]
  W1["Coding"]
  W2["Functionality"]
  S{"Shared Focus<br/>Usability<br/>and UX"}
  D1 --> S
  D2 --> S
  W1 --> S
  W2 --> S

  • Web designing focuses on visual communication and user experience.
  • Web development focuses on technical implementation and behavior.
  • Key point: effective websites need both design quality and functional correctness.

Comparison: Designing vs Development

Feature Web Designing Web Development
Main focus Look, feel, and usability Logic, behavior, and implementation
Typical work Layout, color, typography Coding, APIs, validation
Common tools Figma, wireframes, mockups VS Code, frameworks, Git
Output Interface design Working web application
Shared goal Better user experience Better user experience

Concept 2: Frontend and Backend Architecture

flowchart LR
  Browser(["Browser"])
  Frontend["HTML / CSS / JavaScript"]
  Server[("Server")]
  DB[("Database")]
  Browser --> Frontend
  Frontend <-->|Request / Response| Server
  Server --> DB

  • The frontend runs in the browser and handles presentation and interaction.
  • The backend processes business rules, security, and persistent data.
  • Communication between the two layers usually happens through HTTP/HTTPS.

When a User Clicks “Login” - A Real Story

  1. Frontend collects data: User enters username and password in the login form (HTML input fields)
  2. Frontend sends request: JavaScript captures the click event and sends data via HTTP/HTTPS to the server
  3. Backend verifies: Server receives the request, checks credentials against the database, applies security rules
  4. Response is returned: Server sends back a success or error message to the browser
  5. Frontend renders result: Browser displays the dashboard (success) or error message (failure)

This is what happens every time you log into Gmail, Facebook, or your college portal!

Frontend Development

  • Browser-side development focuses on interface and interaction.
  • HTML structures content.
  • CSS controls presentation and layout.
  • JavaScript adds interactivity and dynamic behavior.
  • Accessibility and responsiveness are essential requirements.
  • Example: login form, navigation bar, dashboard view.

Backend Development

  • Server-side processing manages data, logic, and security.
  • Validates requests and business rules.
  • Stores and retrieves data from databases.
  • Manages authentication, authorization, and APIs.
  • Returns responses to the browser or mobile client.
  • Example: user login verification and order processing.

Concept 3: Development Roles in a Web Project

flowchart LR
  UX(["UI/UX Designer"])
  FE(["Frontend Developer"])
  BE(["Backend Developer"])
  FS(["Full-Stack Developer"])
  APP{"Web\nApplication"}
  UX -.-> APP
  FE -.-> APP
  BE -.-> APP
  FS -.-> APP

  • Web products are built through coordinated specialist roles.
  • Designers shape experience.
  • Frontend developers implement the interface.
  • Backend developers manage server logic.
  • Full-stack developers connect both sides.

Common Confusion Points (Clarity Matters!)

Confusion Reality
Web = Internet Web is content delivered over the internet using HTTP; internet is the underlying network infrastructure
Frontend = Design Frontend is implementation (HTML/CSS/JS); design is the planning of interface and interaction before coding
Backend = Database only Backend includes server logic, authentication, APIs, and business rules - database is only one part

MVC Architecture

flowchart LR
  U(("User")) -->|Input| V["View"]
  V -->|Action| C{"Controller"}
  C -->|Update| M[("Model")]
  M -->|Data| V

  • Model manages data and business logic.
  • View presents information to the user.
  • Controller connects user actions with application behavior.
  • Flow: User -> View (sees interface) -> Controller (processes input) -> Model (applies logic) -> View (displays result)

Web Stack Overview

flowchart LR
  Browser1["Browser"] -->|HTTP Request| Server["Server\n+ Database"]
  Server -->|Response| Browser2["Browser"]
  Browser2 -->|Render| Result["HTML/CSS/JS<br/>Display"]

  • Complete flow: Browser sends HTTP request -> Server processes & queries database -> Server sends response -> Browser renders HTML/CSS/JavaScript
  • HTML, CSS, and JavaScript create the client-side experience.
  • HTTP/HTTPS connects browser actions with server responses.
  • Server logic and databases support dynamic applications.

Role of HTML, CSS, and JavaScript

Technology Role in a Web Page Typical Example
HTML Structure and semantic meaning headings, paragraphs, forms
CSS Style, spacing, layout, responsiveness colors, fonts, alignment
JavaScript Behavior and interactivity validation, alerts, dynamic content

Memory Booster: The Anatomy Analogy

Think of a web page like a human body:

  • HTML = Skeleton (structure, framework, what holds it together)
  • CSS = Clothes (appearance, style, how it looks)
  • JavaScript = Brain (behavior, thinking, how it responds and acts)

You need all three to make a complete, functional web page!

Web Development Workflow

flowchart LR
  A["Planning"] --> B["Design"] --> C["Development"] --> D["Testing"] --> E["Deployment"] --> F["Maintenance"]

  • Planning: define objectives, audience, features, and scope.
  • Design: create wireframes, UI decisions, and interaction flow.
  • Development: implement frontend, backend, and integrations.
  • Testing: verify functionality, usability, performance, and security.
  • Deployment: release the application to production servers.
  • Maintenance: fix issues, improve features, and monitor reliability.

Real-World Example: Gmail

  • The Gmail interface is a frontend built with HTML, CSS, and JavaScript.
  • Email storage, authentication, and search run on backend services.
  • Design choices improve readability, speed, and usability.
  • MVC-style separation helps large teams manage complex features.
  • Protocols and secure communication are essential for every user action.

Essential Tools and Technologies

  • Basic Editors: Notepad (Windows), TextEdit (macOS)
  • Primary Code Editor: VS Code (recommended)
  • Version Control: Git and GitHub
  • Browser Tools: Chrome DevTools or Firefox DevTools

Live Demo: Web Development in Action

Interactive demonstration showing HTML, CSS, and JavaScript working together:

Open Interactive Demo: Web Development Fundamentals

What you’ll see:

  • HTML structure and semantic meaning
  • CSS styling, colors, and animations
  • JavaScript interactivity and form validation
  • Real login simulation (frontend only)
  • DevTools tips for exploring code

Why this matters: This is exactly how real websites work!

Summary and Key Takeaways

  • Web designing and web development are different but complementary.
  • Frontend, backend, and protocols work together in every web system.
  • Development roles and MVC improve clarity in team-based projects.
  • HTML, CSS, and JavaScript form the foundation of client-side development.
  • This lecture prepares students for the detailed Unit I technical topics.

Exam Preparation Questions: Short

  • Define web designing.
  • What is web development?
  • What is the role of HTTP in a web application?
  • Differentiate frontend and backend in one point.
  • Name any four stages of the web development workflow.
  • What is the purpose of the Design stage?
  • What is the role of JavaScript in the browser?
  • What is MVC in full form?

Exam Preparation Questions: Long

  • Explain web designing vs web development with suitable examples.
  • Explain frontend and backend architecture with a neat diagram.
  • Explain all stages of the web development workflow with a real scenario.
  • Explain MVC architecture and justify its use in modern web applications.
  • Describe the roles of HTML, CSS, and JavaScript in building a complete web page.
  • Discuss how protocols like HTTP, HTTPS, DNS, and TCP/IP support web systems.

Practice Task

  • Create a simple personal profile page using HTML.
  • Add basic styling using CSS for colors, spacing, and headings.
  • Add one JavaScript interaction such as a button click message.
  • Identify which parts belong to design and which belong to development.
  • Explain how the page would fit into a larger frontend/backend system.

Checklist

Can you:

  • define the major web development concepts?
  • explain frontend, backend, and protocols clearly?
  • draw a simple architecture or MVC diagram?
  • compare web designing and web development?
  • answer the likely exam questions from this lecture?

Next Lecture

  • Topic: History of Web & Internet, Protocols Governing the Web
  • Preparation required: revise HTTP, HTTPS, DNS, and browser-server interaction
  • Read ahead: Week 1 course content and introductory MDN material

References

Introduction to Web Page Designing & Web Development Strategies

Next: Lecture 2 - History of Web & Internet