Demo Mode

Project 2 of 4

Project 2: My Superhero

Apply your knowledge to build something amazing!

Project 2: My Super Hero

:information_source: Project Overview :dart: Difficulty Level: Beginner
⏱️ Estimated Time: 2-3 hours
:muscle: Skills Practiced:

CSS Selectors (Element, Class, ID)

HTML Structure & Semantics

External Stylesheet Linking

Color Theory & Typography

Basic Web Design Principles

In this project, you will learn about CSS selectors (element, class, and ID selectors) by creating a character webpage. You'll practice targeting specific HTML elements and applying unique styles to create an engaging webpage about your favorite characters (superheroes, cartoon characters, movie characters, etc.).

Project Roadmap

mermaid

graph LR
    A[🎯 Setup Project] --> B[📝 HTML Structure]
    B --> C[🎨 Basic CSS]
    C --> D[🏷️ Class Selectors]
    D --> E[🔗 ID Selectors]
    E --> F[✨ Polish & Submit]
    
    style A fill:#e94560,color:#fff
    style B fill:#f39c12,color:#fff
    style C fill:#3498db,color:#fff
    style D fill:#9b59b6,color:#fff
    style E fill:#1abc9c,color:#fff
    style F fill:#2ecc71,color:#fff

Learning Objectives

This project teaches:

