Welcome to Laksh's CS Hub 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 1 — Turtle Basics

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

Lecture 1 — Turtle Basics

Instructor: Laksh Budhrani

Objective

Set up your project folder and Python file for Turtle.
Understand the Turtle canvas and the turtle’s default direction.
Draw your first simple shape using forward() and left().

Objective 1 — Project Setup

1. Create your class folder

Go to your Desktop.
Create a folder named: CSE_BlockX_2026

Replace BlockX with your class block (example: CSE_BlockB_2026).
This folder will store all your work for the entire year.

2. Open the folder in VS Code

Open VS Code.
Click File → Open Folder.
Select your folder:
CSE_BlockX_2026.

3. Create your Python file

Inside VS Code:

Create a new file.
Name it: turtle_class1.py

This will be your file for Lecture 1.

4. Run your file

We will run the file once we add the Turtle boilerplate code in the next section.

Objective 2 — Turtle Canvas & Angles (Anticlockwise System)

Turtle Starting Position

Below is the Turtle canvas using the anticlockwise angle system.
The turtle begins at the center of the screen at (0, 0) and faces 0°, which means to the right.

Key Points

Turtle starts at (0, 0).
Default direction is 0° → Right.
Basic angles:
- 0° → Right
- 90° → Up
- 180° → Left
- 270° → Down
The graph helps you visualize how the turtle moves.

Objective 3 - Turtle Movement Basics

1. `forward(distance)`

Moves the turtle straight ahead in the direction it is currently facing.

Example:

p.forward(100)

2. `left(angle)`

Turns the turtle anticlockwise by the given number of degrees.

Example:

p.forward(100)
p.left(90)
p.forward(100)

Whiteboard Drawing Activity (Guided)

Whiteboard Image

Explain in Plain English

Write a short explanation (3–5 sentences) describing how you will draw this whiteboard using only:

forward(distance)
left(angle)

Explain the steps in simple English, as if you are giving instructions to a friend.

Now Let’s Code It Together

Use the Turtle boilerplate below and write your whiteboard‑drawing code inside the marked section.

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Write your whiteboard drawing steps using forward() and left())



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Notes

The whiteboard is a rectangle using simple 90° turns.
The two supports are small rectangle drawn below the board.
Only forward() and left() will be used.

Independent Activity — Simple Flag Drawing

Flag Image

Your Task

Look at the flag image above and draw it independently using only:

forward(distance)
left(angle)

Use the Turtle boilerplate code provided earlier in this lecture.

Create Your Own File

Create a new Python file in VS Code named:

turtle_class1_independent.py

Inside that file, use the boilerplate and write your flag‑drawing code in the section marked:

# --- ENTER YOUR CODE HERE ---

Submission Instructions

Submit your work in Google Classroom by:

Creating a Google Doc
Pasting your code into the document
Adding a screenshot of the output window showing your flag drawing
Turn in the Google Doc to the assignment titled In‑Class Exercise 1

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 2 — Turtle Pen Control & Movements

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

Lecture 2 — Turtle Pen Control & Movements

Instructor: Laksh Budhrani

Review / Recap

Basic Commands from Lecture 1

Command	Meaning (Simple)
`p.forward(steps)`	Move the turtle straight ahead
`p.left(angle)`	Turn the turtle left by that angle

Objectives

Understand penup() and pendown()
Learn how to turn using right(angle)
Learn how to move backward using backward(distance)

Objective 1 — `penup()` and `pendown()`

Simple Definitions

penup() — Move the turtle without drawing.
pendown() — Put the pen down to start drawing again.

Example: Drawing Three Horizontal Lines

import turtle as trtl

p = trtl.Turtle()

# --- ENTER YOUR CODE HERE ---
p.forward(50)
p.penup()

p.forward(50)
p.pendown()

p.forward(50)
# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Objective 2 & 3 — `right()` and `backward()`

Simple Definitions

right(angle) — Turn the turtle clockwise by the given angle.
backward(distance) — Move the turtle straight backward without turning.

Example: Drawing a Simple Letter C

import turtle as trtl

p = trtl.Turtle()

# --- ENTER YOUR CODE HERE ---
p.backward(70)
p.right(90)

p.forward(120)
p.left(90)

p.forward(70)
# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

House Drawing Activity (Guided)

Create a new Python file in VS Code named:
turtle_class2.py

House Image

Explain in Plain English

Write a short explanation (3–5 sentences) describing how you think we can draw this house using:

forward()
left()
right()
backward()
penup()
pendown()

Explain the steps in simple English, as if you are telling a friend how to draw it.

Boilerplate Code

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Write your house drawing steps using the new commands)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Notes

Use penup() to move without drawing.
Use pendown() to start drawing again.
Use right() for clockwise turns.
Use backward() if you need to reverse a little.

Independent Activity — Letter `L` Inside a Square

Letter L Image

Your Task

