Lecture 20: Revision - Units I & II

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-26

Lecture 20

Revision: Units I & II

Week 5 | Mid-Semester Preparation
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Mid-Semester Exam Coverage

  • Unit I: Web Page Designing (HTML & CSS)
  • Unit II: JavaScript Fundamentals
  • Lectures 1-19
  • All lab exercises and assignments
  • Hands-on coding questions expected

Unit I: Web Page Designing

  1. Introduction to Web & Internet
  2. HTML Structure & Syntax
  3. HTML Grouping: Div & Span
  4. Lists, Images, Hyperlinks & Tables
  5. HTML Forms & Form Elements
  6. CSS Selectors, Box Model & Positioning
  7. Bootstrap Framework

HTML Basics Recap

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is a paragraph.</p>
</body>
</html>

HTML Forms Recap

<form action="/submit" method="POST">
  <input type="text" name="username" required>
  <input type="email" name="email" required>
  <button type="submit">Submit</button>
</form>

Key attributes: action, method, name, type, required

CSS Selectors Recap

p { color: blue; }              /* element */
.highlight { background: yellow; } /* class */
#header { font-size: 24px; }    /* id */
div > p { margin: 10px; }       /* child */
a:hover { color: red; }         /* pseudo-class */

CSS Box Model Recap

.box {
  margin: 20px;      /* space outside */
  padding: 15px;     /* space inside */
  border: 2px solid black;
  width: 200px;
}

Total width = margin + border + padding + content

CSS Positioning Recap

position: static;    /* default */
position: relative;  /* relative to normal position */
position: absolute;  /* relative to positioned ancestor */
position: fixed;     /* relative to viewport */
position: sticky;    /* hybrid */

Bootstrap Recap

<link href="bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Grid system: 12-column layout

Unit II: JavaScript

  1. Variables & Data Types
  2. Functions & Events
  3. Conditional Statements & Loops
  4. Objects & Scope
  5. Arrow Functions & Callbacks
  6. DOM Manipulation
  7. Form Validation
  8. ES6+ Features

JavaScript Variables Recap

let age = 25;         // reassignable
const pi = 3.14;      // not reassignable
var old = "avoid";    // function-scoped (old style)

Use let for variables, const for constants.

Data Types Recap

const name = "Amit";        // string
const age = 22;             // number
const isActive = true;      // boolean
const items = [1, 2, 3];    // array
const user = { name: "A" }; // object
let nothing = null;         // null
let notDefined;             // undefined

Functions Recap

function greet(name) {
  return `Hello, ${name}`;
}

const greetArrow = (name) => `Hello, ${name}`;

greet("Priya");
greetArrow("Raj");

Conditionals Recap

const marks = 85;

if (marks >= 90) {
  console.log("Grade A");
} else if (marks >= 60) {
  console.log("Grade B");
}

const status = marks >= 60 ? "Pass" : "Fail";
console.log(status);

Loops Recap

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

let count = 0;
while (count < 3) {
  console.log(count++);
}

const arr = [10, 20, 30];
arr.forEach(val => console.log(val));

Objects Recap

const student = {
  name: "Neha",
  age: 21,
  greet: function() { return `Hi, ${this.name}`; }
};

console.log(student.name);
console.log(student.greet());

Array Methods Recap

const nums = [1, 2, 3, 4, 5];
nums.map(x => x * 2);           // [2, 4, 6, 8, 10]
nums.filter(x => x > 2);        // [3, 4, 5]
nums.reduce((sum, x) => sum + x, 0); // 15

DOM Selection Recap

document.getElementById('id');
document.querySelector('.class');
document.querySelectorAll('p');

querySelector returns first match, querySelectorAll returns all.

DOM Manipulation Recap

const elem = document.querySelector('.box');
elem.textContent = "New text";
elem.innerHTML = "<strong>Bold</strong>";
elem.style.color = "red";
elem.classList.add('active');

Event Handling Recap

const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  alert('Button clicked!');
});

Common events: click, submit, blur, change, keyup

Form Validation Recap

const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  if (validateForm()) {
    console.log("Form is valid");
  }
});

ES6+ Features Recap

const msg = `Hello, ${name}`;  // template literals

const [a, b] = [1, 2];         // array destructuring

const { name, age } = user;    // object destructuring

const arr2 = [...arr1, 4, 5];  // spread operator

const greet = (name = "Guest") => `Hi, ${name}`; // default params

Common Exam Question Topics

  1. Write HTML form with validation
  2. Style page with CSS (box model, positioning)
  3. Create responsive layout with Bootstrap
  4. Write JavaScript functions
  5. DOM manipulation (select, modify, create)
  6. Event handling and form validation
  7. Array methods (map, filter, reduce)
  8. ES6 syntax (arrow functions, destructuring)

Sample Question 1

Q: Create a registration form with: - Name (text, required) - Email (email, required) - Age (number, min=18) - Submit button

Add CSS to style the form with proper spacing and colors.

Sample Question 2

Q: Write JavaScript to: 1. Select all paragraphs on a page 2. Change their color to blue 3. Add a click event that shows an alert with the paragraph text

const paras = document.querySelectorAll('p');
paras.forEach(p => {
  p.style.color = 'blue';
  p.addEventListener('click', () => alert(p.textContent));
});

Sample Question 3

Q: Given an array of student objects with name and marks, filter students with marks > 80 and display their names.

const students = [
  { name: "Amit", marks: 85 },
  { name: "Neha", marks: 92 },
  { name: "Raj", marks: 78 }
];

const toppers = students.filter(s => s.marks > 80);
const names = toppers.map(s => s.name);
console.log(names); // ["Amit", "Neha"]

Study Tips

  1. Practice coding: Don’t just read, write code
  2. Review labs: Go through all lab exercises
  3. Understand concepts: Don’t memorize syntax
  4. Test edge cases: Empty inputs, special characters
  5. Time management: Practice within time limits
  6. Debugging: Learn to read and fix errors

Key Resources for Revision

  • Lecture Slides: All lectures 1-19
  • Labs: Lab 1-5 exercises
  • Assignments: Assignments 1-2
  • Quizzes: Pre-class quizzes for practice
  • Content Pages: Week 1-5 content
  • MDN Web Docs: Reference for HTML, CSS, JS

Most Important Concepts

HTML: Forms, semantic tags, attributes
CSS: Selectors, box model, positioning, flexbox
Bootstrap: Grid system, components
JavaScript: Variables, functions, loops, conditionals
DOM: Selection, manipulation, events
Arrays: map, filter, reduce, forEach
ES6: Arrow functions, template literals, destructuring
Validation: HTML5 & JavaScript validation

Common Mistakes to Avoid

  • Missing closing tags in HTML
  • Incorrect CSS selector syntax
  • Forgetting const/let declarations
  • Using = instead of === for comparison
  • Not preventing default form submission
  • Incorrect array method usage
  • Forgetting to return values from functions
  • Syntax errors in arrow functions

Final Exam Preparation Checklist

✓ Reviewed all lecture slides
✓ Completed all lab exercises
✓ Practiced coding problems
✓ Tested code in browser console
✓ Understood error messages
✓ Reviewed assignment solutions
✓ Can write HTML/CSS/JS without references
✓ Confident with debugging

Good Luck with Your Exam!

Next: Mid-Semester Examination (Units I & II)