Element Selectors: Styling HTML elements directly (body, h1, img, a)
Class Selectors: Using classes for reusable styles (.name-heading, .about-heading)
ID Selectors: Unique styling for specific elements (#backtotop)
CSS Properties: Background colors, text colors, font sizes, dimensions
HTML Structure: Headings, paragraphs, images, and links
Responsive Design: Creating visually appealing layouts

Before You Begin:

Open the StackBlitz template: My Super Hero Template
Other alternative: you can download the source code template from StackBlitz Download Project button if you want to use IDE.
The template provides a starting structure for your character webpage
Follow the step-by-step instructions to build your complete project

Important: Before You Start

:warning: Critical Setup Rules DO NOT DELETE the existing files in the template:

Package files

Any other files you didn't create

ONLY EDIT the necessary files.

Common Mistakes to Avoid:

:x: Deleting package.json or other system files

:x: Creating files with incorrect names (case-sensitive!)

:x: Forgetting to link your CSS file to HTML

:x: Using broken image URLs

:bulb: Tip [Pro Tip] Before starting, test one image URL in your browser to make sure it works! Simply paste the URL in a new tab - if you see the image, you're good to go! :rocket:

Expected Overall Output

Note: This shows what your final webpage should look like with all CSS styling applied.

Project Setup

Step 0: Preparation and Asset Collection

Starting the Project:

Open the StackBlitz template provided above
The template already includes basic HTML structure in mysuperhero.html
You'll need to find character images for your project

Finding Character Images:

Go to https://tenor.com/ or https://giphy.com/
Search for at least 3 characters of your choice (superheroes, cartoon characters, movie characters, anime characters, etc.)
Find images in .gif format (animated images work great!)
Copy the image URLs (right-click and select "Copy image address")
You'll use these URLs directly in your HTML code

Implementation Steps

:emoji: Milestone One: HTML Structure Setup

Document Title and Basic Content:

In mysuperhero.html, change the <title> to My Characters
Create the basic HTML structure inside the <body>:

html

<body>
    <h1>My Character List</h1>
    
    <h2>Character 1</h2>
    <img src="YOUR_FIRST_CHARACTER_IMAGE_URL" alt="Character 1">
    
    <h2>About</h2>
    <p>
        Write a description about your first character here. 
        You can describe their powers, personality, or story. 
        <br />
        Add more details about what makes this character special 
        and why you like them.
    </p>
</body>

Instructions:

Replace YOUR_FIRST_CHARACTER_IMAGE_URL with an actual image URL from Tenor/Giphy
Replace "Character 1" with your chosen character name
Find a brief description of your character on Google and use it in the paragraph
Use <br /> tags to create line breaks if needed

:white_check_mark: Success
Checkpoint :white_check_mark:

Before moving on, verify:

Your HTML file displays correctly in the preview

The image loads properly (if not, try a different URL)

The title shows "My Characters" in the browser tab

Feeling stuck? That's okay! Web development is all about problem-solving. Take a break and come back with fresh eyes! :muscle:

:emoji: Milestone 2: Adding Links and Basic CSS

Add More Info Link:

Add this after your character description:

html

<p>
    More Info: 
    <a href="https://example.com/character-info">Learn more about Character 1</a>
</p>

Create CSS File:

Create a new file called style.css in your StackBlitz project
Link it to your HTML by adding this in the <head> section:

html

<link rel="stylesheet" href="style.css">

Add Element Selectors in style.css:

css

/* Element selectors target ALL instances of an HTML element */
body {
    background-color: #1a1a2e;  /* Dark blue background */
    text-align: center;         /* Centers all content */
    color: white;               /* White text for contrast */
}

h1 {
    background-color: #16213e;  /* Darker blue header background */
    color: #e94560;             /* Bright red/pink title */
    font-size: 42px;            /* Large title size */
    padding: 20px;              /* Space inside the header */
}

img {
    height: 200px;              /* Fixed height for consistency */
    width: 300px;               /* Fixed width for consistency */
    border-radius: 10px;        /* Rounded corners */
}

a {
    font-size: 16px;            /* Readable link size */
    text-decoration: none;      /* Removes underline */
    color: #0f3460;             /* Dark blue links */
}

:bulb: Tip [CSS Best Practice] Always add comments to your CSS! They help you remember what each style does and make your code easier to understand when you come back to it later.

:emoji: Milestone 3: CSS Class Selectors

:warning: Common Pitfall Class names are case-sensitive! .name-heading is different from .Name-Heading. Always double-check your spelling and capitalization.

Add Classes to HTML:

Update your <h2> tags to include classes:

html

<h2 class="name-heading">Character 1</h2>
<img src="YOUR_FIRST_CHARACTER_IMAGE_URL" alt="Character 1">

<h2 class="about-heading">About</h2>
<p>Your character description here...</p>

Add Class Selectors in style.css:

css

/* Class selectors start with a dot (.) and can be reused */
.name-heading {
    font-size: 38px;     /* Slightly smaller than h1 */
    color: #e94560;      /* Matching red/pink color */
    margin: 20px 0;      /* Space above and below */
}

.about-heading {
    font-size: 32px;     /* Smaller than name heading */
    color: #f39c12;      /* Orange color for variety */
    margin: 15px 0;      /* Less space than name heading */
}

:white_check_mark: Success
Checkpoint :white_check_mark:

Test your class selectors by:

Checking that character names are red/pink

Checking that "About" headings are orange

Making sure both are different from the main h1 title

Great job! You're mastering CSS selectors! :art:

:emoji: Milestone 4: Multiple Characters

Add Two More Characters:

Copy and paste the character section two more times, then modify for different characters:

html

<!-- Character 2 -->
<h2 class="name-heading">Character 2</h2>
<img src="YOUR_SECOND_CHARACTER_IMAGE_URL" alt="Character 2">

<h2 class="about-heading">About</h2>
<p>Description of your second character...</p>
<p>More Info: <a href="https://example.com">Learn more about Character 2</a></p>

<!-- Character 3 -->
<h2 class="name-heading">Character 3</h2>
<img src="YOUR_THIRD_CHARACTER_IMAGE_URL" alt="Character 3">

<h2 class="about-heading">About</h2>
<p>Description of your third character...</p>
<p>More Info: <a href="https://example.com">Learn more about Character 3</a></p>

:bulb: Tip [Time-Saving Tip] Use different characters from the same universe (like Marvel heroes or Disney characters) to make finding information easier!

:emoji: Milestone 5: CSS ID Selector

:warning: Important Concept ID selectors are unique! Each ID can only be used ONCE per page. Use classes for repeated styles, and IDs for one-of-a-kind elements.

Add Back to Top Link:

Add this before the closing </body> tag:

html

<p>
    <a href="#" id="backtotop">Back to Top</a>
</p>

Add ID Selector in style.css:

css

/* ID selectors start with # and are unique to one element */
#backtotop {
    background-color: #e94560;   /* Bright button color */
    color: white;                /* White text on colored background */
    font-size: 20px;             /* Larger clickable text */
    padding: 10px 20px;          /* Button padding */
    border-radius: 5px;          /* Rounded button corners */
    display: inline-block;       /* Makes padding work properly */
    margin: 20px 0;              /* Space around button */
}