Look at the image above and draw it independently using:

forward(distance)
left(angle)
right(angle)
backward(distance)
penup()
pendown()

Use the Turtle boilerplate code provided earlier in this lecture.

Create Your Own File

Create a new Python file in VS Code named:

turtle_class2_independent.py

Inside that file, use the boilerplate and write your letter‑drawing code in the section marked:

# --- ENTER YOUR CODE HERE ---

Submission Instructions

Submit your work in Google Classroom by:

Creating a Google Doc
Pasting your code into the document
Adding a screenshot of the output window showing your drawing
Turn in the Google Doc to the assignment titled In‑Class Exercise 2

Lecture 3 — Turtle Styling & Visibility

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

Lecture 3 — Turtle Styling & Visibility

Instructor: Laksh Budhrani

Review / Recap

Basic Commands from Previous Lectures

Command	Meaning (Simple)
`p.forward(steps)`	Move the turtle straight ahead
`p.backward(steps)`	Move the turtle straight backward
`p.left(angle)`	Turn the turtle left
`p.right(angle)`	Turn the turtle right
`p.penup()`	Move without drawing
`p.pendown()`	Start drawing again

Objectives

Learn how to change pen color using pencolor()
Learn how to change line thickness using pensize()
Learn how to hide the turtle using hideturtle()
Learn how to show the turtle using showturtle()

Objective 1 — `pencolor()`

Simple Definition

pencolor() — Change the color of the turtle’s pen.

Example: Change Pen Color

p.pencolor("red")
p.forward(100)

Objective 2 — `pensize()`

Simple Definition

pensize() — Change the thickness of the line.

Example: Change Pen Size

p.pensize(10)
p.forward(100)

Objective 3 — `hideturtle()`

Simple Definition

hideturtle() — Hide the turtle icon from the screen.

Example: Hide Turtle

p.hideturtle()
p.forward(100)

Objective 4 — `showturtle()`

Simple Definition

showturtle() — Show the turtle icon again.

Example: Show Turtle

p.showturtle()
p.forward(100)

CS Drawing Activity (Guided)

Create a new Python file in VS Code named:
turtle_class3.py

CS Image

Explain in Plain English

Write a short explanation (3–5 sentences) describing how you think we can draw the letters “C” and “S” using:

forward()
left()
right()
penup()
pendown()
pencolor()
pensize()
hideturtle()

Explain the steps in simple English, as if you are telling a friend how to draw it.

Boilerplate Code

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Write your CS drawing steps using the new styling commands)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Notes

Use different colors for the C and S.
Use pensize(30) to make the letters bold.
Use penup() to move without drawing.
Use pendown() to start drawing again.
Use hideturtle() at the end for a clean final look.

Independent Activity — Color Stairs Drawing

Stairs Image

Your Task

Look at the image above and draw it independently using:

forward(distance)
left(angle)
right(angle)
pencolor()
pensize()
hideturtle()

Use the Turtle boilerplate code provided earlier in this lecture.

Create Your Own File

Create a new Python file in VS Code named:

turtle_class3_independent.py

Inside that file, use the boilerplate and write your stairs‑drawing code in the section marked:

# --- ENTER YOUR CODE HERE ---

Submission Instructions

Submit your work in Google Classroom by:

Creating a Google Doc
Pasting your code into the document
Adding a screenshot of the output window showing your drawing
Turn in the Google Doc to the assignment titled In‑Class Exercise 3

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 4 — Turtle Positioning & Direction

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

Lecture 4 — Turtle Positioning & Direction

Instructor: Laksh Budhrani

Review / Recap

Basic Commands from Previous Lectures

Command	Meaning (Simple)
`p.forward(steps)`	Move the turtle straight ahead
`p.backward(steps)`	Move the turtle straight backward
`p.left(angle)`	Turn the turtle left
`p.right(angle)`	Turn the turtle right
`p.penup()`	Move without drawing
`p.pendown()`	Start drawing again
`p.pencolor(color)`	Change the pen color
`p.pensize(size)`	Change the line thickness
`p.hideturtle()`	Hide the turtle icon
`p.showturtle()`	Show the turtle icon again

Canvas Coordinates & Directions

Canvas Reference Image

The turtle screen works like a graphing plane:

Center → (0, 0)
Right → positive X
Left → negative X
Up → positive Y
Down → negative Y

This helps us understand where the turtle will “teleport” when using goto(x, y).
It also shows how setheading(angle) works:

0° → face right
90° → face up
180° → face left
270° → face down

These angles help us point the turtle in exact directions before drawing.

Objectives

Learn how to teleport the turtle using goto(x, y)
Learn how to point the turtle using setheading(angle)

Objective 1 — `goto(x, y)`

Simple Definition

goto(x, y) — Move the turtle instantly to a specific coordinate.

Example: Move to Top‑Left Corner

p.goto(-200, 150)

