Chapter 2, Episode 10
Final Project – "My Favorite Things" Page
Create a complete webpage showcasing your favorite things using everything you've learned about HTML
The Favorite Things Fiasco
TrashyMcTweak: *(critically examining the screen)* So, our student has created their "Favorite Things" page, which is SUPPOSED to showcase everything they've learned about HTML. It has lists, images, links, tables, AND a form. But I have SERIOUS concerns about their choices!
CodyMcTweak: *(confused)* What do you mean? The code looks well-structured, and everything's working correctly...
TrashyMcTweak: *(dramatically)* I'm not talking about the CODE! I'm talking about their FAVORITE THINGS! *(points laser at screen)* Look at this list! "Favorite Foods" has PINEAPPLE PIZZA at number one! This is an ABOMINATION! How am I supposed to approve a project that promotes such CONTROVERSIAL food opinions?!
AllyMcTweak: *(rolling eyes)* Trashy, we're reviewing their HTML skills, not their culinary preferences. Besides, the page structure is excellent. They've used ordered and unordered lists exactly as we taught them.
FattyMcTweak: *(leaning forward, suddenly interested)* Actually, I have to side with Trashy on this one. These food choices are questionable at best. *(squints at screen)* Wait, is that... KALE SMOOTHIE listed under "Favorite Drinks"? That's not a drink, that's a punishment! This student clearly needs guidance in both HTML AND taste.
GrumpyMcTweak: *(glaring at screen)* SECURITY BREACH! The student has included links to their ACTUAL social media accounts! DO THEY WANT TO BE HACKED?! In this day and age, putting real personal information online is like leaving your house keys under a doormat with a neon sign saying "FREE STUFF INSIDE"!
CodyMcTweak: *(timidly)* I think they're just placeholder links. See? They all go to the main websites, not personal accounts.
GrumpyMcTweak: *(not listening)* And what's this? A form that collects favorite things from VISITORS? Without proper data validation?! That's how you end up with a database full of 'DROP TABLE STUDENTS;' or 'SYSTEM.CRASH()' or—
AshleyMcTweak: *(interrupting)* The form isn't connected to anything, Grumpy. It's just HTML. We haven't taught them JavaScript or backend processing yet.
GrumpyMcTweak: *(calmer, but still suspicious)* Well... good. But they should still add a disclaimer. TRUST NO ONE.
GarbageMcTweak: *(silently examining code, finally speaks)* Table structure is clean. Proper use of thead and tbody. Good alt text on images. Semantic structure. *(nods approvingly)* Not bad.
AllyMcTweak: See? The technical implementation is perfect. That's what matters.
TrashyMcTweak: *(looking genuinely concerned)* But seriously, can we talk about their favorite movies list? "Attack of the 50-Foot Code Monkeys"? "HTML: The Final Tag"? "The Stylesheet Whisperer"? I've never even HEARD of these! Are they making them up?
AshleyMcTweak: *(looking closer)* I think they're just being creative with movie title parodies related to coding. It's actually pretty clever.
TrashyMcTweak: *(gasps)* Does this mean... are WE the "Favorite Programming Instructors"? *(suddenly emotional)* They... they listed US in their favorite things?
FattyMcTweak: *(proudly)* Of course they did! Who wouldn't list premium instructors like us? *(notices something)* Wait a minute... I'm listed THIRD? After Garbage and Ally? This is an outrage! I demand a recount!
AllyMcTweak: *(smirking)* The truth hurts, doesn't it?
CodyMcTweak: *(looking sad)* At least you're ON the list. I'm... I'm not even mentioned.
GrumpyMcTweak: *(surprisingly gentle)* You're in the alt text for the instructor image. "CodyMcTweak: The most patient teacher." See? They DO appreciate you. They're just hiding it for... SECURITY REASONS! Smart student!
CodyMcTweak: *(brightening up)* Really? That's... that's actually really nice!
TrashyMcTweak: *(suddenly suspicious)* Wait a minute... *(points laser at a small section)* What's this tiny table at the bottom? "Things I Secretly Can't Stand"? *(zooms in)* "1. TrashyMcTweak's laser pointer"?! HOW DARE THEY!
AllyMcTweak: *(laughing)* Well, you do go overboard with that thing. Remember when you "accidentally" shined it in Grumpy's eyes and he thought it was a targeting laser from SkyNet?
GrumpyMcTweak: *(defensively)* THAT WAS A LEGITIMATE CONCERN! You can never be too careful! *(to Trashy)* But maybe stop waving that thing around. FOR SECURITY PURPOSES.
SnowzieMcTweak: *Woof!* *(tilts head at screen)*
AllyMcTweak: *(professionally)* SnowzieMcTweak, we're just reviewing the student's final Chapter 2 project - a "My Favorite Things" page that incorporates all the HTML elements we've taught.
GarbageMcTweak: *(to SnowzieMcTweak)* They've correctly implemented lists, images, links, tables, and a form. Structure is clean. Code is valid.
FattyMcTweak: *(nervously)* Though their favorite foods list is highly questionable. I mean, who ranks oatmeal raisin cookies above chocolate chip? That's practically a coding error in itself!
SnowzieMcTweak: *(walks closer to screen, sniffs)* *Woof! Woof!*
TrashyMcTweak: *(whispers to CodyMcTweak)* What's she saying? I don't speak Elkhound.
CodyMcTweak: *(whispers back)* I think she's... approving it?
*[SnowzieMcTweak suddenly jumps up, paws at the keyboard, and somehow navigates to a hidden section of the page titled "Favorite Animals"]*
*[The team gasps as the page reveals a large gallery of Elkhound photos with "SnowzieMcTweak" listed as #1 Favorite Animal]*
SnowzieMcTweak: *(tail wagging furiously)* *WOOF!*
AshleyMcTweak: Well, that settles it. Project approved.
TrashyMcTweak: *(incredulous)* You're approving it because they sucked up to the boss?
AshleyMcTweak: *(whispering)* You want to be the one to tell her no?
TrashyMcTweak: *(quickly)* PROJECT APPROVED! Outstanding work! The HTML structure is impeccable! The content choices are BEYOND reproach! *(under breath)* Even the pineapple pizza part...
FattyMcTweak: *(to the student)* Let this be a lesson to you: always, ALWAYS include pictures of dogs in your projects. Especially if your instructor is one. That's premium advice you won't get in those fancy coding bootcamps!
GarbageMcTweak: *(nodding)* Good HTML. Good structure. Good dog pictures. *(gives rare thumbs up)* Approved.
SnowzieMcTweak: *Woof!*
*[The team shows visible relief as SnowzieMcTweak continues happily browsing through the Elkhound gallery]*
CodyMcTweak: *(to audience)* And there you have it! Your final project for Chapter 2: combining everything you've learned about HTML to create a "My Favorite Things" page. Remember to include lists, images, links, tables, and forms...
TrashyMcTweak: *(interrupting, whispering frantically)* And DOGS! Don't forget the DOGS!
CodyMcTweak: *(smiling)* ...and maybe a section about your favorite animals. Now let's get started on your own favorite things page!
Step 1: Planning Your Page
CodyMcTweak: Before we start coding, let's plan the structure of our "My Favorite Things" page. Here are some categories you might want to include:
- Favorite foods
- Favorite movies or TV shows
- Favorite books
- Favorite places
- Favorite websites
- Favorite animals
- Favorite hobbies
TrashyMcTweak: Planning? BORING! Just start typing tags and see where inspiration takes you! That's how all the GREATEST websites were made!
GrumpyMcTweak: ABSOLUTELY NOT! Proper planning PREVENTS poor performance! A website without planning is like building a house without blueprints—it'll COLLAPSE and possibly CATCH FIRE!
AllyMcTweak: Let's sketch out a basic structure for the page. Here's a simple template we can use:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Favorite Things</title>
</head>
<body>
<header>
<h1>My Favorite Things</h1>
<p>Welcome to my page about all my favorite things!</p>
</header>
<main>
<section>
<h2>My Favorite Foods</h2>
<!-- List will go here -->
</section>
<section>
<h2>My Favorite Movies</h2>
<!-- Images and descriptions will go here -->
</section>
<section>
<h2>My Favorite Websites</h2>
<!-- Links will go here -->
</section>
<section>
<h2>Comparison of My Favorite Books</h2>
<!-- Table will go here -->
</section>
<section>
<h2>Tell Me Your Favorites</h2>
<!-- Form will go here -->
</section>
</main>
<footer>
<p>Created by [Your Name] - Chapter 2 Final Project</p>
</footer>
</body>
</html>FattyMcTweak: I like this template! It's like a perfect menu layout for a premium restaurant. You start with appetizers (the header), then several delicious main courses (the sections), and finish with a sweet dessert (the footer)!
Before coding, sketch out your page structure. Decide which favorite things you want to include and how you'll organize them.
Step 2: Building Lists for Favorite Things
CodyMcTweak: Let's start by creating lists for your favorite things. Remember, we have two types of lists in HTML:
- Ordered lists (
<ol>) - For items in a specific order, like rankings - Unordered lists (
<ul>) - For items where order doesn't matter
<!-- Ordered list for favorite foods (ranked) -->
<h2>My Favorite Foods</h2>
<ol>
<li>Pizza with extra cheese</li>
<li>Chocolate ice cream</li>
<li>Tacos</li>
<li>Sushi</li>
<li>French fries</li>
</ol>
<!-- Unordered list for favorite movies (not ranked) -->
<h2>My Favorite Movies</h2>
<ul>
<li>The Matrix</li>
<li>Star Wars</li>
<li>The Lord of the Rings</li>
<li>Spirited Away</li>
<li>The Avengers</li>
</ul>
<!-- Nested list for favorite books by genre -->
<h2>My Favorite Books by Genre</h2>
<ul>
<li>Science Fiction
<ul>
<li>Dune</li>
<li>Neuromancer</li>
</ul>
</li>
<li>Fantasy
<ul>
<li>Harry Potter</li>
<li>The Hobbit</li>
</ul>
</li>
</ul>My Favorite Foods
- Pizza with extra cheese
- Chocolate ice cream
- Tacos
- Sushi
- French fries
My Favorite Movies
- The Matrix
- Star Wars
- The Lord of the Rings
- Spirited Away
- The Avengers
My Favorite Books by Genre
- Science Fiction
- Dune
- Neuromancer
- Fantasy
- Harry Potter
- The Hobbit
TrashyMcTweak: Lists are BORING! Let me jazz them up a bit!
<!-- Top 3 reasons I love coding (with emojis) -->
<h2>Why I Love Coding 💻</h2>
<ol>
<li>🚀 I can create anything I imagine</li>
<li>🧩 Solving problems feels like a game</li>
<li>🤖 I can automate boring tasks</li>
</ol>
<!-- Favorite places with descriptions -->
<h2>My Favorite Places</h2>
<ul>
<li>
<strong>The Beach</strong> - Nothing beats the sound of waves and sand between my toes!
</li>
<li>
<strong>My Gaming Corner</strong> - Where I spend way too much time playing <em>just one more level</em>.
</li>
<li>
<strong>The Library</strong> - My quiet sanctuary filled with infinite adventures!
</li>
</ul>AllyMcTweak: You know what? Those are actually pretty good list examples, Trashy. Adding emojis and using <strong> and <em> tags within list items makes them more engaging!
TrashyMcTweak: *(takes a dramatic bow)* THANK YOU! Finally, some recognition for my CREATIVE GENIUS!
Step 3: Adding Images
AshleyMcTweak: No favorite things page is complete without images! Remember to include the alt attribute for accessibility and make sure you have permission to use any images you include.
GrumpyMcTweak: And WATCH YOUR FILE SIZES! Nothing will make users ABANDON your page faster than waiting 47 seconds for a 15MB image of your cat to load! OPTIMIZE! COMPRESS! RESIZE!
<!-- Simple image -->
<h2>My Favorite Animal</h2>
<img src="dog.jpg" alt="A cute dog playing in the park" width="400">
<!-- Image with caption -->
<h2>My Favorite Place</h2>
<figure>
<img src="beach.jpg" alt="Sunset at the beach" width="400">
<figcaption>Beautiful sunset at my favorite beach</figcaption>
</figure>
<!-- Image gallery of favorite foods -->
<h2>My Favorite Foods</h2>
<div class="food-gallery">
<img src="pizza.jpg" alt="Cheese pizza" width="200">
<img src="ice-cream.jpg" alt="Chocolate ice cream" width="200">
<img src="tacos.jpg" alt="Beef tacos with vegetables" width="200">
</div>My Favorite Animal
My Favorite Place
My Favorite Foods
FattyMcTweak: When adding images of food, make sure they're HIGH QUALITY and IN FOCUS! There's nothing worse than a blurry pizza picture. It's practically false advertising! And remember that the width attribute helps control the size of your images, but you could also use CSS for more premium control later.
Best Practices for Images
- Always include descriptive
alttext - Optimize image file sizes (use JPG, PNG, or WebP)
- Specify width and height attributes
- Use relative paths for your own images
- Use
<figure>and<figcaption>for images with captions
Finding Legal Images
- Use your own photos (best option)
- Free stock photo sites like Unsplash or Pexels
- Public domain images
- Creative Commons licensed images (check usage terms)
- Avoid using images you find through general search engines without permission
Step 4: Creating Links
CodyMcTweak: Let's add links to your favorite websites. Remember, links use the <a> tag with the href attribute pointing to the target URL.
GrumpyMcTweak: And ALWAYS, ALWAYS use target="_blank" with rel="noopener noreferrer" when linking to external sites! Otherwise, you're practically INVITING security exploits!
<!-- Simple links to favorite websites -->
<h2>My Favorite Websites</h2>
<ul>
<li>
<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia</a> - For learning anything and everything
</li>
<li>
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">YouTube</a> - For watching tutorials and funny videos
</li>
<li>
<a href="https://www.reddit.com" target="_blank" rel="noopener noreferrer">Reddit</a> - For discussions about my hobbies
</li>
</ul>
<!-- Links with images -->
<h2>Check Out These Cool Websites</h2>
<div class="image-links">
<a href="https://www.nasa.gov" target="_blank" rel="noopener noreferrer">
<img src="nasa-logo.jpg" alt="NASA logo" width="100">
<p>Explore Space</p>
</a>
<a href="https://www.nationalgeographic.com" target="_blank" rel="noopener noreferrer">
<img src="natgeo-logo.jpg" alt="National Geographic logo" width="100">
<p>Discover Nature</p>
</a>
</div>AllyMcTweak: Remember that links can connect to:
- External websites (starting with http:// or https://)
- Email addresses (mailto:example@email.com)
- Other pages on your own site (page2.html)
- Specific sections within the same page (#section-id)
Step 5: Building a Table
GarbageMcTweak: Tables. For structured data comparison only. Not layout. Use semantic elements: <thead>, <tbody>, <th>.
CodyMcTweak: Great point, Garbage! Tables are perfect for comparing different items, like your favorite books, games, or movies. Let's create a table comparing some favorite books with their authors and ratings.
<h2>My Favorite Books</h2>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Rating (out of 5)</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Hobbit</td>
<td>J.R.R. Tolkien</td>
<td>Fantasy</td>
<td>5/5</td>
</tr>
<tr>
<td>Dune</td>
<td>Frank Herbert</td>
<td>Science Fiction</td>
<td>4.5/5</td>
</tr>
<tr>
<td>Pride and Prejudice</td>
<td>Jane Austen</td>
<td>Classic</td>
<td>4/5</td>
</tr>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>Classic</td>
<td>4/5</td>
</tr>
</tbody>
</table>My Favorite Books
| Title | Author | Genre | Rating (out of 5) |
|---|---|---|---|
| The Hobbit | J.R.R. Tolkien | Fantasy | 5/5 |
| Dune | Frank Herbert | Science Fiction | 4.5/5 |
| Pride and Prejudice | Jane Austen | Classic | 4/5 |
| The Great Gatsby | F. Scott Fitzgerald | Classic | 4/5 |
TrashyMcTweak: BORING! Plain tables are so 1990s! We need to SPICE IT UP! Add some personality to your table by including images, colors, or even stars for ratings!
<h2>My Favorite Video Games 🎮</h2>
<table>
<thead>
<tr>
<th>Game</th>
<th>Genre</th>
<th>Platform</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Minecraft</strong></td>
<td>Sandbox