Lecture 1: Introduction to Web Designing

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-01-26

Lecture 1

Introduction to Web Designing

Week 1 | Unit I: Web Page Designing
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

  • Understand web development and web designing concepts
  • Learn about web development strategies
  • Explore different roles in web development

What is Web Designing vs Web Development?

Web Designing

  • Visual appearance & UX
  • Layout, colors, typography
  • Tools: Figma, Adobe XD

Web Development

  • Implementation & functionality
  • Coding the design
  • Tools: HTML, CSS, JS

Client-side vs Server-side Development

Client-side

  • Runs in the browser
  • HTML, CSS, JavaScript
  • User interface
  • ✓ Immediate feedback

Server-side

  • Runs on the server
  • PHP, Python, Java, Node.js
  • Database operations
  • ✓ Business logic

Development Roles

Frontend

  • UI & UX
  • HTML, CSS, JS
  • React, Vue

Backend

  • Server & APIs
  • Java, Python, Node
  • SQL, MongoDB

Full-stack

  • Front & back
  • End-to-end
  • Most in-demand

Key Web Technologies

HTML

Structure

CSS

Style

JavaScript

Behavior

HTML: The Structure

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <title>My First Page</title>
</head>
5<body>
6  <h1>Hello World!</h1>
</body>
</html>
1
Declares this is an HTML5 document
2
Root element with language attribute
3
Contains metadata (not visible on page)
4
Page title shown in browser tab
5
Contains all visible page content
6
Main heading, displayed as large text

👆 Foundation of every web page

CSS: Adding Style

<h1>Hello World!</h1>

CSS: Adding Style

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<h1>Hello World!</h1>

✨ CSS transforms plain HTML into beautiful web pages

JavaScript: Adding Interactivity

<button>Click Me</button>

JavaScript: Adding Interactivity

<button id="btn">Click Me</button>

<script>
  document.getElementById('btn')
    .addEventListener('click', function() {
      alert('Button clicked!');
    });
</script>

🎯 JavaScript brings interactivity and dynamic behavior

Web Development Workflow

  1. Planning & Requirements
  2. Design & Prototyping
  3. Development
  4. Testing & Debugging
  5. Deployment
  6. Maintenance

⚡ We’ll focus on Development in this course

Essential Tools

Code Editor: VS Code

Version Control: Git & GitHub

Browser DevTools: Chrome, Firefox

Frameworks: Bootstrap, React, Vue

Why Learn Web Development?

📈 High demand

💰 Great salaries

🌍 Work remotely

🎨 Creative outlet

🚀 Build your ideas

📚 Constant learning

Resources

Questions?

Next: Lecture 2 - History of Web & Internet