Objective 2 — `setheading(angle)`

Simple Definition

setheading(angle) — Point the turtle in a specific direction using degrees.

Example: Face West and Draw

p.setheading(180)
p.forward(100)

Clock Drawing Activity (Guided)

Create a new Python file in VS Code named:
turtle_class4.py

Clock Image

Explain in Plain English

Write a short explanation (3–5 sentences) describing how you think we can draw this clock using:

goto(x, y)
setheading(angle)
penup()
pendown()
right()
forward()

Explain the steps in simple English, as if you are telling a friend how to draw it.

Boilerplate Code

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Use goto() and setheading() to place each clock line)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Notes

Use goto() to place each hour mark.
Use setheading() to point the turtle outward before drawing each line.
Use penup() to move without drawing.
Use pendown() to draw the hour marks.
Use hideturtle() at the end for a clean final look.

Independent Activity — Pine Tree Drawing

Pine Tree Image

Your Task

Look at the image above and draw it independently using:

goto(x, y)
setheading(angle)
forward(distance)
penup()
pendown()
pensize()
pencolor()

Use the Turtle boilerplate code provided earlier in this lecture.

Important Coordinates (Use These!)

To help you draw the pine tree, use these exact coordinates:

Top of triangle → goto(0, 80)
Bottom‑right → goto(60, -20)
Bottom‑left → goto(-60, -20)
Trunk start → goto(0, -20)

These points will help you draw the triangle and trunk in the correct place.

Create Your Own File

Create a new Python file in VS Code named:

turtle_class4_independent.py

Inside that file, use the boilerplate and write your pine‑tree code in the section marked:

# --- ENTER YOUR CODE HERE ---

Submission Instructions

Submit your work in Google Classroom by:

Creating a Google Doc
Pasting your code into the document
Adding a screenshot of the output window showing your drawing
Turn in the Google Doc to the assignment titled In‑Class Exercise 4

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 5 — Turtle Circles, Arcs & Polygons

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

Lecture 5 — Turtle Circles, Arcs & Polygons

Instructor: Laksh Budhrani

Review / Recap

Commands You Already Know

Command	Meaning (Simple)
`p.forward(steps)`	Move the turtle straight ahead
`p.backward(steps)`	Move the turtle straight backward
`p.left(angle)`	Turn the turtle left
`p.right(angle)`	Turn the turtle right
`p.penup()`	Move without drawing
`p.pendown()`	Start drawing again
`p.pencolor(color)`	Change the pen color
`p.pensize(size)`	Change the line thickness
`p.hideturtle()`	Hide the turtle icon
`p.showturtle()`	Show the turtle icon again
`p.goto(x, y)`	Teleport the turtle to a coordinate
`p.setheading(angle)`	Point the turtle in a specific direction

Objectives

Learn how to draw circles
Learn how to draw arcs
Learn how to draw polygon‑style circles

Objective 1 — Full Circle: `circle(r)`

Simple Definition

circle(r) — Draw a full circle with radius r.

Example

p.circle(80)

Objective 2 — Arc: `circle(r, a)`

Simple Definition

circle(r, a) — Draw an arc of angle a degrees.

Example

p.circle(100, 180)

Objective 3 — Polygon Circle: `circle(r, a, s)`

Simple Definition

circle(r, a, s) — Draw a circle or arc using s straight-line steps, creating a polygon.

Example

p.circle(60, 360, 6)

Quick MCQ Check — Circle Syntax & Logic

1. What does `p.circle(50)` draw?

A. A square
B. A full circle of radius 50
C. A half circle
D. A polygon

2. What does `p.circle(80, 90)` draw?

A. A full circle
B. A 90‑degree arc
C. A polygon
D. A straight line

3. What does the third parameter in `circle(r, a, s)` control?

A. Color
B. Speed
C. Number of straight‑line steps
D. Radius

4. Which command draws a triangle using circle syntax?

A. p.circle(50, 360, 3)
B. p.circle(50)
C. p.circle(50, 180)
D. p.circle(50, 360, 10)

5. What does `p.circle(30, 180)` draw?

A. A full circle
B. A 180‑degree arc
C. A square
D. A hexagon

6. Which one draws a polygon with 8 sides?

A. p.circle(60, 360, 8)
B. p.circle(60, 180, 8)
C. p.circle(60)
D. p.circle(60, 360)

7. What happens if you write `p.circle(100, 360, 4)`?

A. A perfect circle
B. A square
C. A triangle
D. A straight line

8. Which command draws a quarter circle?

A. p.circle(80, 360)
B. p.circle(80, 90)
C. p.circle(80, 180)
D. p.circle(80, 45, 4)

Car Drawing Activity (Guided)

Create a new Python file in VS Code named:
turtle_class5.py

Car Image

Explain in Plain English

Write a short explanation (3–5 sentences) describing how you think we can draw this car using:

