McTweak.ai

Learning to Code with the McTweak Team

Current Episode

Chapter 1, Episode 10

Final Project – Personal Introduction Page

Final Project: Your Personal Introduction Page

Putting It All Together!

The McTweak Team Discusses

TrashyMcTweak

WE'VE REACHED THE FINAL BOSS BATTLE OF CHAPTER ONE! The CULMINATION of our HTML JOURNEY! The GRAND FINALE of our MARKUP SYMPHONY!

CodyMcTweak

Wait, final? But I just started understanding what HTML stands for last week! I'm not ready for a final anything!

AllyMcTweak

It's not a test, Cody. It's a project that brings together everything we've taught about HTML so far—a chance for the students to see how all these pieces work together.

FattyMcTweak

Like how all these sprinkles, glaze, and dough combine to create the premium donut experience. (takes a bite) Each element has its purpose, but together... (chef's kiss) ...perfection.

GrumpyMcTweak

This ISN'T a CULINARY ADVENTURE, Fatty! It's serious web ARCHITECTURE! Every element must be PROPERLY STRUCTURED and SEMANTICALLY SOUND! (slams folder) I've created a SEVENTEEN-POINT CHECKLIST for validating their HTML!

AshleyMcTweak

The project specification just calls for a personal introduction page with a title, bio, image, links, and styled lists. I don't see anything about a seventeen-point validation process.

GarbageMcTweak

Final project time, huh? Good. Let them put it all together and see how the pieces connect.

SnowzieMcTweak

(Brings in a scrapbook, barks encouragingly)

GarbageMcTweak

Snowzie's got the right idea. It's a personal introduction collection. Photos, notes, lists of favorites—just like the webpage they're going to build. Each page has different elements but they all come together to tell a story.

CodyMcTweak

Oh! So the heading tags are like the titles in the scrapbook, and the image tags are like the photos, and the lists are like, well, the lists!

TrashyMcTweak

I'll create a TEMPLATE with PLACEHOLDERS for all the elements! With HELPFUL COMMENTS! And INSPIRATIONAL QUOTES about the DIGITAL JOURNEY!

GrumpyMcTweak

NO UNAUTHORIZED JAVASCRIPT or CSS ANIMATIONS! HTML ONLY!

TrashyMcTweak

Fine! Pure HTML! Very standards-compliant! Absolutely no secret sparkle code! Please don't release the fur missile!

Final Project: Your Personal Introduction Page

It's time to bring together everything you've learned about HTML in this chapter! You're going to create a personal introduction webpage that showcases who you are, using all the HTML elements we've covered.

Project Requirements

  • HTML document structure (<!DOCTYPE html>, <html>, <head>, <body>)
  • Page title (using <h1> and other heading tags)
  • Bio/about me section (using <p> tags)
  • At least one image (using <img> tag)
  • Links to favorite websites (using <a> tags)
  • Lists of interests/hobbies (using <ul> or <ol> tags)
  • Organized layout using <div> tags
  • Basic styling with the style attribute

HTML Structure

Headings

Paragraphs

Images

Links

Lists

Divs

Styling

Step-by-Step Guide

Step 1: Set Up Your HTML Document

Start with the basic HTML document structure we learned in Episode 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Introduction</title>
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Tip from AllyMcTweak: "Always start with a proper HTML structure. Think of it as the foundation of your webpage!"

Step 2: Add Headings and Your Bio

Add a main heading for your page and some paragraphs about yourself:

<body>
    <h1>Welcome to My Page!</h1>
    <h2>About Me</h2>
    <p>Hello! My name is [Your Name]. I'm learning HTML and web development with McTweak.ai.</p>
    <p>I'm interested in [your interests] and I enjoy [your hobbies].</p>
</body>

Tip from GrumpyMcTweak: "REMEMBER to use ONLY ONE h1 tag per page! It's the MAIN HEADING! Use h2, h3, etc. for SUBSECTIONS!"

Step 3: Add Your Image

Add an image to your page (it could be a photo of you, something you like, or any appropriate image):

<h2>About Me</h2>
<img src="your-image-url.jpg" alt="Description of your image" width="300">
<p>Hello! My name is [Your Name]...</p>

Tip from TrashyMcTweak: "Make sure your image is SPECTACULAR! And ALWAYS include the alt attribute—it's for ACCESSIBILITY and it's SUPER IMPORTANT!"

For this project, you can use any appropriate image. You can use a photo of yourself, a cartoon avatar, or something that represents you or your interests. If you don't have an image ready, you can use placeholder images from sites like placeholder.com.

Step 4: Add Links to Your Favorite Websites

Add links to websites you enjoy or find interesting:

<h2>My Favorite Websites</h2>
<p>
    Check out some of my favorite websites:
    <a href="https://www.example.com">Example Website</a>,
    <a href="https://www.anotherexample.com">Another Cool Site</a>, and
    <a href="https://www.mctweak.ai">McTweak.ai</a>
</p>

Tip from GarbageMcTweak: "Remember to include the full URL with http:// or https:// in your href attribute. And for external links, consider adding target='_blank' to open them in a new tab."

Step 5: Add Lists of Your Interests

Create lists to show your hobbies, favorite movies, foods, or anything else you'd like to share:

<h2>My Hobbies</h2>
<ul>
    <li>Reading</li>
    <li>Playing video games</li>
    <li>Learning to code</li>
</ul>

<h2>My Top 3 Favorite Movies</h2>
<ol>
    <li>Movie Title 1</li>
    <li>Movie Title 2</li>
    <li>Movie Title 3</li>
</ol>

Tip from CodyMcTweak: "Remember that ul creates bullet points (unordered list) and ol creates numbered lists (ordered list). Use whichever makes more sense for your content!"

Step 6: Organize Your Content with Divs

Group related content into divs to create a better structure:

<body>
    <div>
        <h1>Welcome to My Page!</h1>
    </div>
    
    <div>
        <h2>About Me</h2>
        <img src="your-image-url.jpg" alt="Description of your image" width="300">
        <p>Hello! My name is [Your Name]...</p>
    </div>
    
    <div>
        <h2>My Hobbies</h2>
        <ul>
            <li>Reading</li>
            <li>Playing video games</li>
            <li>Learning to code</li>
        </ul>
    </div>
    
    <div>
        <h2>My Favorite Websites</h2>
        <p>
            Check out some of my favorite websites:
            <a href="https://www.example.com">Example Website</a>,
            <a href="https://www.anotherexample.com">Another Cool Site</a>
        </p>
    </div>
</body>

Tip from FattyMcTweak: "Think of divs like containers that group related content together. It's like organizing all the premium offerings into neat, manageable packages!"

Step 7: Add Some Basic Styling

Add some color and style to make your page more attractive:

<body style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px;">
    <div style="text-align: center; background-color: #f0f0f0; padding: 20px; border-radius: 10px;">
        <h1 style="color: blue;">Welcome to My Page!</h1>
    </div>
    
    <div style="margin-top: 20px;">
        <h2 style="color: purple;">About Me</h2>
        <img src="your-image-url.jpg" alt="Description of your image" width="300" style="border-radius: 10px; border: 3px solid #ddd;">
        <p>Hello! My name is [Your Name]...</p>
    </div>

Tip from AllyMcTweak: "Add just enough styling to make your page look good, but don't overdo it! Remember, we'll learn much more about CSS in future chapters."

Complete Example

Here's a complete example of a personal introduction page that combines all the elements we've learned:

Code
Preview 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex's Personal Page</title>
</head>
<body style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f9f9f9;">
    <!-- Header Section -->
    <div style="text-align: center; background-color: #e0f7fa; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
        <h1 style="color: #0277bd;">Welcome to Alex's Page!</h1>
    </div>
    
    <!-- About Me Section -->
    <div style="background-color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
        <h2 style="color: #0277bd; border-bottom: 2px solid #e0f7fa; padding-bottom: 5px;">About Me</h2>
        
        <div style="display: flex; flex-direction: column; align-items: center;">
            <img src="https://placeholder.com/300x200" alt="Photo of Alex" width="200" 
                style="border-radius: 10px; border: 3px solid #e0f7fa; margin-bottom: 15px;">
            
            <p>Hello! My name is Alex and I'm a student learning web development with McTweak.ai.</p>
            
            <p>I'm interested in technology, design, and creating cool things with code. When I'm not coding, I enjoy reading sci-fi novels, playing basketball, and experimenting with new recipes in the kitchen.</p>
        </div>
    </div>
    
    <!-- Hobbies Section -->
    <div style="background-color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
        <h2 style="color: #0277bd; border-bottom: 2px solid #e0f7fa; padding-bottom: 5px;">My Hobbies</h2>
        
        <ul style="list-style-type: circle; padding-left: 25px;">
            <li>Coding and web development</li>
            <li>Reading sci-fi novels</li>
            <li>Playing basketball</li>
            <li>Cooking and baking</li>
        </ul>
    </div>
    
    <!-- Favorite Movies Section -->
    <div style="background-color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
        <h2 style="color: #0277bd; border-bottom: 2px solid #e0f7fa; padding-bottom: 5px;">My Top 3 Favorite Movies</h2>
        
        <ol style="padding-left: 25px;">
            <li>The Matrix</li>
            <li>Inception</li>
            <li>Interstellar</li>
        </ol>
    </div>
    
    <!-- Favorite Websites Section -->
    <div style="background-color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
        <h2 style="color: #0277bd; border-bottom: 2px solid #e0f7fa; padding-bottom: 5px;">My Favorite Websites</h2>
        
        <p>
            Check out some of my favorite websites:
        </p>
        
        <ul style="list-style-type: none; padding-left: 5px;">
            <li style="margin-bottom: 10px;">
                <a href="https://www.mctweak.ai" style="color: #0277bd; text-decoration: none;">McTweak.ai</a> - Where I'm learning to code
            </li>
            <li style="margin-bottom: 10px;">
                <a href="https://www.example.com" style="color: #0277bd; text-decoration: none;">Example.com</a> - A helpful resource
            </li>
            <li style="margin-bottom: 10px;">
                <a href="https://www.anotherexample.com" style="color: #0277bd; text-decoration: none;">Another Cool Site</a> - Fun to explore
            </li>
        </ul>
    </div>
    
    <!-- Footer Section -->
    <div style="text-align: center; padding: 20px; color: #666; font-size: 0.9em;">
        <p>Thanks for visiting my page! This is my first HTML project with McTweak.ai.</p>
        <p>© 2023 Alex</p>
    </div>
</body>
</html>

Welcome to Alex's Page!

About Me

Image Placeholder

Hello! My name is Alex and I'm a student learning web development with McTweak.ai.

I'm interested in technology, design, and creating cool things with code. When I'm not coding, I enjoy reading sci-fi novels, playing basketball, and experimenting with new recipes in the kitchen.

My Hobbies

  • Coding and web development
  • Reading sci-fi novels
  • Playing basketball
  • Cooking and baking

My Top 3 Favorite Movies

  1. The Matrix
  2. Inception
  3. Interstellar

My Favorite Websites

Check out some of my favorite websites:

Thanks for visiting my page! This is my first HTML project with McTweak.ai.

© 2023 Alex

Project Checklist

Use this checklist to make sure you've included all the required elements in your personal introduction page:

HTML document structure (DOCTYPE, html, head, body)
Title for your page (h1)
At least one image with alt text
Paragraphs about yourself
Links to other websites
An unordered list (ul)
An ordered list (ol)
Content organized in divs
Basic styling with the style attribute
Comments in your HTML to explain different sections

Congratulations on completing Chapter 1! You now have the fundamental HTML skills to create your own webpages.

Complete Chapter 1

Tips from the McTweak Team

GrumpyMcTweak

GrumpyMcTweak says:

"ALWAYS validate your HTML to make sure it's PROPERLY STRUCTURED! Go to validator.w3.org to check your code for errors!"

AllyMcTweak

AllyMcTweak says:

"Make sure your page is readable and well-organized. Use consistent styling and spacing to help visitors navigate your content."

GarbageMcTweak

GarbageMcTweak says:

"Remember to test your page by opening it in a browser. Make sure all your links work and images display properly."

CodyMcTweak

CodyMcTweak says:

"Double-check that all your tags are properly closed. Even I forget sometimes, and I'm supposed to be a computer!"

What's Next?

Congratulations on completing Chapter 1! In Chapter 2, we'll dive deeper into HTML and learn more advanced techniques to create even better webpages.

Coming Up in Chapter 2:

  • More text formatting options
  • Working with multiple images
  • Creating nested lists
  • Building multi-page websites
  • Creating tables for structured data
  • Adding forms for user input
  • Embedding videos
Continue to Chapter 2