Web Design on Laksh Budhrani | Course Hub

Lecture 1 — Introduction to the Web & Paired Tags

Mon, 01 Jan 0001 00:00:00 +0000

Lecture 1 — Introduction to the Web & Paired Tags

Instructor: Laksh Budhrani

The Problem Statement

Meet Sahil!

Sahil is a brand-new freshman at UC Irvine. He’s excited, nervous, and trying to figure out college life. He loves animated movies, plays chess, loves swimming, listens to lo-fi music, and dreams of becoming a CS Researcher.

He wants a place where he can share his experiences, stay organized, write updates, make new friends, and post memories. He needs a website — and you are going to help him build it!

Sahil’s Request for Today

“Hey everyone! I’m Sahil, and I just moved into my dorm at UC Irvine. Honestly, college feels a bit overwhelming already, but I really want a central place online to document my journey, introduce myself to people on campus, and share what I’m into.”

“Since I don’t know how to build a website yet, I wrote down what I want on my homepage. I just need it to feel personal and clear:”

Main Heading: An unmistakable heading at the top that says “Welcome to Sahil’s UCI Journey”.

About Me Section: A short paragraph explaining who I am — a CS freshman who loves animated movies, plays chess, swims, and listens to lo-fi music late at night while studying.

My Big Goal: A quick paragraph about my dream of becoming a CS Researcher. I want the phrase “CS Researcher” to stand out in bold so anyone visiting immediately knows what I’m working toward.

A Personal Note: A final short sentence sharing my current mood or daily motto in italics (like “Currently surviving on campus coffee and lo-fi beats”) to give the page a relaxed, personal vibe.

Before we write code, let’s explore why websites exist and how browsers display them.

Objectives

Discover why the world needed websites
Uncover what a web browser actually does
Understand what HTML is
Learn how paired tags organize web content
Learn basic paired tags and use them to build Sahil’s homepage

Objective 1 — Why the World Needed Websites

Imagine a world where you could write a document on your computer, but nobody else on Earth could see it unless they came to your room.

In the 1980s:

Computers existed
The Internet existed
…but there was no World Wide Web!

There were no blogs, no Google, no Wikipedia, and no way to share live pages globally. The world desperately needed a digital public bulletin board where anyone, anywhere, could publish information for everyone to read.

Objective 2 — The Web Browser

In 1989, a scientist named Tim Berners‑Lee solved this problem by inventing two magical things: the first Web Server and the first Web Browser.

A web browser (like Chrome or Safari) acts like an interpreter: it reads hidden files from a server across the globe and turns them into visual pages you can interact with!

🔗 Check it out: Click here to see the first website ever created!

Objective 3 — What Is HTML?

To make browsers display pages properly, Tim Berners-Lee created HTML (HyperText Markup Language).

HTML isn’t a programming language that makes things “think”; it’s a markup language that defines structure. It tells the browser:

“Hey, this piece of text is a main heading!”
“This part is just a regular paragraph.”
“Make these words bold so they stand out!”

Every single website on the planet relies on HTML.

Objective 4 — Why HTML Uses Tags

How does a browser know where a heading starts and ends? Tags!

Think of tags as digital sticky notes attached to text. Most HTML elements use paired tags: an opening tag to turn a style ON, and a closing tag (with a /) to turn it OFF.

<opening_tag> Content goes here </closing_tag>

Today, we are mastering 4 essential paired tags!

Objective 5 — Paired Tags We Will Use Today

5a — Headings

Simple Definition

Headings create bold structure on a page. They come in 6 sizes, from largest (<h1>) to smallest (<h6>).

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

5b — Paragraphs

Simple Definition

Paragraphs (<p>) group sentences into clean blocks of text. Use them for descriptions and normal reading text.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

5c — Bold Text

Simple Definition

The <b> tag makes important words stand out by making them bold.

Example

<b>This is bold text.</b>

5d — Italics

Simple Definition

The <i> tag slants text into italics, adding stylistic emphasis or tone.

Example

<i>This is italics text.</i>

Guided Activity — Build Sahil’s Homepage

PART 1 — Project Setup

1. Create your class folder

Go to your Desktop.
Create a main folder named: WD_BlockX_2026 (e.g., WD_BlockB_2026).
Inside that main folder, create two sub-folders:
1. Sahil_Project (for class activities)
2. Portfolio (for independent work)

2. Open VS Code

Open VS Code.
Click File → Open Folder and select Sahil_Project.

3. Create your HTML file

Create a new file named index.html.

PART 2 — Expected Browser Output

Here is what Sahil’s completed homepage will look like once we write the HTML together:

PART 3 — Writing the Code

Copy and paste this base template into index.html, then write your HTML tags inside the marked area:

<!DOCTYPE html>
<html>
<head>
 <title>Sahil's Website</title>
</head>
<body>
 <!-- START WRITING HERE -->



 <!-- STOP WRITING HERE -->
</body>
</html>

Independent Activity — Build Your Portfolio Page!

Now that you’ve helped Sahil set up his homepage, it’s time to build your own! You will create a portfolio page to introduce yourself to the class.

Instructions:

Open VS Code.
Click File → Open Folder and open your Portfolio folder (located inside WD_BlockX_2026).
Create a new file named portfolio_day1.html.
Copy and paste the HTML boilerplate into your file.
Inside the <body> tag, write your HTML code using only <h1>, <p>, <b>, and <i> tags based on the prompt below.

Your Portfolio Prompt

Write your HTML page to include the following 4 elements (customized with your own real details!):