circle()
circle(r, a)
circle(r, a, s)
pencolor()
pensize()
goto()
setheading()
penup()
pendown()
hideturtle()

Explain the steps in simple English, as if you are telling a friend how to draw it.

Boilerplate Code

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Use circles, arcs, and polygon circles to draw the car)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Notes

Use polygon circles for the car body.
Use full circles for wheels.
Use arcs for the headlight.
Use goto() to place each part correctly.
Use hideturtle() at the end for a clean final look.

Independent Activity — Smiley Face Drawing

Smiley Face Image

Your Task

Look at the image above and draw it independently using:

circle(r)
circle(r, a)
pencolor()
pensize()
goto(x, y)
penup()
pendown()
hideturtle()

Use the Turtle boilerplate code provided earlier in this lecture.

Create Your Own File

Create a new Python file in VS Code named:

turtle_class5_independent.py

Inside that file, use the boilerplate and write your smiley‑face code in the section marked:

# --- ENTER YOUR CODE HERE ---

Submission Instructions

Submit your work in Google Classroom by:

Creating a Google Doc
Pasting your code into the document
Adding a screenshot of the output window showing your drawing
Turn in the Google Doc to the assignment titled In‑Class Exercise 5

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 6 — Turtle Fill Colors & RGB

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

Lecture 6 — Turtle Fill Colors & RGB

Instructor: Laksh Budhrani

Review / Recap

Commands You Already Know

Command	Meaning (Simple)
`p.forward(steps)`	Move the turtle straight ahead
`p.backward(steps)`	Move the turtle straight backward
`p.left(angle)`	Turn the turtle left
`p.right(angle)`	Turn the turtle right
`p.penup()`	Move without drawing
`p.pendown()`	Start drawing again
`p.pencolor(color)`	Change the pen color
`p.pensize(size)`	Change the line thickness
`p.hideturtle()`	Hide the turtle icon
`p.showturtle()`	Show the turtle icon again
`p.goto(x, y)`	Teleport the turtle to a coordinate
`p.setheading(angle)`	Point the turtle in a specific direction
`p.circle(r)`	Draw a full circle of radius r
`p.circle(r, a)`	Draw an arc of angle a degrees
`p.circle(r, a, s)`	Draw a polygon circle using s steps

Objectives

Learn how RGB colors work
Learn how to use fillcolor()
Learn how to use begin_fill() and end_fill()

Objective 1 — RGB Colors in Turtle

Simple Definition

RGB stands for Red, Green, Blue
Each value goes from 0 to 255
You can mix these three numbers to create any color

Syntax

p.fillcolor( r, g, b )
p.pencolor( r, g, b )

Example:

p.fillcolor(0, 120, 255) # bright blue
p.pencolor(255, 0, 0) # red outline

RGB Venn Diagram

Objective 2 — `fillcolor()`

Simple Definition

fillcolor() — Set the color used to fill shapes.

Example

p.fillcolor("purple")

Objective 3 — `begin_fill()` and `end_fill()`

Simple Definition

begin_fill() — Start filling the shape
end_fill() — Finish filling the shape

Example

p.fillcolor("blue")
p.begin_fill()
p.forward(100)
p.left(90)
p.forward(100)
p.left(90)
p.forward(100)
p.left(90)
p.forward(100)
p.end_fill()

France Flag Activity (Guided)

Create a new Python file in VS Code named:
turtle_class6.py

France Flag Image

Explain in Plain English

Write a short explanation (3–5 sentences) describing how you think we can draw the France flag using:

fillcolor()
begin_fill()
end_fill()
goto()
setheading()
penup()
pendown()
forward()
left()

Explain the steps in simple English, as if you are telling a friend how to draw it.

Boilerplate Code

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Use fillcolor, begin_fill, end_fill, and RGB if you want)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Notes

The France flag has three vertical rectangles
Use begin_fill() and end_fill() for each rectangle
Use goto() to move to each section
Use RGB or color names
Use hideturtle() at the end for a clean final look

Independent Activity — Traffic Light Drawing

Traffic Light Image

Your Task

Look at the image above and draw it independently using:

fillcolor()
begin_fill()
end_fill()
circle(r)
pensize()
goto(x, y)
penup()
pendown()
forward()
right()
hideturtle()

Use the Turtle boilerplate code provided earlier in this lecture.

Create Your Own File

Create a new Python file in VS Code named:

turtle_class6_independent.py

Inside that file, use the boilerplate and write your traffic‑light code in the section marked:

# --- ENTER YOUR CODE HERE ---

Submission Instructions

Submit your work in Google Classroom by:

Creating a Google Doc
Pasting your code into the document
Adding a screenshot of the output window showing your drawing
Turn in the Google Doc to the assignment titled In‑Class Exercise 6

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 7 — Turtle Shapes, Stamps & Sizes

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

Lecture 7 — Turtle Shapes, Stamps & Sizes

