Home Assignment 1: Frontend Fundamentals & Logic

Published

February 2, 2026

Overview

Build interactive web interfaces by applying HTML structure, CSS styling, and JavaScript logic.

Due Date: February 11, 2026, 11:59 PM
Points: 100
Target Audience: CO1 (HTML/CSS) and CO2 (JavaScript)

Learning Objectives

By completing this assignment, you will:

  • Use semantic HTML5 tags to create well-structured pages
  • Apply CSS for layout, styling, and box model control
  • Build table-based content with lists and selectors
  • Implement JavaScript validation and DOM updates
  • Use loops and block scope in practical UI logic

Question 1: The Box Model Portfolio Page (CO1)

Design a responsive personal portfolio web page using HTML5 and CSS3.

Requirements

  • Use specific HTML tags (header, section, footer) to structure the document.
  • Implement an external stylesheet to apply a color scheme.
  • Demonstrate the CSS box model by explicitly setting margins, borders, and padding for your content containers.
  • Use CSS floats or Bootstrap to create a two-column layout: one for your bio (text) and one for your profile picture (image).

Deliverable

HTML and CSS code files.

Question 2: The Structured Data Table (CO1)

Create a web page that displays a Weekly Class Timetable or a Product Pricing Sheet using HTML tables and lists.

Requirements

  • Table structure: Use the <table>, <thead>, <tbody>, and <tr> tags.
  • Include colspan or rowspan to merge cells (for example, a Lunch Break or a Premium Feature spanning multiple columns).
  • Inside one table cell, include an unordered list (<ul>) to list specific details (for example, class topics or tier features).
  • Use CSS selectors (class or ID) to style table headers (<th>) with a distinct background color.
  • Add borders to table data cells (<td>) using CSS.

Deliverable

One HTML file with embedded CSS.

Question 3: Dynamic Form Validation (CO2)

Create an HTML registration form (Name, Email, Password, Confirm Password) and use JavaScript to validate user input before submission.

Requirements

  • Use UI events (onclick or onsubmit) to trigger the validation function.
  • Ensure Password and Confirm Password fields match.
  • If they do not match, display an error message using DOM manipulation (for example, by changing the text color of a <span> to red).
  • Create a JavaScript object named User that captures the form values when validation passes.

Deliverable

A single HTML file containing the script, or separate HTML and JavaScript files.

Question 4: The Dynamic Number Processor (CO2)

Write a JavaScript program that takes a number input from the user and performs iterative calculations using loops.

Requirements

  • UI: Create a simple HTML input field and a Calculate button.
  • Looping logic: On button click, use a for loop to calculate the factorial of the entered number or print the Fibonacci series up to that number.
  • Output: Display results dynamically on the page inside a <div> or <p> using innerHTML (DOM manipulation).
  • Block scope: Demonstrate understanding of let vs var inside your loop.

Deliverable

An HTML file containing the script.

NoteAssignment Guidelines
  • Read all 4 questions before starting implementation.
  • Build and test each question independently.
  • Keep code organized with meaningful file names.
  • Validate HTML/CSS and verify JavaScript behavior in browser console.
TipSubmission Format
  1. Create separate folders (or clearly named files) for each question.
  2. Ensure each deliverable runs correctly in a browser.
  3. Add your name and roll number in each file header comment.
  4. Zip all required files as RollNumber_Assignment1_YourName.zip.
  5. Submit before the deadline: February 11, 2026, 11:59 PM.
ImportantEvaluation Criteria
Criteria Points Description
Question 1 (Portfolio + Box Model) 25 Structure, external CSS, box model, two-column layout
Question 2 (Table + Lists) 25 Proper table tags, merged cells, list integration, selector styling
Question 3 (Form Validation) 25 Event handling, condition logic, DOM error handling, User object
Question 4 (Loop Processor) 20 Loop logic, dynamic output, correct factorial/Fibonacci handling
Code Quality 5 Readability, naming, formatting, and correctness
Total 100

Tips for Success

TipHelpful Hints
  • Build and test each question independently before combining files.
  • Keep CSS and JavaScript readable with clear naming.
  • Validate your HTML and CSS before submission.
  • Use browser developer tools to debug JavaScript logic.
WarningCommon Mistakes to Avoid
  • Missing semantic tags in Question 1.
  • Using tables without thead and tbody in Question 2.
  • Not handling password mismatch clearly in Question 3.
  • Incorrect loop bounds in factorial/Fibonacci in Question 4.
  • Mixing let and var without demonstrating scope behavior.

Resources

Questions?

If you have questions about this assignment:

Good luck, and have fun building interactive web pages.