Skip to content

🌐 Introduction to Web Design (100219)

⬅️ Back to Semester-2 | 🏠 Home

💡 Why this subject? HTML + CSS + JavaScript is the trio behind every website — and this is your first real taste of full front-end development.

📌 Unit 1: Internet & Web Basics

  • WWW vs Internet: Internet = the network of connected computers; WWW = the collection of websites/pages accessible over it.
  • Client-Server Architecture: your browser (client) requests, the web server responds.
  • 3-Tier Architecture: Presentation (UI) → Logic (server/app) → Data (database).
  • URL: address of a resource (https://www.example.com/page).
  • HTTP: the protocol (rules) browsers & servers use to talk to each other.

📌 Unit 2: HTML — Structure

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is a paragraph.</p>
  <a href="https://github.com">Visit GitHub</a>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <img src="photo.jpg" alt="My Photo">
  <div>A block-level grouping container</div>
  <span>An inline grouping container</span>
</body>
</html>

🧠 Quick Recall: <div> = block (own line), <span> = inline (flows with text).

📌 Unit 3: HTML Forms & Multimedia

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="pass">
  <input type="radio" name="gender" value="M"> Male
  <input type="checkbox" name="subscribe"> Subscribe
  <select name="course">
    <option>CSE</option>
    <option>ECE</option>
  </select>
  <button type="submit">Submit</button>
</form>

<video src="demo.mp4" controls width="300"></video>
<audio src="song.mp3" controls></audio>

📌 Unit 4: CSS — Styling and Layouts

/* External CSS — best practice, in a separate .css file */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.card {
  border: 1px solid #ccc;
  padding: 16px;
  margin: 10px;
  border-radius: 8px;
}

#header {
  text-align: center;
  color: navy;
}
CSS Selector Meaning
.classname selects elements with that class
#idname selects the element with that ID
tagname selects all elements of that tag
  • Box Model: every element = content → padding → border → margin (inside-out order).
  • CSS Display: block, inline, flex, none — controls layout flow.

🧠 Quick Recall: Inline CSS (in the tag) → Internal CSS (<style> in head) → External CSS (separate .css file, best practice — reusable across pages).

📌 Unit 5: JavaScript Basics

let name = "Pratap";          // variable
const PI = 3.14;              // constant
var age = 20;                 // old-style (avoid, use let/const)

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let i = 0;
while (i < 3) {
  console.log("while:", i);
  i++;
}

📌 Unit 6: Advanced JavaScript — Objects & Events

// Object
let student = {
  name: "Pratap",
  age: 20,
  greet: function() {
    return `Hi, I'm ${this.name}`;
  }
};
console.log(student.greet());

// Array methods
let nums = [1, 2, 3, 4, 5];
console.log(nums.map(n => n * n));        // [1,4,9,16,25]
console.log(nums.filter(n => n % 2 === 0)); // [2,4]

// Event handling
document.getElementById("myBtn").onclick = function() {
  alert("Button clicked!");
};

// Simple form validation
function validateEmail(email) {
  let pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}
console.log(validateEmail("test@gmail.com"));  // true

🔬 Mini Project Idea (combines all units)

Build a personal portfolio page: - HTML for structure (about, projects, contact form) - CSS for styling (cards, colors, responsive layout) - JavaScript for a working contact form validator and a button that toggles dark mode 🌙

✅ Quick Revision Table

Topic One-line memory hook
Client-Server Browser asks, server answers
<div> vs <span> block vs inline
Box Model content → padding → border → margin
External CSS Best practice — separate, reusable file
let/const Modern JS — prefer over var
map/filter Transform / select array elements without loops