Instructor: Laksh Budhrani

Review / Recap

Commands You Already Know

Command	Meaning (Simple)
`p.forward(steps)`	Move the turtle straight ahead
`p.backward(steps)`	Move the turtle straight backward
`p.left(angle)`	Turn the turtle left
`p.right(angle)`	Turn the turtle right
`p.penup()`	Move without drawing
`p.pendown()`	Start drawing again
`p.pencolor(color)`	Change the pen color
`p.pensize(size)`	Change the line thickness
`p.hideturtle()`	Hide the turtle icon
`p.showturtle()`	Show the turtle icon again
`p.goto(x, y)`	Teleport the turtle to a coordinate
`p.setheading(angle)`	Point the turtle in a specific direction
`p.circle(r)`	Draw a full circle
`p.circle(r, a)`	Draw an arc
`p.circle(r, a, s)`	Draw a polygon circle
`p.begin_fill()`	Start filling a shape
`p.end_fill()`	Finish filling a shape
`p.fillcolor()`	Set fill color

Objectives

Learn how to change turtle shape
Learn how to stamp turtle shapes
Learn how to change turtle size using turtlesize()
Learn how to change turtle speed
Learn how to draw dots using dot()

Objective 1 — `shape()`

Simple Definition

shape() — Change the turtle’s appearance.

Available Shapes

"arrow"
"turtle"
"circle"
"square"
"triangle"
"classic"

Example

p.shape("turtle")
p.forward(100)

Objective 2 — `stamp()`

Simple Definition

stamp() — Leave a copy of the turtle shape on the screen.

Example

p.shape("arrow")
p.stamp()
p.forward(30)
p.shape("turtle")
p.stamp()
p.forward(30)
p.shape("circle")
p.stamp()

Objective 3 — `turtlesize()`

Simple Definition

turtlesize() — Make the turtle icon bigger or smaller.

Example

p.shape("circle")
p.turtlesize(1)
p.stamp()
p.forward(70)
p.turtlesize(2)
p.stamp()
p.forward(70)
p.turtlesize(3)
p.stamp()

Objective 4 — `speed()`

Simple Definition

speed() — Change how fast the turtle moves.

Speed Levels (Short & Simple)

speed(0) → fastest (no animation)
speed(1) → slowest
speed(3) → slow
speed(6) → normal
speed(10) → fast

Example

p.speed(0) # fastest drawing

Objective 5 — `dot()`

Simple Definition

dot(size, color) — Draw a filled circle (dot).

Example

p.dot(30, "red")
p.forward(40)
p.dot(15, "purple")
p.forward(40)
p.dot(25, "green")

Solar System Activity (Guided)

Create a new Python file in VS Code named:
turtle_class7.py

Solar System Image

Explain in Plain English

Write a short explanation (3–5 sentences) describing how you think we can draw this solar system using:

shape()
turtlesize()
stamp()
speed()
dot()
pencolor()
fillcolor()
goto()
penup()
pendown()

Explain the steps in simple English, as if you are telling a friend how to draw it.

Boilerplate Code

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Use shape, turtlesize, stamp, speed, and dot to draw the solar system)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Notes

Use shape("triangle") and stamp() for stars
Use dot() for planets
Use turtlesize() to make stars bigger
Use goto() to place each planet
Use bgcolor() to make space look nice
Use hideturtle() at the end for a clean final look

Independent Activity — Ladybug Drawing

Ladybug Image

Your Task

Look at the image above and draw it independently using:

shape()
turtlesize()
stamp()
dot()
fillcolor()
pencolor()
goto(x, y)
penup()
pendown()
hideturtle()

Use the Turtle boilerplate code provided earlier in this lecture.

Create Your Own File

Create a new Python file in VS Code named:

turtle_class7_independent.py

Inside that file, use the boilerplate and write your ladybug code in the section marked:

# --- ENTER YOUR CODE HERE ---

Submission Instructions

Submit your work in Google Classroom by:

