Quartz 4

Movie Ranking

4 min read

Metadata

Notes

🎬 Favorite Movie Project – Detailed HTML Notes & Guide

🌟 Project Objective

You’ll build a simple HTML webpage that showcases your top 3 favorite movies using the HTML elements you’ve learned so far. The purpose is to apply knowledge of headings, paragraphs, horizontal rules, and void elements in a structured and meaningful way.

🧱 Required HTML Elements for the Project

ElementTagPurpose
Main Title<h1>Title of your movie website
Subtitle<h2>Describes what the list is about
Horizontal Rule<hr />Separates header info from content
Movie Title<h3>Each individual movie name
Movie Description<p>Why you liked each movie
(Optional) Line Break<br />Use in case you want to structure multiline paragraphs or content
(Optional) Comments<!-- comment -->Add notes inside your code for future reference

✅ Minimum Project Structure

Below is the barebones layout your HTML should include:

<h1>Top Movies of All Time According to [Your Name]</h1>
<h2>My Best 3 Movies</h2>
<hr />
 
<h3>Movie Title 1</h3>
<p>Reason why you love this movie.</p>
 
<h3>Movie Title 2</h3>
<p>Another reason why this one made your list.</p>
 
<h3>Movie Title 3</h3>
<p>Something meaningful about this movie.</p>

You can personalize it, expand descriptions, and make the layout more unique.

🎯 Step-by-Step Instructions for Building the Project

1. 📝 Create Your HTML File

Make sure you’re working in VS Code or any HTML editor. Open the extracted folder from the course resource and work inside index.html.

You can start with a basic boilerplate if needed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Favorite Movies</title>
</head>
<body>
 
    <!-- Your content will go here -->
 
</body>
</html>

2. 🏷️ Add the Title and Subtitle

Use heading elements to create a clear structure.

<h1>Top Movies of All Time According to Sam</h1>
<h2>My Best 3 Movies</h2>

  • Use <h1> only once per page – it’s the most important heading.

  • Use <h2> to support or describe the content of your page.

3. ➖ Insert a Horizontal Rule

<hr />

This visually separates the title section from the movie content. It’s a void element, meaning it doesn’t need a closing tag.

4. 🎥 List Your Movies

Use <h3> for each movie title and <p> to describe why you liked it.

<h3>Inception</h3>
<p>A mind-bending thriller that makes you question reality. Great visuals and concept!</p>
 
<h3>The Dark Knight</h3>
<p>A masterpiece in superhero cinema with an unforgettable performance by Heath Ledger.</p>
 
<h3>Parasite</h3>
<p>A unique mix of suspense, drama, and social commentary. Brilliantly executed.</p>

  • Use <h3> to keep all movie titles on the same visual level.

  • Use <p> to offer a short review, personal reason, or memorable moment from the film.

5. 🌈 Make It Your Own (Optional Enhancements)

You can try these extras:

  • Use <br /> if your description needs line breaks (e.g., listing awards or cast).

  • Add a quote or poem using <p> and <br />.

  • Use HTML comments to note why you added something:

<!-- Added break to split the actor names -->
<p>Stars: Leonardo DiCaprio<br />Joseph Gordon-Levitt<br />Elliot Page</p>

📸 Sharing Your Project

The instructor encourages learners to take a screenshot of their finished webpage and share it in the Q&A section for feedback or inspiration. You can Google:

“How to take a screenshot on [your device]”

Once you’ve taken the screenshot, upload it as a comment or share it for discussion!

⚙️ Why This Project Matters

  • Reinforces HTML basics: headings, paragraphs, structure, and void elements.

  • Prepares you for real-world web content: movie reviews, blog posts, lists, etc.

  • Encourages semantic HTML, which improves readability and accessibility.

💡 Tips for Better Practice

TipWhy It Matters
Use semantic tags correctlyHelps search engines and screen readers understand your page
Don’t replace paragraphs with <br>Paragraphs are separate ideas; <br> is for formatting within a paragraph
Format your code cleanlyEasier to read and debug later
Comment your codeEspecially helpful as projects grow
Be creative!This is your project – add your voice and style

✅ Example: Final HTML Code Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Favorite Movies</title>
</head>
<body>
 
    <h1>Top Movies of All Time According to Sam</h1>
    <h2>My Best 3 Movies</h2>
    <hr />
 
    <h3>Inception</h3>
    <p>A mind-bending thriller that challenges your perception of reality.</p>
 
    <h3>The Dark Knight</h3>
    <p>Incredible performances and a gripping storyline. Joker is legendary.</p>
 
    <h3>Parasite</h3>
    <p>A brilliant take on class divide with intense drama and suspense.</p>
 
</body>
</html>

📚 Key Concepts Recap

ConceptTagPurpose
Heading 1<h1>Main title of your page
Heading 2<h2>Subtitle or secondary heading
Horizontal Rule<hr />Void element to separate sections
Heading 3<h3>Subsections or individual items (movie titles)
Paragraph<p>Text content or description
Line Break<br />Optional: Breaks lines within paragraphs

References

Graph View

Backlinks