/* :hover pseudo-class adds interactivity */
#backtotop:hover {
    background-color: #c73650;   /* Darker shade on hover */
}

:white_check_mark: Success
Final Checkpoint :white_check_mark:

Your webpage should now have:

A styled title and background

Three character sections with images

Consistent styling with classes

A unique "Back to Top" button

Congratulations! You've completed all the milestones! :tada:

Complete File Structure

Your StackBlitz project should contain:

mysuperhero.html - Main HTML file with character content
style.css - CSS file with all styling rules

Required Elements

Make sure your CSS Selectors project includes:

:white_check_mark: Three different characters with names, images, and descriptions
:white_check_mark: Element selectors for body, h1, img, and a tags
:white_check_mark: Class selectors for name-heading and about-heading
:white_check_mark: ID selector for the back-to-top link
:white_check_mark: External CSS file properly linked to HTML
:white_check_mark: Functional links to more information about each character
:white_check_mark: Proper color scheme and typography

Debugging Tips :bug:

Having issues? Here are common problems and solutions:

Images Not Loading?

:white_check_mark: Check if the URL ends with .gif, .jpg, or .png
:white_check_mark: Try opening the image URL in a new browser tab
:white_check_mark: Make sure you're using the direct image link, not the page link

CSS Not Working?

:white_check_mark: Check if style.css is linked in your HTML <head>
:white_check_mark: Verify file names match exactly (case-sensitive!)
:white_check_mark: Check for missing semicolons (;) in CSS
:white_check_mark: Make sure class names in HTML match CSS exactly

Layout Looks Wrong?

:white_check_mark: Check for unclosed tags in HTML
:white_check_mark: Verify all CSS brackets are properly paired
:white_check_mark: Use browser developer tools (F12) to inspect elements

:bulb: Tip [Pro Debugging Tip] When something doesn't work, change ONE thing at a time and test. This helps you identify exactly what's causing the issue!

Tips for Success

Use Clear Colors: Choose colors that contrast well for readability
Test Image URLs: Make sure your image URLs work before finalizing
Preview Often: Use StackBlitz's live preview to see changes immediately
Check Syntax: Ensure all CSS selectors and properties are spelled correctly
Organize Code: Keep your CSS organized with comments if needed

Extension Challenges :rocket:

Ready to go beyond? Try these optional challenges:

Challenge One: Animation (Intermediate)

Add a simple animation to your images:

css

img {
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.1);
}

Challenge 2: Custom Fonts (Intermediate)

Import and use Google Fonts:

html

<link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap" rel="stylesheet">

css

h1 {
    font-family: 'Comic Neue', cursive;
}

Challenge 3: Character Cards (Advanced)

Create card layouts for each character:

css

.character-card {
    background-color: #16213e;
    border-radius: 15px;
    padding: 20px;
    margin: 20px auto;
    max-width: 600px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

Challenge 4: Theme Switcher (Advanced)

Research and implement a light/dark mode toggle!

:bulb: Tip [Challenge Tip] Completing these challenges shows initiative and creativity. They're great additions to showcase in your portfolio!

Project Submission

When you have completed your "My Super Hero" project, submit it using the link below:

Submit Your Project Here

Make sure to test all links and verify that your styling appears correctly before submitting!

Code Review: Video Tutorial

Project 2 of 4