Creating a Google Doc
Pasting your code into the document
Adding a screenshot of the output window showing your drawing
Turn in the Google Doc to the assignment titled In‑Class Exercise 7

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>`

Lecture 8 — Turtle Review Project

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

Lecture 8 — Turtle Review Project

Instructor: Laksh Budhrani

Review / Recap

Commands You Already Know

Command	Meaning (Simple)
`p.forward(steps)`	Move forward
`p.backward(steps)`	Move backward
`p.left(angle)`	Turn left
`p.right(angle)`	Turn right
`p.penup()`	Lift the pen
`p.pendown()`	Put the pen down
`p.pencolor(color)`	Change line color
`p.pensize(size)`	Change line thickness
`p.goto(x, y)`	Move to a coordinate
`p.setheading(angle)`	Point the turtle in a direction
`p.circle(r)`	Draw a circle
`p.begin_fill()`	Start filling a shape
`p.end_fill()`	Finish filling a shape
`p.fillcolor(color)`	Set fill color
`p.dot(size, color)`	Draw a dot
`p.shape(name)`	Change turtle shape
`p.stamp()`	Stamp the turtle shape
`p.turtlesize(size)`	Resize the turtle icon
`p.speed(value)`	Change drawing speed
`wn.bgcolor(color)`	Change background color

Objectives

Review all turtle methods learned
Choose one project to complete independently
Use creativity + multiple turtle concepts
Submit your final drawing in Google Classroom

Your Task for Today

You will not learn new commands today.
Instead, choose ONE of the following projects and draw it using the turtle methods you already know.

Option 1 — American Flag

You may use:

p.forward, p.pensize, p.begin_fill, p.end_fill, p.shape, p.stamp, p.goto, etc.

Option 2 — House Drawing

You may use:

p.begin_fill, p.end_fill, p.circle, p.goto, p.fillcolor, p.pencolor, etc.

Option 3 — Solar System

You may use:

p.dot, p.circle, p.goto, p.speed, wn.bgcolor, etc.

Option 4 — Something Else

You may create your own idea, but only if:

it uses multiple turtle methods
it is appropriate
you get instructor approval

Boilerplate Code

Create a new Python file in VS Code named:

turtle_class8.py

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Choose one project and draw it using turtle methods)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Submission Instructions

Submit your work in Google Classroom under:

Assignment 1 — Turtle Review Project

Include:

A Google Doc
Your code pasted inside
A screenshot of your final drawing
Turn it in before the deadline

Reminder

This is your review assignment.
Use creativity, color, shapes, and all turtle methods you’ve learned.

Have fun drawing!

Lecture 9 — Input, Variables & Identifiers

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

Lecture 9 — Input, Variables & Identifiers

Instructor: Laksh Budhrani

Review / Recap

Turtle Commands You Already Know

Command	Meaning (Simple)
`p.forward()`	Move forward
`p.backward()`	Move backward
`p.left()`	Turn left
`p.right()`	Turn right
`p.penup()`	Lift the pen
`p.pendown()`	Put the pen down
`p.pencolor()`	Change line color
`p.pensize()`	Change line thickness
`p.goto()`	Move to a coordinate
`p.setheading()`	Point the turtle in a direction
`p.circle()`	Draw a circle
`p.begin_fill()`	Start filling a shape
`p.end_fill()`	Finish filling a shape
`p.fillcolor()`	Set fill color
`p.dot()`	Draw a dot
`p.shape()`	Change turtle shape
`p.stamp()`	Stamp the turtle shape
`p.turtlesize()`	Resize the turtle icon
`p.speed()`	Change drawing speed
`wn.bgcolor()`	Change background color

Any questions about the previous assignment?

Ask now before we move on.

Objective

Understand how to collect user input, store it in variables, and name variables correctly using identifiers.

What is a variable
How to name variables (identifiers)
How input() collects information

Objective 1 — Variables

A variable is a container that stores a value.

Examples:

car_length = 120
color = "blue"
wheel_radius = 20

Key Ideas:
• Variables store information
• You can use them later

Objective 2 — Identifiers (Variable Names)

Identifiers are the names you give to variables.

Rules

✔ Must start with a letter or underscore
✔ Can contain letters, numbers, underscores
✔ No spaces
✔ No special characters
✔ Case‑sensitive
✔ Should be meaningful

Correct Examples

pizza_size
car_length
wheel_radius
crust_color

Wrong Examples

2size # cannot start with a number
car length # spaces are not allowed
wheel-radius # hyphens are not allowed
@color # special characters not allowed

Objective 3 — The input() Function

What input() Does

• Pauses the program
• Waits for the user to type something
• Continues after Enter is pressed

Basic Syntax:

input("Enter something: ")

VERY IMPORTANT — Rule of Thumb for Numbers

When you ask the user for a whole number, Python does NOT automatically treat it as a number.

To make sure Python understands it correctly:

RULE OF THUMB

Whenever you want a whole number, ALWAYS use:

int(input("Enter a number: "))

Examples

car_length = int(input("Enter car length: "))
wheel_radius = int(input("Enter wheel radius: "))
pizza_size = int(input("Enter pizza size: "))

This keeps your program correct and prevents errors later.

Combine input + variables + identifiers

Example:

color = input("Enter a color: ")
size = int(input("Enter a size: "))

Now you can use these values in Turtle.

Quick MCQs (Check Your Understanding)

1. Which of the following is a correct identifier?
A. 2car
B. car length
C. car_length
D. car-length

2. What does input() do?
A. Draws a shape
B. Pauses and waits for user typing
C. Changes turtle color
D. Runs the program faster

3. If you want to ask the user for a whole number, what should you use?
A. input()
B. input() + number
C. int(input())
D. whole(input())

4. Which identifier is wrong?
A. pizza_size
B. crustColor
C. size2
D. pizza size

Guided Activity — Customizable Car

Create a new Python file in VS Code named:
turtle_class9.py

Image

Requirements

Ask the user for:

Car length → use int()
Car color → string
Wheel radius → use int()

Then draw a car using Turtle:

Rectangle body (use car length)
Filled color (use car color)
Two wheels (use wheel radius)

Boilerplate Code

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Write your drawing code in this section)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Independent Activity — Customizable Pizza Maker

Pizza Image

Your Task

Ask the user for:

Pizza size → use int()
Crust color
Cheese color

Then draw the pizza using:

Two concentric circles
p.circle()
p.begin_fill()
p.end_fill()
p.fillcolor()
p.goto()
penup()
pendown()
etc.

Use the Turtle boilerplate code provided earlier in this lecture.

Create Your Own File

Create a new Python file in VS Code named:

turtle_class9_independent.py

Inside that file, use the boilerplate and write your pizza code in the section marked:

# --- ENTER YOUR CODE HERE ---

Submission Instructions

Submit your work in Google Classroom by:

Creating a Google Doc
Pasting your code into the document
Adding a screenshot of the output window showing your pizza drawing
Turn in the Google Doc to the assignment titled In‑Class Exercise 9

Lecture 10 — print() Statement & Comments

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

Lecture 10 — print() Statement & Comments

Instructor: Laksh Budhrani

Review / Recap

Turtle Commands You Already Know

Command	Meaning (Simple)
`p.forward()`	Move forward
`p.backward()`	Move backward
`p.left()`	Turn left
`p.right()`	Turn right
`p.penup()`	Lift the pen
`p.pendown()`	Put the pen down
`p.pencolor()`	Change line color
`p.pensize()`	Change line thickness
`p.goto()`	Move to a coordinate
`p.setheading()`	Point the turtle in a direction
`p.circle()`	Draw a circle
`p.begin_fill()`	Start filling a shape
`p.end_fill()`	Finish filling a shape
`p.fillcolor()`	Set fill color
`p.dot()`	Draw a dot
`p.shape()`	Change turtle shape
`p.stamp()`	Stamp the turtle shape
`p.turtlesize()`	Resize the turtle icon
`p.speed()`	Change drawing speed
`wn.bgcolor()`	Change background color

Input, Variables & Identifiers (Quick Table)

Concept	Meaning (Simple)	Example
input()	Ask the user a question	`name = input("Enter name: ")`
variable	Stores a value	`size = 100`
identifier	Name of a variable	`wall_color`, `rocket_height`
Rule for numbers	Use `int()` when asking for whole numbers	`height = int(input("Enter height: "))`

Any questions about the previous assignment?

Ask now before we move on.

Objective

Understand how to display information using print() and write notes using comments.

What print() does & commas inside print
How to write comments

Objective 1 — print()

What print() Does

• Shows text or values on the screen
• Helps you communicate with the user

Basic Syntax:

print("Hello")

Using Commas in print()

Commas let you print multiple things in one line.

Example:

name = "Laksh"
print("Hello", name)

Output:

Hello Laksh

Commas automatically add a space between items.

Objective 2 — Comments (#)

Comments are notes for humans.
Python ignores them completely.

How to Write a Comment

# This is a comment
print("Welcome") # greeting message

Use comments to:

Explain your code
Label sections
Make your program easier to read

Quick MCQs (Check Your Understanding)

1. What does print() do?
A. Draws a shape
B. Shows text on the screen
C. Changes turtle color
D. Pauses the program

2. What does a comma do inside print()?
A. Joins text with no space
B. Adds a space between items
C. Makes the text bold
D. Converts numbers

3. What does a comment do?
A. Runs faster code
B. Draws a shape
C. Is ignored by Python
D. Prints a message

4. Which line is a correct comment?
A. // This is a comment
B. # This is a comment
C. comment This is a comment
D. * This is a comment

Guided Activity — Customizable House

Create a new Python file in VS Code named:
turtle_class10.py

House Image

Your Task

Ask the user for:

Wall size → use int()
Wall color

Then:

Print a line before drawing:

Drawing a house with wall size: 120 and color: blue

(Use commas inside print)

Draw the house using:
- p.begin_fill()
- p.end_fill()
- p.fillcolor()
- p.forward()
- p.left()
- p.goto()
- etc.
After the drawing is complete, print:
```
House construction complete!
```

Use the Turtle boilerplate code provided below.

Boilerplate Code

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Write your drawing code in this section)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Independent Activity — Rocket Launcher

Create a new Python file in VS Code named:
turtle_class10_independent.py

Rocket Image

Your Task

Ask the user for:

Rocket height → use int()
Body color
Fin color

Then:

Print launch messages:

Initializing Launch Sequence...
Rocket Height Set To: 100 units
3... 2... 1... IGNITION!

Draw the rocket using:
- p.begin_fill()
- p.end_fill()
- p.fillcolor()
- p.circle()
- p.goto()
- penup()
- pendown()
- etc.

After drawing, print:

Rocket successfully deployed on canvas!

Use the Turtle boilerplate code provided earlier.

Submission Instructions

Submit your work in Google Classroom by:

Creating a Google Doc
Pasting your code into the document
Adding a screenshot of the output window showing your drawing
Turn in the Google Doc to the assignment titled In‑Class Exercise 10

Lecture 11 — Python Basic Commands Review Project

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

Lecture 11 — Python Basic Commands Review Project

Instructor: Laksh Budhrani

Review / Recap

Turtle Commands You Already Know

Command	Meaning (Simple)
`p.forward()`	Move forward
`p.backward()`	Move backward
`p.left()`	Turn left
`p.right()`	Turn right
`p.penup()`	Lift the pen
`p.pendown()`	Put the pen down
`p.pencolor()`	Change line color
`p.pensize()`	Change line thickness
`p.goto()`	Move to a coordinate
`p.setheading()`	Point the turtle in a direction
`p.circle()`	Draw a circle
`p.begin_fill()`	Start filling a shape
`p.end_fill()`	Finish filling a shape
`p.fillcolor()`	Set fill color
`p.dot()`	Draw a dot
`p.shape()`	Change turtle shape
`p.stamp()`	Stamp the turtle shape
`p.turtlesize()`	Resize the turtle icon
`p.speed()`	Change drawing speed
`wn.bgcolor()`	Change background color

Input, Variables, Identifiers, Print & Comments (Quick Table)

Concept	Meaning (Simple)	Example
input()	Ask the user a question	`name = input("Enter name: ")`
int(input())	Ask for a whole number	`height = int(input("Enter height: "))`
variable	Stores a value	`size = 100`
identifier	Name of a variable	`wall_color`, `rocket_height`
print()	Show text or values on the screen	`print("Hello", name)`
comment (#)	Note for humans, ignored by Python	`# This draws the wall`