Main Heading (<h1>): A welcome title with your name (e.g., Welcome to [Your Name]'s Portfolio).
About Me Paragraph (<p>): Write 2–3 sentences introducing yourself, including your grade, favorite hobbies, or something unique about you.
Your Dream Role (<p> & <b>): Write a short sentence about a goal, dream job, or skill you want to master this year, putting the key phrase in bold using <b>.
Daily Motto (<i>): End your page with a fun status or motto in italics using <i>.

Example Solution

Submission Instructions

Submit your work in Google Classroom under In‑Class Exercise 1 by completing the following:

Create a new Google Doc.
Paste your code: Copy and paste the complete HTML code from both files (Sahil_Project/index.html and Portfolio/portfolio_day1.html).
Add screenshots: Open both .html files in your web browser, take a screenshot of each rendered page, and insert them into your document.
Click Turn In!

Summary: Tags Learned Today

Tag	Name	What It Does	Example
`<h1>` – `<h6>`	Heading	Creates headings of different sizes	`<h1>Heading</h1>`
`<p>`	Paragraph	Groups text into structured blocks	`<p>Text here...</p>`
`<b>`	Bold	Emphasizes text in bold	`<b>Important</b>`
`<i>`	Italics	Slants text in italics	`<i>Stylized note</i>`

Lecture 2 — More Paired Tags & Formatting

Mon, 01 Jan 0001 00:00:00 +0000

Lecture 2 — More Paired Tags & Formatting

Instructor: Laksh Budhrani

Quick Recall: Lecture 1 Review

Before we jump into today’s mission, let’s do a quick check-in on what we learned last class:

Tag	Name	What It Does	Example
`<h1>` – `<h6>`	Heading	Creates headings of different sizes	`<h1>Heading</h1>`
`<p>`	Paragraph	Groups text into structured blocks	`<p>Text here...</p>`
`<b>`	Bold	Emphasizes text in bold	`<b>Important</b>`
`<i>`	Italics	Slants text in italics	`<i>Stylized note</i>`

Class Check-In: Does anyone have any questions or doubts about these 4 tags before we add 5 new ones to our toolkit?

The Story Continues…

Sahil’s Week 2 Update!

Sahil has survived his first full week of college classes at UC Irvine! Between joining the campus swimming club, finding coffee spots, and studying for midterms, he is trying to keep his college life organized.

He wants to add a “Notebook & Goals” section to his website to track his progress and stats. He needs your help writing this page using 5 new text-formatting tags!

Sahil’s Request for Today

“Hey again! Thanks for helping me set up my main homepage. Today, I want to build a digital notebook page to track my goals, stats, and checklist.”

“Here is what I need you to write for me:”

Academic Goals Paragraph: Write a sentence about my goal to focus on classes and become a CS Researcher. I want to underline UC Irvine to emphasize my campus pride.

Current Status & Stats:

Highlight Surviving Midterms so anyone visiting sees my current focus instantly.

Write my graduation year as Class of ‘29^th (with the th raised up).

Mention my water intake after swimming practice as H₂O (with the 2 lowered down).

College Checklist: Create a list of 3 dorm tasks, and cross off the ones I’ve already completed (like moving into my dorm) using a line through the text.

Objectives

Learn how to underline key text (<u>)
Learn how to highlight text (<mark>)
Learn how to format superscript (<sup>) and subscript (<sub>)
Learn how to cross off text using strikethrough (<s>)

Objective 1 — Underline (`<u>`)

Simple Definition

The <u> tag draws a horizontal line under text to emphasize key terms, titles, or locations.

Example

<u>Important Location</u>

Objective 2 — Highlight (`<mark>`)

Simple Definition

The <mark> tag adds a bright yellow background behind text, making it stand out like a physical highlighter pen.

Example

<mark>High Priority Task</mark>

Objective 3 — Superscript (`<sup>`) & Subscript (`<sub>`)

Simple Definition

<sup> (Superscript) raises text slightly above the normal line of text.
<sub> (Subscript) lowers text slightly below the normal line of text.

Example

1<sup>st</sup> Place
Water molecule: H<sub>2</sub>O

Objective 4 — Strikethrough (`<s>`)

Simple Definition

The <s> tag draws a line straight through text. It is commonly used to show things that are no longer accurate or tasks that have been completed.

Example

<s>Completed Task</s>

Guided Activity — Build Sahil’s Notebook Page

PART 1 — Project Setup

Open VS Code.
Go to File → Open Folder and select your Sahil_Project folder.
Create a new file named: sahil_day2.html.

PART 2 — Expected Browser Output

Here is what Sahil’s completed notebook page will look like once we write the HTML together:

PART 3 — Starter Code (We will write the content together live!)

Paste this starter boilerplate into sahil_day2.html. We will fill in the <body> together in class!

<!DOCTYPE html>
<html>

<head>
 <title>Sahil's Notebook & Goals</title>
</head>

<body>
 <!-- START WRITING HERE -->



 <!-- STOP WRITING HERE -->
</body>

</html>

Independent Activity — Your Portfolio Goals!

Now it’s your turn! Upgrade your own portfolio site by creating a personal stats and goals page.

Instructions:

Open your Portfolio folder in VS Code.
Create a new file named portfolio_day2.html.
Copy the starter template above into your file and build your page using <h1>, <h2>, and your 5 new paired tags.

Your Portfolio Prompt

Your page must include the following 4 sections:

Main Title (<h1>): [Your Name]'s Status & Goals
School Focus (<h2> & <u>): A short paragraph mentioning your school name or grade level, underlined with <u>.
Current Vibe & Stats (<h2>, <mark>, <sup>, <sub>):
- A highlighted current status using <mark> (e.g., <mark>Learning HTML</mark>).
- A date or rank using <sup> (e.g., 1<sup>st</sup> day of class or 10<sup>th</sup> Grade).
- A small detail using <sub> (e.g., Favorite drink: H<sub>2</sub>O or Base<sub>10</sub> math).
My Checklist (<h2> & <s>): A list of 3 personal goals or tasks for this week, with at least 1 task crossed off using <s>.

Example Solution

Submission Instructions

Submit your work in Google Classroom under In‑Class Exercise 2 by:

Opening your Google Doc from Lecture 1.
Pasting your HTML code from both sahil_day2.html and portfolio_day2.html.
Adding screenshots of both rendered pages from your browser.
Turning in the document!

Summary: New Tags Learned Today

Tag	Name	What It Does	Example
`<u>`	Underline	Underlines text	`<u>Underlined</u>`
`<mark>`	Highlight	Adds yellow highlight behind text	`<mark>Highlighted</mark>`
`<sup>`	Superscript	Raises text above line	`1<sup>st</sup>`
`<sub>`	Subscript	Lowers text below line	`H<sub>2</sub>O`
`<s>`	Strikethrough	Crosses out text with a line	`<s>Completed</s>`

Lecture 3 — Unpaired Tags & HTML Comments

Mon, 01 Jan 0001 00:00:00 +0000

Lecture 3 — Unpaired Tags & HTML Comments

Instructor: Laksh Budhrani

Quick Recall: Lecture 1 & 2 Review

Before we jump into today’s mission, let’s review all the tags we’ve added to our toolkit so far!

Tag	Name	What It Does	Example
`<h1>` – `<h6>`	Headings	Creates headings of different sizes	`<h1>Heading</h1>`
`<p>`	Paragraph	Groups text into structured blocks	`<p>Text here...</p>`
`<b>`	Bold	Emphasizes text in bold	`<b>Important</b>`
`<i>`	Italics	Slants text in italics	`<i>Stylized note</i>`
`<u>`	Underline	Underlines text for emphasis	`<u>Underlined</u>`
`<mark>`	Highlight	Adds yellow highlight behind text	`<mark>Highlighted</mark>`
`<sup>`	Superscript	Raises text slightly above line	`1<sup>st</sup>`
`<sub>`	Subscript	Lowers text slightly below line	`H<sub>2</sub>O`
`<s>`	Strikethrough	Crosses out text with a line	`<s>Completed</s>`

Class Check-In: Does anyone have any questions or doubts about these 9 tags before we learn about unpaired tags?

The Story Continues…

Sahil’s Week 3 Update!

Sahil’s website is coming along nicely, but as he adds more information, his page is starting to look crowded! Everything is clumping together, and it’s hard to tell where one section ends and another begins.

Plus, he wants to add a brand-new “Campus Location & Schedule” section to his existing page to list his dorm building, classroom location, and class times. He needs your help using unpaired tags to separate his page into clean sections, group multi-line information neatly, and organize his code with hidden notes!

Sahil’s Request for Today

“Hey! Thanks for helping me build my notebook page last time. Today, I want to expand my existing sahil_day2.html page with new information and organize it so it’s super clean and easy to read.”

“Here is what I need you to help me do:”

Code Notes (Comments): Add hidden notes in the HTML code to label where my “Academic Goals”, “Current Status & Stats”, and “Checklist” sections start so I can find them easily.

Section Dividers: Place horizontal divider lines between each major section so the page looks neat.

New Campus Info Section: Type a brand-new section showing my Dorm Building and Class Room, using tight line breaks so the address and class times sit right under each other without huge gaps!

Objectives

Understand the difference between Paired vs. Unpaired tags
Learn how to add hidden notes in your code using HTML Comments ()
Learn how to draw horizontal divider lines (<hr>)
Learn how to force line breaks without creating new paragraphs (<br>)

Objective 1 — Paired vs. Unpaired Tags

HTML tags are divided into two main categories based on how they are written:

 ┌──────────────────┐
 │ HTML TAGS │
 └────────┬─────────┘
 │
 ┌─────────────────────┴─────────────────────┐
 ▼ ▼
┌──────────────────────┐ ┌──────────────────────┐
│ PAIRED TAGS │ │ UNPAIRED TAGS │
│ <tag>content</tag> │ │ <tag> │
└──────────────────────┘ └──────────────────────┘

1. Paired Tags (Container Tags)

Syntax: <tagname> Content goes here </tagname>
Description: Paired tags come in pairs (an opening tag and a closing tag with a /). They wrap around text or other elements to apply formatting.
Examples: <p>, <h1>, <b>, <i>, <u>, <mark>, <sup>, <sub>, <s>

2. Unpaired Tags (Self-Closing / Standalone Tags)

Syntax: <tagname>
Description: Unpaired tags stand completely alone. They do not have a closing tag and do not wrap around content. Instead, they directly perform an action or insert a visual element on the page.
Examples: <hr>, <br>

Objective 2 — HTML Comments (``)

Simple Definition

HTML Comments are hidden notes written in your code. The browser completely ignores them, making them perfect for leaving notes for yourself or labeling sections of your project.

Example

<!-- This is a hidden note for the programmer -->
<h2>About Me</h2>

Objective 3 — Horizontal Rule (`<hr>`)

Simple Definition

The <hr> tag draws a horizontal divider line across the page to visually separate different sections.

Example

<h2>Section 1</h2>
<p>Some text here...</p>
<hr>
<h2>Section 2</h2>

Objective 4 — Line Break (`<br>`)

Simple Definition

The <br> tag forces text down to the very next line immediately, without adding the large spacing gap that a <p> tag creates.

Example

<p>
 First line of text.<br>
 Second line directly below!
</p>

Guided Activity — Expand & Organize Sahil’s Page

PART 1 — Project Setup

Open VS Code.
Go to File → Open Folder and select your Sahil_Project folder.
Open your existing file: sahil_day2.html.
We will expand and upgrade this existing page together live in class!

PART 2 — Expected Browser Output

Here is what Sahil’s updated website will look like once we add the new campus location section, comments, line breaks, and horizontal rules together:

PART 3 — Live Coding Challenge

We will take our existing code in sahil_day2.html and upgrade it together by inserting comments, adding <hr> dividers between sections, and typing out the new Campus Location & Schedule section using <br> line breaks!

Independent Activity — Favorite Favorites & Layout Clean-Up!

Now it’s your turn! Open your existing personal portfolio page, add a brand-new Top 3 Favorites section, and organize your page using unpaired tags.

Instructions:

Open your Portfolio folder in VS Code.
Open your existing file: portfolio_day2.html.
Add the new favorites section and upgrade your page directly inside this file!

Your Portfolio Prompt

Your updated page must include the following 4 simple requirements:

Section Comments (): Add at least 3 HTML comments to label your code sections (e.g., ).
Horizontal Dividers (<hr>): Add at least 2 horizontal divider lines (<hr>) to separate your main sections visually.
NEW Section — Top 3 Favorites: Add a new <h2> section listing your top 3 favorite series, movies, video games, or songs. Use <br> to put each item on its own line!
Tag Review: Format your top 3 rank numbers using <sup> or <sub> (e.g., 1<sup>st</sup>: Friends), and use 2 other formatting tags of your choice (<u>, <mark>, <b>, <i>, or <s>) in your new section.

Example Solution

Submission Instructions

Submit your work in Google Classroom under In‑Class Exercise 3 by:

Opening your Google Doc from previous lectures.
Pasting your updated HTML code from both sahil_day2.html and portfolio_day2.html.
Adding screenshots of both rendered pages from your browser.
Turning in the document!

Summary: New Tags Learned Today

Tag	Name	Type	What It Does	Example
`<!-- -->`	Comment	Unpaired (Special)	Leaves hidden notes in code	`<!-- Note here -->`
`<hr>`	Horizontal Rule	Unpaired	Draws a horizontal line across page	`<hr>`
`<br>`	Line Break	Unpaired	Forces text to start on next line	`<br>`

Lecture 4 — HTML Attributes: Images & Links

Mon, 01 Jan 0001 00:00:00 +0000

Lecture 4 — HTML Attributes: Images & Links

Instructor: Laksh Budhrani

Quick Recall: Lectures 1–3 Review

Before we learn how to give our tags custom instructions, let’s review all 12 tags we’ve learned so far!

Tag	Name	Type	What It Does	Example
`<h1>` – `<h6>`	Headings	Paired	Creates headings of different sizes	`<h1>Heading</h1>`
`<p>`	Paragraph	Paired	Groups text into structured blocks	`<p>Text here...</p>`
`<b>`	Bold	Paired	Emphasizes text in bold	`<b>Important</b>`
`<i>`	Italics	Paired	Slants text in italics	`<i>Stylized note</i>`
`<u>`	Underline	Paired	Underlines text for emphasis	`<u>Underlined</u>`
`<mark>`	Highlight	Paired	Adds yellow highlight behind text	`<mark>Highlighted</mark>`
`<sup>`	Superscript	Paired	Raises text slightly above line	`1<sup>st</sup>`
`<sub>`	Subscript	Paired	Lowers text slightly below line	`H<sub>2</sub>O`
`<s>`	Strikethrough	Paired	Crosses out text with a line	`<s>Completed</s>`
`<!-- -->`	Comment	Special	Leaves hidden notes in code	`<!-- Note here -->`
`<hr>`	Horizontal Rule	Unpaired	Draws a horizontal divider line	`<hr>`
`<br>`	Line Break	Unpaired	Forces text down to the next line	`<br>`

Class Check-In: Does anyone have questions about any of these 12 tags before we move forward?

The Story Continues…

Sahil’s Week 4 Update!

Sahil’s notebook page is clean and organized thanks to <hr> and <br>, but now he wants to bring it to life!

He wants to add a photo of himself so people know whose page it is, and a clickable link to his university website (UC Irvine) so visitors can check out his campus. But just typing <img> or <a> doesn’t tell the browser which picture to show or where the link should go! Sahil needs our help learning about Attributes to give his tags specific instructions inside index.html.

Sahil’s Request for Today

“Hey! My notebook looks super neat now, but it’s pure text! Today, I want to make it interactive inside my main index.html file.”

“Here is what I need you to help me do:”

Add Profile & Campus Photos: Display my profile image and a picture of UCI using <img>, setting their dimensions so they fit nicely on the page.

Add Helpful Links: Create a clickable link taking visitors to the official UC Irvine website using <a>.

Control Link Destinations: Choose whether links open in a new tab or stay in the same tab using target.

Objectives

Understand what HTML Attributes are using real-world analogies
Master the <img> tag and its key attributes (src, alt, width, height)
Master the <a> (Anchor) tag and its key attributes (href, target)

Objective 1 — What are HTML Attributes?

The Real-World Analogy

Think of an HTML tag as a Video Game Character or a Car:

The Tag tells the browser what kind of object to create (e.g., Car or Player).
The Attributes are the custom details or settings that customize that object (e.g., color="red", speed="100mph", outfit="hoodie").

 ┌──────────────────────────────────────────────────────────────┐
 │ TAG vs ATTRIBUTE │
 ├──────────────────────────────────────────────────────────────┤
 │ TAG: <car> (Creates a basic car) │
 │ ATTRIBUTE: <car color="blue"> (Tells it WHICH color!) │
 └──────────────────────────────────────────────────────────────┘

Simple Definition

An attribute provides extra information or instructions to an HTML tag. Attributes are always placed inside the opening tag and follow a name="value" structure.

Objective 2 — Displaying Images (`<img>`)

The <img> tag is an unpaired tag used to display images on a webpage. However, <img> by itself does nothing—it needs attributes to tell the browser what image to show and how big it should be!

<img src="/images/dog.jpg" alt="A cute golden retriever" width="250" height="200">

Essential Image Attributes:

Attribute	Full Name	Purpose	Generic Example
`src`	Source	Specifies where the image file is saved	`src="my_photo.jpg"`
`alt`	Alternate Text	Text shown if the image breaks, or read by screen readers	`alt="Picture of a cat"`
`width`	Width	Sets the width of the image in pixels	`width="300"`
`height`	Height	Sets the height of the image in pixels	`height="200"`

Step-by-Step Attribute Code Playground

Step 1: Basic Source Only (`src`)

<img src="cat.jpg">

Step 2: Adding Alternate Text (`alt`)

<img src="cat.jpg" alt="A fluffy orange cat">

Step 3: Setting Custom Width (`width`)

<img src="cat.jpg" alt="A fluffy orange cat" width="200">

Step 4: Setting Custom Height (`height`)

<img src="cat.jpg" alt="A fluffy orange cat" height="100">

Step 5: Forcing Both Width AND Height (`width` + `height`)

<img src="cat.jpg" alt="A fluffy orange cat" width="300" height="100">

Objective 3 — Clickable Hyperlinks (`<a>`)

The <a> tag (short for Anchor) creates a clickable link that sends visitors to another webpage.

<a href="https://www.wikipedia.org" target="_blank">Search Wikipedia</a>

Essential Anchor Attributes:

Attribute	Full Name	Purpose	Options / Values
`href`	Hypertext Reference	Web address (URL) destination	`href="[https://example.com](https://example.com)"`
`target`	Target Window	Controls where the link opens	`_blank` OR `_self`

Where Does the Link Open? (`target`)

target="_blank" ➜ Opens the webpage in a brand-new tab (Keeps your website open in the original tab!).
target="_self" ➜ Opens the webpage in the same tab (Replaces your webpage with the new site!).

Target Attribute Live Comparison

<!-- Opens in a NEW tab -->
<a href="https://www.google.com" target="_blank">Search Google (New Tab)</a>

<!-- Opens in the SAME tab -->
<a href="https://www.google.com" target="_self">Search Google (Same Tab)</a>

Try Clicking These Live Links Below:

Guided Activity — Adding Photos & Links to Sahil’s Page

PART 1 — Project Setup

Open VS Code.
Go to File → Open Folder and select your Sahil_Project folder.
Open your existing file: index.html.
Make sure your image files are inside the Sahil_Project folder!

PART 2 — Expected Browser Output

Here is what Sahil’s updated page will look like once we add his profile photo, campus image, and university link inside index.html:

PART 3 — Live Coding Challenge

Together as a class, we will add:

An <img> profile tag with src, alt, and width right under Sahil’s header.
A clickable hyperlink <a> taking users to UC Irvine’s website with href and target="_blank".

Independent Activity — Media & Links Portfolio Upgrade!

Now it’s your turn! Open your personal portfolio page, add a personal or interest image, and add clickable links to your top favorite websites.

Instructions:

Open your Portfolio folder in VS Code.
Open your existing file: portfolio_day1.html.
Upgrade your portfolio by adding images and links directly inside this file!

Your Portfolio Prompt

Your updated page must include the following 4 requirements:

Add an Image (<img>): Add an image related to your interests (or a profile picture) using src, alt, and set a clean size using width.
Add an External Link (<a>): Add couple of clickable links to your favorite website or school website using href.
Tab Control: Use target="_blank" on your external link so it opens in a new browser tab.

Example Solution

Submission Instructions

Submit your work in Google Classroom under In‑Class Exercise 4 by:

Opening your Google Doc from previous lectures.
Pasting your updated HTML code from both index.html and portfolio_day1.html.
Adding screenshots of both rendered pages showing the images and working links!
Turning in the document!

Summary: New Concepts Learned Today

Tag / Attribute	Type	What It Does	Example
`<img>`	Unpaired Tag	Displays an image on the webpage	`<img src="pic.jpg">`
`src="..."`	Attribute	Specifies the image file path	`src="photo.png"`
`alt="..."`	Attribute	Alternative text for accessibility/broken images	`alt="Description"`
`width="..."`	Attribute	Sets width of an element in pixels	`width="300"`
`height="..."`	Attribute	Sets height of an element in pixels	`height="200"`
`<a>`	Paired Tag	Creates a clickable hyperlink	`<a href="...">Text</a>`
`href="..."`	Attribute	Specifies destination URL for a link	`href="https://..."`
`target="_blank"`	Attribute	Opens link in a new tab	`target="_blank"`
`target="_self"`	Attribute	Opens link in the same tab	`target="_self"`

Lecture 5 — HTML Lists: Unordered, Ordered & Nested Lists

Mon, 01 Jan 0001 00:00:00 +0000

Lecture 5 — HTML Lists: Unordered, Ordered & Nested Lists

Instructor: Laksh Budhrani

Quick Recall: Lectures 1–4 Review

Before we learn how to create lists, let’s review all the tags and attributes we’ve mastered so far!

Tag	Associated Attributes	Type	Purpose	Example
`<h1>` – `<h6>`	None	Paired	Headings of different sizes	`<h1>Heading</h1>`
`<p>`	None	Paired	Text paragraph block	`<p>Paragraph</p>`
`<b>`, `<i>`, `<u>`	None	Paired	Bold, Italics, Underline	`<b>Bold</b>`, `<i>Italic</i>`, `<u>Underline</u>`
`<mark>`, `<s>`	None	Paired	Highlight, Strikethrough	`<mark>Highlight</mark>`, `<s>Strike</s>`
`<sup>`, `<sub>`	None	Paired	Superscript, Subscript	`1<sup>st</sup>`, `H<sub>2</sub>O`
`<!-- -->`	None	Special	Hidden code notes/comments	`<!-- Note -->`
`<hr>`, `<br>`	None	Unpaired	Horizontal rule divider, Line break	`<hr>`, `<br>`
`<img>`	`src`, `alt`, `width`, `height`	Unpaired	Displays an image	`<img src="pic.jpg" alt="Pic" width="200">`
`<a>`	`href`, `target` (`_blank` / `_self`)	Paired	Creates clickable hyperlink	`<a href="https://..." target="_blank">Link</a>`

Class Check-In: Does anyone have questions about images, links, or attributes before we learn about lists?

The Story Continues…

Sahil’s Week 5 Update!

Sahil’s website is looking super sleek with his photos and university links! But now that he’s settling into college life at UCI, he wants to track his daily routines on his website.

He has a Dorm Packing Checklist (where order doesn’t matter) and a Daily Morning Routine (where the step-by-step order is super important!). Plus, under his packing list, he wants sub-categories like “Tech” and “Snacks”. Manually typing numbers or dashes in <p> tags gets messy fast. Sahil needs our help using HTML Lists inside a brand-new file: sahil_day5.html!

Sahil’s Request for Today

“Hey! I need to organize my college life into actual clean lists instead of long paragraph lines.”

“Here is what I need you to help me build in sahil_day5.html:”

Dorm Supplies List (Unordered): Bulleted list of items I need for my dorm room where order doesn’t matter.

Morning Class Routine (Ordered): Numbered list of my step-by-step morning routine before my 9:00 AM CS class.

Organized Categories (Nested): Group my supplies under main categories with sub-bullet points!

Objectives

Create bulleted lists using Unordered Lists (<ul>) and List Items (<li>)
Create numbered lists using Ordered Lists (<ol>) and List Items (<li>)
Combine lists to build Nested Lists (lists inside lists)

Objective 1 — Unordered Lists (`<ul>`)

Simple Definition

An Unordered List creates a bullet-pointed list. Use this when the sequence or order of items does not matter (e.g., shopping lists, hobbies, ingredients).

<ul> stands for Unordered List (creates the list container).
<li> stands for List Item (wraps around every single item in the list).

<!-- Generic Example -->
<ul>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Oranges</li>
</ul>

Objective 2 — Ordered Lists (`<ol>`)

Simple Definition

An Ordered List creates a numbered list (1, 2, 3…). Use this when the sequence or step-by-step order does matter (e.g., recipes, top 3 rankings, daily routines).

<ol> stands for Ordered List (creates the numbered container).
<li> stands for List Item (wraps around every single item in the list).

<!-- Generic Example -->
<ol>
 <li>Turn on computer</li>
 <li>Open VS Code</li>
 <li>Start coding!</li>
</ol>

Important Rule: <li> tags MUST always be placed inside either a <ul> or an <ol> tag! Never use <li> by itself.

Objective 3 — Nested Lists (Lists Inside Lists)

Simple Definition

A Nested List is a list placed directly inside another list item. This creates sub-bullets or indented sub-categories!

How it works:

To place a sub-list under an item, put the inner <ul> or <ol> inside the parent <li> before it closes.

<!-- Generic Example -->
<ul>
 <li>Groceries
 <ul>
 <li>Milk</li>
 <li>Eggs</li>
 </ul>
 </li>
 <li>Tools</li>
</ul>

Guided Activity — Building Sahil’s Routine & Packing Page

PART 1 — Project Setup

Open VS Code.
Go to File → Open Folder and select your Sahil_Project folder.
Create a new file named: sahil_day5.html.

PART 2 — Expected Browser Output

Here is what Sahil’s completed lists page will look like once we write the HTML together:

PART 3 — Starter Code (We will write the content together live!)

Paste this starter boilerplate into sahil_day5.html. We will fill in the <body> together in class!

<!DOCTYPE html>
<html>

<head>
 <title>Sahil's Routines & Lists</title>
</head>

<body>
 <!-- START WRITING HERE -->



 <!-- STOP WRITING HERE -->
</body>

</html>

Independent Activity — My Ultimate Lists Page!

Now it’s your turn! Create a brand-new file for your portfolio to display your favorite activities, daily schedule, and organized hobbies using all three list types.

Instructions:

Open your Portfolio folder in VS Code.
Create a new file named portfolio_day5.html.
Copy the starter template above into your file and build your page using <ul>, <ol>, and nested lists.

Your Portfolio Prompt

Your page must include the following 4 requirements:

Unordered List (<ul>): Create a bulleted list of your Top 4 Hobbies or Favorite Foods.
Ordered List (<ol>): Create a numbered list of your 3 Steps in Your Morning/Afternoon/Evening Routine.
Nested List: Create a list with at least 1 sub-category (e.g., Favorite Sports ➜ Team/Player, or Favorite Music ➜ Artist/Song).

Example Solution

Submission Instructions

Submit your work in Google Classroom under In‑Class Exercise 5 by:

Opening your Google Doc from previous lectures.
Pasting your HTML code from both sahil_day5.html and portfolio_day5.html.
Adding screenshots of both rendered pages from your browser.
Turning in the document!

Summary: New Tags Learned Today

Tag	Associated Attributes	Type	Purpose	Example
`<ul>`	None	Paired	Creates a bullet-pointed list container	`<ul>...</ul>`
`<ol>`	None	Paired	Creates a numbered list container (1, 2, 3…)	`<ol>...</ol>`
`<li>`	None	Paired	Defines an individual item inside a `<ul>` or `<ol>`	`<li>Item</li>`

Lecture 6 — Standalone HTML Challenge: Choose Your Own Project!

Mon, 01 Jan 0001 00:00:00 +0000

Lecture 6 — Standalone HTML Challenge: Choose Your Own Project!

Instructor: Laksh Budhrani

Quick Recall: Lectures 1–5 Review

Before we begin our project, let’s review all the tags and attributes we’ve mastered so far!

Tag	Associated Attributes	Type	Purpose	Example
`<h1>` – `<h6>`	None	Paired	Headings of different sizes	`<h1>Heading</h1>`
`<p>`	None	Paired	Text paragraph block	`<p>Paragraph</p>`
`<b>`, `<i>`, `<u>`	None	Paired	Bold, Italics, Underline	`<b>Bold</b>`, `<i>Italic</i>`, `<u>Underline</u>`
`<mark>`, `<s>`	None	Paired	Highlight, Strikethrough	`<mark>Highlight</mark>`, `<s>Strike</s>`
`<sup>`, `<sub>`	None	Paired	Superscript, Subscript	`1<sup>st</sup>`, `H<sub>2</sub>O`
`<!-- -->`	None	Special	Hidden code notes/comments	`<!-- Note -->`
`<hr>`, `<br>`	None	Unpaired	Horizontal rule divider, Line break	`<hr>`, `<br>`
`<img>`	`src`, `alt`, `width`, `height`	Unpaired	Displays an image	`<img src="pic.jpg" alt="Pic" width="200">`
`<a>`	`href`, `target` (`_blank` / `_self`)	Paired	Creates clickable hyperlink	`<a href="https://..." target="_blank">Link</a>`
`<ul>`	None	Paired	Creates an unordered (bulleted) list	`<ul>...</ul>`
`<ol>`	None	Paired	Creates an ordered (numbered) list	`<ol>...</ol>`
`<li>`	None	Paired	Defines an individual list item inside `<ul>` or `<ol>`	`<li>Item</li>`

Class Check-In: Does anyone have questions about any of these tags before we jump into our assignment?

Workspace Setup (First Steps!)

Before writing any code, let’s create a dedicated folder for all your class assignments:

Open File Explorer (Windows) or Finder (Mac).
Navigate inside your main class folder: WD_BlockX_2026.
Create a new folder inside it named: Assignments.
Open VS Code.
Go to File ➜ Open Folder… and select your new Assignments folder.
Create a new file inside this folder named: assignment1.html.

Goal for Today

Today is Project Day! There are no new tags to learn today. Instead, you will apply everything you’ve mastered in Lectures 1–5 to build a standalone web page from scratch.

Pick ONE of the four project options below to build inside assignment1.html!

Pick Your Project Theme

Build a modern, appetizing menu website for your dream restaurant, food truck, or dessert cafe.

<h1> / <h2>: Restaurant name and menu categories (Appetizers, Mains, Drinks).
<img>: Featured dish photo with src, descriptive alt, and clean width.
Formatting Tags: Highlight chef specials (<mark>), spicy warnings (<b>), or prices ($12<sup>99</sup>).
<ul>: Ingredients or dietary notes (Unordered List).
<ol>: Step-by-step ordering process or delivery steps (Ordered List).
Nested List: Food categories with options (e.g., Drinks ➜ Soda flavor choices).
<a>: Clickable link to DoorDash, Yelp, or Google Maps opening in a new tab (target="_blank").

Example Visual Output Inspiration

Option 2: “Build a Fan Page / Video Game Guide”

Create an ultimate fan page or strategy guide for your favorite video game, superhero, movie, or musical artist.

<h1> / <h2>: Game title / artist name and page sections (Overview, Stats, Top Songs).
<img>: Character banner, game cover, or album art.
Formatting Tags: Highlighting power stats (<mark>), secret codes (<u>), or release dates (<i>).
<ul>: Character abilities, weapons, or tracklist (Unordered List).
<ol>: Ranked top 5 moments, level walkthrough steps, or top songs (Ordered List).
Nested List: Game platforms ➔ Console types or Albums ➔ Favorite tracks.
<a>: Clickable link to official trailer, Wiki page, or Spotify (target="_blank").

Example Visual Output Inspiration

Option 3: “Theme Park / Event Flyer Page”

Design a vibrant web flyer for an upcoming event (e.g., Music Festival, Gaming Tournament, School Carnival, or Amusement Park).

<h1> / <h2>: Event name and sections (Schedule, Ticket Info, Venue Rules).
<img>: Official event poster or attraction image.
Formatting Tags: Highlight ticket perks (<mark>), event dates (<b>), or VIP tiers (<i>).
<ul>: What to bring / Park guidelines (Unordered List).
<ol>: Daily event timeline / schedule of events (Ordered List).
Nested List: Pass options ➔ Included perks (e.g., General Admission ➜ Free Parking).
<a>: Clickable link to “Buy Tickets” or venue location on Google Maps (target="_blank").

Example Visual Output Inspiration

Option 4: “Wildcard Choice — Your Own Passion Project!”

Have a different idea you’re passionate about? You can build a custom page on any topic you like (e.g., Sports Team, Hobby Showcase, Book Guide)!

⚠️ Requirement: You MUST get teacher approval (Mr. Laksh) on your idea before you start!
Your custom page must require the exact same effort and meet all requirements from the checklist below.

Required Toolkit Checklist (All Projects)

Regardless of which option you choose, your assignment1.html file must include:

Proper HTML Structure: <!DOCTYPE html>, <html>, <head>, <title>, and <body>.
Headings: At least 1 <h1> (Main Title) and at least 3 <h2> tags (Sub-sections).
Image: At least 1 <img> tag using src, alt, and width.
Text Formatting: At least 3 different formatting tags (<b>, <i>, <u>, <mark>, <s>, <sup>, or <sub>).
Unordered List (<ul>): A bulleted list with at least 3 items.
Ordered List (<ol>): A numbered list with at least 3 items.
Nested List: A list with at least 1 sub-category.
External Link (<a>): A link with href and target="_blank" to open in a new tab.
Cleanliness: Use <hr> dividers between major sections and include at least 2 code comments ().

Starter Template (`assignment1.html`)

Copy this template into your assignment1.html file to start:

<!DOCTYPE html>
<html>

<head>
 <title>Assignment 1 — My Challenge Project</title>
</head>

<body>
 <!-- ==================== START CODE HERE ==================== -->



 <!-- ==================== STOP CODE HERE ==================== -->
</body>

</html>

Submission Instructions

Submit your work in Google Classroom under Assignment 1 by:

Opening your Google Doc for Assignments.
Pasting your complete code from assignment1.html.
Adding a screenshot of your rendered web page from your browser.
Turning in the document!

Lecture 7 — HTML Tables: Creating Structured Data

Mon, 01 Jan 0001 00:00:00 +0000

Lecture 7 — HTML Tables: Creating Structured Data

Instructor: Laksh Budhrani

Quick Recall: Lectures 1–6 Review

Before we learn how to build structured tables, let’s review all the tags and attributes we’ve mastered so far!

Tag	Associated Attributes	Type	Purpose	Example
`<h1>` – `<h6>`	None	Paired	Headings of different sizes	`<h1>Heading</h1>`
`<p>`	None	Paired	Text paragraph block	`<p>Paragraph</p>`
`<b>`, `<i>`, `<u>`	None	Paired	Bold, Italics, Underline	`<b>Bold</b>`, `<i>Italic</i>`, `<u>Underline</u>`
`<mark>`, `<s>`	None	Paired	Highlight, Strikethrough	`<mark>Highlight</mark>`, `<s>Strike</s>`
`<sup>`, `<sub>`	None	Paired	Superscript, Subscript	`1<sup>st</sup>`, `H<sub>2</sub>O`
`<!-- -->`	None	Special	Hidden code notes/comments	`<!-- Note -->`
`<hr>`, `<br>`	None	Unpaired	Horizontal rule divider, Line break	`<hr>`, `<br>`
`<img>`	`src`, `alt`, `width`, `height`	Unpaired	Displays an image	`<img src="pic.jpg" alt="Pic" width="200">`
`<a>`	`href`, `target` (`_blank` / `_self`)	Paired	Creates clickable hyperlink	`<a href="https://..." target="_blank">Link</a>`
`<ul>`	None	Paired	Creates an unordered (bulleted) list	`<ul>...</ul>`
`<ol>`	None	Paired	Creates an ordered (numbered) list	`<ol>...</ol>`
`<li>`	None	Paired	Defines an individual item inside a `<ul>` or `<ol>`	`<li>Item</li>`

Class Check-In: Does anyone have questions about lists or previous project structures before we jump into HTML Tables?

The Story Continues…

Sahil’s Week 7 Update!

Sahil is loving his website! Now that his classes at UCI are in full swing, he wants to display his Weekly Course Schedule in a clean, organized format.

Lists work great for vertical stacks of information, but when Sahil wants to align data side-by-side in grid columns (like Course Name, Days, Time, and Location), lists get messy. Sahil needs our help using HTML Tables to build a single master class schedule inside a brand-new file: sahil_day7.html!

Sahil’s Request for Today

“Hey! I need to build a single structured grid layout so I can view my weekly classes and room numbers clearly!”

“Here is what I need you to help me build in sahil_day7.html:”

Table Structure: Set up one clean table container to hold my schedule.

Header Row: Create bold, distinct column titles (Time, Course Name, Location).

Schedule Rows: Add 4 rows of data matching my actual university timetable!

Objectives

Understand the main table container: <table>
Build horizontal rows using <tr> (Table Row)
Create bold header titles using <th> (Table Header)
Fill in standard data cells using <td> (Table Data)

How HTML Tables Work (Step-by-Step Theory)

Unlike standard text or lists, HTML tables are built row by row from top to bottom. Think of building a table like laying bricks for a house!

The 4 Core Table Building Blocks

┌─────────────────────────────────────────────────────────────┐
│ <table> [Step 1: Outer Wall] │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ <tr> [Step 2: Start Row 1] │ │
│ │ <th>Header 1</th> <th>Header 2</th> [Step 3: Titles]│ │
│ └───────────────────────────────────────────────────────┘ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ <tr> [Step 2: Start Row 2] │ │
│ │ <td>Data 1</td> <td>Data 2</td> [Step 4: Values]│ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

Step 1: Create the Main Wrapper (`<table>`)

Every table begins and ends with the <table> wrapper. It tells the browser that everything inside should be laid out in a grid.

<table>
 <!-- ALL ROWS GO INSIDE HERE -->
</table>

Step 2: Create a Horizontal Row (`<tr>`)

To add a line of information across your page, wrap it in a <tr> tag (Table Row).

<table>
 <tr>
 <!-- CELLS FOR THIS ROW GO HERE -->
 </tr>
</table>

Step 3: Define Column Headings (`<th>`)

For the top row of your table, use <th> (Table Header) for column titles.

Behavior: Text inside <th> is automatically BOLD and CENTERED.

<tr>
 <th>Fruit</th>
 <th>Color</th>
</tr>

Step 4: Add Regular Data Cells (`<td>`)

For all remaining rows below the header, fill in your data using <td> (Table Data).

Behavior: Text inside <td> is regular, left-aligned text.

<tr>
 <td>Apple</td>
 <td>Red</td>
</tr>

Complete Basic Example

Here is what a complete 2x2 table looks like when put together:

<table border = "1">
 <!-- Row 1: Headers -->
 <tr>
 <th>Fruit</th>
 <th>Color</th>
 </tr>
 <!-- Row 2: Data -->
 <tr>
 <td>Apple</td>
 <td>Red</td>
 </tr>
 <!-- Row 3: Data -->
 <tr>
 <td>Banana</td>
 <td>Yellow</td>
 </tr>
</table>

Quick Comparison: `<th>` vs `<td>`

Tag	Full Name	Default Style	Best Used For…
`<th>`	Table Header	Bold & Centered	Top row column names (e.g., Fruit, Color, Price)
`<td>`	Table Data	Normal & Left-Aligned	Standard data cells below the headers

Golden Rule of Tables: Never put text directly inside a <tr> or <table> tag! Text MUST always live inside either a <th> or <td> cell.

Guided Activity — Building Sahil’s Schedule Table

PART 1 — Project Setup

Open VS Code.
Go to File → Open Folder and select your Sahil_Project folder.
Create a new file named: sahil_day7.html.

PART 2 — Expected Browser Output

Here is what Sahil’s completed schedule table will look like once we write the HTML together:

PART 3 — Starter Code (We will write the content together live!)

Paste this starter boilerplate into sahil_day7.html. We will fill in the <body> together in class!

<!DOCTYPE html>
<html>

<head>
 <title>Sahil's Class Schedule</title>
</head>

<body>
 <!-- START WRITING HERE -->



 <!-- STOP WRITING HERE -->
</body>

</html>

Independent Activity — My Personal Schedule Tracker!

Now it’s your turn! Create a brand-new file for your portfolio to display your school schedule, sports rankings, or weekly routines using a single HTML table.

Instructions:

Open your Portfolio folder in VS Code.
Create a new file named portfolio_day7.html.
Copy the starter template above into your file and build your page using <table>, <tr>, <th>, and <td>.

Your Portfolio Prompt

Your page must include the following 4 requirements:

Table Setup: Set up 1 main <table> container with a descriptive <h1> title above it.
Header Row (<th>): Create at least 3 column headers (e.g., Period, Subject, Teacher OR Day, Activity, Time).
Data Rows (<td>): Include at least 3 data rows (<tr>) displaying your schedule or information.

Example Solution

Submission Instructions

Submit your work in Google Classroom under In‑Class Exercise 7 by:

Opening your Google Doc from previous lectures.
Pasting your HTML code from both sahil_day7.html and portfolio_day7.html.
Adding screenshots of both rendered pages from your browser.
Turning in the document!

Summary: New Tags Learned Today

Tag	Associated Attributes	Type	Purpose	Example
`<table>`	None	Paired	Main container wrapper for table content	`<table>...</table>`
`<tr>`	None	Paired	Defines a single horizontal row (Table Row)	`<tr>...</tr>`
`<th>`	None	Paired	Defines a bold, centered header cell (Table Header)	`<th>Header</th>`
`<td>`	None	Paired	Defines a standard data cell (Table Data)	`<td>Data</td>`

Lecture 8 — Advanced Tables: Merging Cells with colspan & rowspan

Mon, 01 Jan 0001 00:00:00 +0000

Lecture 8 — Advanced Tables: Merging Cells with `colspan` & `rowspan`

Instructor: Laksh Budhrani

Quick Recall: Lectures 1–7 Review

Before we learn how to span cells across multiple rows and columns, let’s review all the tags and attributes we’ve mastered so far!

Tag	Associated Attributes	Type	Purpose	Example
`<h1>` – `<h6>`	None	Paired	Headings of different sizes	`<h1>Heading</h1>`
`<p>`	None	Paired	Text paragraph block	`<p>Paragraph</p>`
`<b>`, `<i>`, `<u>`	None	Paired	Bold, Italics, Underline	`<b>Bold</b>`, `<i>Italic</i>`, `<u>Underline</u>`
`<mark>`, `<s>`	None	Paired	Highlight, Strikethrough	`<mark>Highlight</mark>`, `<s>Strike</s>`
`<sup>`, `<sub>`	None	Paired	Superscript, Subscript	`1<sup>st</sup>`, `H<sub>2</sub>O`
`<!-- -->`	None	Special	Hidden code notes/comments	`<!-- Note -->`
`<hr>`, `<br>`	None	Unpaired	Horizontal rule divider, Line break	`<hr>`, `<br>`
`<img>`	`src`, `alt`, `width`, `height`	Unpaired	Displays an image	`<img src="pic.jpg" alt="Pic" width="200">`
`<a>`	`href`, `target` (`_blank` / `_self`)	Paired	Creates clickable hyperlink	`<a href="https://..." target="_blank">Link</a>`
`<ul>`	None	Paired	Creates an unordered (bulleted) list	`<ul>...</ul>`
`<ol>`	None	Paired	Creates an ordered (numbered) list	`<ol>...</ol>`
`<li>`	None	Paired	Defines an individual item inside a `<ul>` or `<ol>`	`<li>Item</li>`
`<table>`	None	Paired	Main container wrapper for table content	`<table>...</table>`
`<tr>`	None	Paired	Defines a single horizontal row	`<tr>...</tr>`
`<th>`	None	Paired	Defines a bold, centered header cell	`<th>Time</th>`
`<td>`	None	Paired	Defines a standard data cell	`<td>8:00 AM</td>`

Class Check-In: Does everyone remember the Golden Rule of Tables? (All text must live inside a <th> or <td>, never directly inside <tr> or <table>!)

The Story Continues…

Sahil’s Week 8 Update!

Sahil’s schedule table looks super neat! But he ran into two small problems when updating his weekly timetable:

He has a Lunch Break from 12:00 PM to 1:00 PM that spans across all 3 columns of his table.

He has a 2-hour CS Lab on Tuesdays that stretches vertically across 2 time slots!

Creating separate empty boxes looks clunky. Sahil needs our help using cell merging attributes (colspan and rowspan) inside sahil_day8.html!

Sahil’s Request for Today

“Hey! I need to merge some table cells so my block schedule looks like a real university calendar!”

“Here is what I need you to help me build in sahil_day8.html:”

Horizontal Merge (colspan): Create a single “Lunch Break” banner row that stretches horizontally across all 3 columns.

Vertical Merge (rowspan): Stretch my 2-hour CS Lab cell vertically downwards so it covers 2 row time slots!

Objectives

Learn how to stretch cells horizontally across columns using colspan
Learn how to stretch cells vertically across rows using rowspan

Objective 1 — Column Span (`colspan`)

Simple Definition

The colspan attribute merges a single cell horizontally across multiple columns (left to right).

Code Example:

Imagine a 3-column table (Name, Subject, Score). For the summary row at the bottom, we stretch “Total Grade” across 2 columns so it aligns with the score!

<table border = "1">
 <tr>
 <th>Student Name</th>
 <th>Subject</th>
 <th>Score</th>
 </tr>
 <tr>
 <td>Sahil</td>
 <td>Web Design</td>
 <td>95</td>
 </tr>
 <!-- 'Total Grade' spans across Column 1 & Column 2 -->
 <tr>
 <td colspan="2">Total Grade</td>
 <td>Pass</td>
 </tr>
</table>

⚠️ Rule for colspan: Because colspan="2" takes up 2 column slots, Row 3 only needs 2 total <td> tags instead of 3!

Objective 2 — Row Span (`rowspan`)

Simple Definition

The rowspan attribute merges a single cell vertically down across multiple rows (top to bottom).

Code Example:

Imagine a schedule where a lab class takes up 2 full hours (8:00 AM to 10:00 AM). We stretch the course box down into the next time slot!

<table border = "1">
 <tr>
 <th>Time Slot</th>
 <th>Class Name</th>
 <th>Room</th>
 </tr>
 <!-- 8:00 AM Slot: Lab starts here and spans down 2 rows -->
 <tr>
 <td>8:00 AM</td>
 <td rowspan="2">2-Hour CS Lab</td>
 <td>Rm 251</td>
 </tr>
 <!-- 9:00 AM Slot: Notice no 'Class Name' cell here! -->
 <tr>
 <td>9:00 AM</td>
 <td>Rm 251</td>
 </tr>
</table>

⚠️ Rule for rowspan: Because “2-Hour CS Lab” stretches down into the 9:00 AM row, the 9:00 AM <tr> only needs 2 <td> tags!

Guided Activity — Building Sahil’s Block Schedule

PART 1 — Project Setup

Open VS Code.
Go to File → Open Folder and select your Sahil_Project folder.
Create a new file named: sahil_day8.html.

PART 2 — Expected Browser Output

Here is what Sahil’s completed block schedule will look like once we write the HTML together:

PART 3 — Starter Code (We will write the content together live!)

Paste this starter boilerplate into sahil_day8.html. We will fill in the <body> together in class!

<!DOCTYPE html>
<html>

<head>
 <title>Sahil's Block Schedule</title>
</head>

<body>
 <!-- START WRITING HERE -->



 <!-- STOP WRITING HERE -->
</body>

</html>

Independent Activity — My Custom Block Schedule!

Now it’s your turn! Upgrade your schedule tracker by merging cells for long classes, study halls, or lunch breaks.

Instructions:

Open your Portfolio folder in VS Code.
Create a new file named portfolio_day8.html.
Copy the starter template above into your file and build your page using <table>, colspan, and rowspan.

Your Portfolio Prompt

Your page must include the following 3 requirements:

Table Structure: Set up a clean schedule table with 3 columns (Time, Course, Location).
Use colspan: Create at least 1 horizontal banner cell spanning across all 3 columns.
Use rowspan: Create at least 1 vertical cell stretching down across 2 rows for a 2-hour class or block period.

Example Solution

Submission Instructions

Submit your work in Google Classroom under In‑Class Exercise 8 by:

Opening your Google Doc from previous lectures.
Pasting your HTML code from both sahil_day8.html and portfolio_day8.html.
Adding screenshots of both rendered pages from your browser.
Turning in the document!

Summary: New Attributes Learned Today

Attribute	Belongs To	What It Does	Example
`colspan`	`<th>` or `<td>`	Merges cells horizontally across columns	`<td colspan="3">Wide Cell</td>`
`rowspan`	`<th>` or `<td>`	Merges cells vertically down across rows	`<td rowspan="2">Tall Cell</td>`

Web Design on Laksh Budhrani | Course Hub

Lecture 1 — Introduction to the Web & Paired Tags

Lecture 1 — Introduction to the Web & Paired Tags

The Problem Statement

Sahil’s Request for Today

Objectives

Objective 1 — Why the World Needed Websites

Objective 2 — The Web Browser

Objective 3 — What Is HTML?

Objective 4 — Why HTML Uses Tags

Objective 5 — Paired Tags We Will Use Today

5a — Headings

Simple Definition

Example

5b — Paragraphs

Simple Definition

Example

5c — Bold Text

Simple Definition

Example

5d — Italics

Simple Definition

Example

Guided Activity — Build Sahil’s Homepage

PART 1 — Project Setup

1. Create your class folder

2. Open VS Code

3. Create your HTML file

PART 2 — Expected Browser Output

PART 3 — Writing the Code

Independent Activity — Build Your Portfolio Page!

Instructions:

Your Portfolio Prompt

Example Solution

Submission Instructions

Summary: Tags Learned Today

Lecture 2 — More Paired Tags & Formatting

Lecture 2 — More Paired Tags & Formatting

Quick Recall: Lecture 1 Review

The Story Continues…

Sahil’s Request for Today

Objectives

Objective 1 — Underline (<u>)

Simple Definition

Example

Objective 2 — Highlight (<mark>)

Simple Definition

Example

Objective 3 — Superscript (<sup>) & Subscript (<sub>)

Simple Definition

Example

Objective 4 — Strikethrough (<s>)

Simple Definition

Example

Guided Activity — Build Sahil’s Notebook Page

PART 1 — Project Setup

PART 2 — Expected Browser Output

PART 3 — Starter Code (We will write the content together live!)

Independent Activity — Your Portfolio Goals!

Instructions:

Your Portfolio Prompt

Example Solution

Submission Instructions

Summary: New Tags Learned Today

Lecture 3 — Unpaired Tags & HTML Comments

Lecture 3 — Unpaired Tags & HTML Comments

Quick Recall: Lecture 1 & 2 Review

The Story Continues…

Sahil’s Request for Today

Objectives

Objective 1 — Paired vs. Unpaired Tags

1. Paired Tags (Container Tags)

2. Unpaired Tags (Self-Closing / Standalone Tags)

Objective 2 — HTML Comments ()

Simple Definition

Example

Objective 3 — Horizontal Rule (<hr>)

Simple Definition

Example

Objective 4 — Line Break (<br>)

Objective 1 — Underline (`<u>`)

Objective 2 — Highlight (`<mark>`)

Objective 3 — Superscript (`<sup>`) & Subscript (`<sub>`)

Objective 4 — Strikethrough (`<s>`)

Objective 2 — HTML Comments (``)

Objective 3 — Horizontal Rule (`<hr>`)

Objective 4 — Line Break (`<br>`)

Objective 2 — Displaying Images (`<img>`)

Step 1: Basic Source Only (`src`)

Step 2: Adding Alternate Text (`alt`)

Step 3: Setting Custom Width (`width`)

Step 4: Setting Custom Height (`height`)

Step 5: Forcing Both Width AND Height (`width` + `height`)

Objective 3 — Clickable Hyperlinks (`<a>`)

Where Does the Link Open? (`target`)

Objective 1 — Unordered Lists (`<ul>`)

Objective 2 — Ordered Lists (`<ol>`)