Objectives

Review Python basics learned so far
Use input, variables, identifiers, print, and comments
Build a Tricolor Flag Generator
Submit your final drawing in Google Classroom

Your Task for Today

You will not learn new commands today.
Instead, you will complete one required project using all Python basics learned so far.

Required Project — Tricolor Flag Generator

You must create a Tricolor Flag Generator using:

input()
variables
identifiers
print()
comments
turtle drawing methods

Your Task

Ask the user for:

Single stripe width → use int
Flag height → use int
Left stripe color
Middle stripe color
Right stripe color

Then:

Print two status messages before drawing:

--- GENERATING FLAG ---
Drawing 3 stripes side-by-side...

Draw three stripes, each using:

t.fillcolor()
t.begin_fill()
t.end_fill()
t.forward()
t.left()

After drawing all stripes, print:
```
Flag generation complete!
```

Boilerplate Code

Create a new Python file in VS Code named:

turtle_class11.py

import turtle as trtl

p = trtl.Turtle()
p.speed(0)

# --- ENTER YOUR CODE HERE ---
# (Write your Tricolor Flag Generator code here)



# --------------------------------------------------------------
# (Stop writing code above this line)

wn = trtl.Screen()
wn.mainloop()

Submission Instructions

Submit your work in Google Classroom under:

Assignment 2 — Python Basic Commands Review Project

Include:

A Google Doc
Your code pasted inside
A screenshot of your final flag
Turn it in before the deadline

Reminder

This is your review assignment.
Use input, variables, identifiers, print, comments, and turtle methods together.

Have fun coding!

Welcome to Laksh's CS Hub 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 1 — Turtle Basics

Lecture 1 — Turtle Basics

Objective

Objective 1 — Project Setup

1. Create your class folder

2. Open the folder in VS Code

3. Create your Python file

4. Run your file

Objective 2 — Turtle Canvas & Angles (Anticlockwise System)

Turtle Starting Position

Key Points

Objective 3 - Turtle Movement Basics

1. forward(distance)

2. left(angle)

Whiteboard Drawing Activity (Guided)

Whiteboard Image

Explain in Plain English

Now Let’s Code It Together

Notes

Independent Activity — Simple Flag Drawing

Flag Image

Your Task

Create Your Own File

Submission Instructions

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

1. `forward(distance)`

2. `left(angle)`

Objective 1 — Underline (`<u>`)

Objective 2 — Highlight (`<mark>`)

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

Objective 4 — Strikethrough (`<s>`)

Objective 1 — `penup()` and `pendown()`

Objective 2 & 3 — `right()` and `backward()`

Independent Activity — Letter `L` Inside a Square

Objective 1 — `pencolor()`

Objective 2 — `pensize()`

Objective 3 — `hideturtle()`

Objective 4 — `showturtle()`

Objective 2 — HTML Comments (``)

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