McTweak.ai

Chapter 3, Episode 10: Final Project – Styled About Me Page

Chapter 3 Final Project: Creating a Beautifully Styled About Me Page

Welcome to the final project of Chapter 3! It's time to bring together everything you've learned about CSS to create a beautifully styled "About Me" page. In this project, you'll apply your knowledge of colors, fonts, layout, and more to transform a plain HTML page into a visually appealing personal website.

Let's join the McTweak team as they guide us through this exciting final challenge!

The CSS Fashion Show Begins...

TrashyMcTweak

TrashyMcTweak

THE GRAND CSS FINALE IS UPON US! The ULTIMATE STYLE SHOWDOWN! The FASHION WEEK of WEB DEVELOPMENT! It's time to turn those sad, naked HTML pages into DAZZLING DIGITAL COUTURE!

CodyMcTweak

CodyMcTweak

Wait, we're designing clothes now? I thought we were just adding some color to websites...

AllyMcTweak

AllyMcTweak

It's a metaphor, Cody. We're creating the visual presentation for our About Me pages using all the CSS techniques we've learned throughout this chapter.

FattyMcTweak

FattyMcTweak

Think of it as giving your HTML a makeover. (strikes pose) Darling, basic HTML is SO last season. CSS is what separates the premium looks from the freemium disasters.

GrumpyMcTweak

GrumpyMcTweak

This isn't about FASHION! It's about FUNCTION and CONSISTENCY! (points accusingly at a neon green sample) This color burns my RETINAS! It violates WCAG contrast guidelines! It should be BANNED by the GENEVA CONVENTION!

AshleyMcTweak

AshleyMcTweak

The Geneva Convention doesn't cover CSS color choices, Grumpy.

GrumpyMcTweak

GrumpyMcTweak

YET.

TrashyMcTweak

TrashyMcTweak

But this is their chance to EXPRESS THEMSELVES! To let their INNER DESIGNER RUN WILD! To create a COLOR EXPLOSION that will SEAR ITSELF into the MEMORY of every visitor!

AllyMcTweak

AllyMcTweak

Actually, the project requirements specify a consistent color scheme, custom fonts, organized sections, and responsive images. Not a "color explosion."

CodyMcTweak

CodyMcTweak

That sounds like a lot to remember. Couldn't we just use the default browser styles? They're... functional?

FattyMcTweak

FattyMcTweak

DEFAULT BROWSER STYLES? (clutches chest) I need a moment. The free tier mentality is physically painful to hear.

GarbageMcTweak

GarbageMcTweak

Final project time? Good. Let's see how they apply what they've learned about CSS.

TrashyMcTweak

TrashyMcTweak

Garbage! Tell them we need to go ALL OUT! ANIMATIONS! TRANSITIONS! 3D TRANSFORMS! A WEBSITE THAT LITERALLY DANCES WHEN YOU SCROLL!

GarbageMcTweak

GarbageMcTweak

Or we could focus on clean design principles and sensible styling choices.

SnowzieMcTweak

SnowzieMcTweak

(barks once, tail wagging)

GarbageMcTweak

GarbageMcTweak

Snowzie suggests we provide a template with commented sections to help them organize their CSS.

FattyMcTweak

FattyMcTweak

The dog understands CSS organization? That's... actually impressive.

CodyMcTweak

CodyMcTweak

I think this project is going to be fun! I can't wait to see everyone's styled pages.

Project Overview

In this final project, you'll create a styled "About Me" page that brings together all the CSS concepts we've covered in Chapter 3. Your page should showcase your personality while demonstrating your CSS skills.

Requirements:

  • Consistent color scheme - Choose a set of colors that work well together and use them throughout your page
  • Custom fonts - Use web fonts to enhance your typography
  • Organized sections - Structure your content using CSS to create distinct sections
  • Responsive images - Make sure your images look good on any screen size

Let's break down this project into manageable steps:

The Power of CSS: Before & After

Before we dive into building our project, let's look at what a difference CSS can make to a simple HTML page:

BEFORE (HTML only)

About Me

Profile picture

My Bio

Hello! I'm a web developer learning HTML and CSS.

My Hobbies

  • Coding
  • Gaming
  • Reading

Contact

My GitHub
AFTER (With CSS)

About Me

Profile picture

My Bio

Hello! I'm a web developer learning HTML and CSS.

My Hobbies

  • 1 Coding
  • 2 Gaming
  • 3 Reading

Contact

My GitHub

As you can see, CSS transforms a basic HTML document into a visually appealing webpage. Now let's start building our own styled page!

Step 1: Choose a Color Scheme

Creating a Consistent Color Scheme

AllyMcTweak

A good color scheme uses 3-5 colors that work well together. Typically, you'll want to include:

  • A primary color for main elements
  • A secondary color for accents
  • A background color
  • A text color

Remember what we learned about color theory - complementary colors create contrast, while analogous colors create harmony.

Color Scheme Builder

Pick your colors below to create a cohesive scheme:

Primary Color:
Secondary Color:
Background Color:
Text Color:
Preview:

Heading Example

This is how your text will look with the selected colors.

CSS Code:
/* Color scheme variables */
:root {
  --primary-color: #3a7bd5;
  --secondary-color: #00b894;
  --background-color: #f5f7fa;
  --text-color: #2d3436;
}

/* Using the colors */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

h1, h2, h3 {
  color: var(--primary-color);
}

.button {
  background-color: var(--secondary-color);
  color: white;
}
GrumpyMcTweak

REMEMBER to CHECK CONTRAST between your text and background colors! If users can't READ your content, your beautiful design is USELESS! Use the WebAIM Contrast Checker to ensure your colors are ACCESSIBLE!

Step 2: Select Custom Fonts

Using Web Fonts

AllyMcTweak

Typography plays a crucial role in your website's appearance. Typically, you'll want to choose:

  • A heading font that stands out
  • A body text font that's easy to read

Google Fonts is a popular free resource for web fonts. We'll use their CDN linking method to add fonts to our page.

Font Selector

Heading Font:

Orbitron

The quick brown fox jumps over the lazy dog.

Bangers

The quick brown fox jumps over the lazy dog.

Open Sans Bold

The quick brown fox jumps over the lazy dog.

Body Font:

Open Sans

The quick brown fox jumps over the lazy dog. This font is excellent for readability in longer paragraphs of text.

Roboto

The quick brown fox jumps over the lazy dog. This font is excellent for readability in longer paragraphs of text.

Preview:

This is a Heading

This is paragraph text in your selected body font. It should be easy to read even in smaller sizes and in longer blocks of text.

CSS Code:
/* First, link the fonts in your HTML head section */
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

/* Then use them in your CSS */
body {
  font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
}
TrashyMcTweak

Don't go FONT CRAZY! Too many different fonts make your page look like a DIGITAL RANSOM NOTE! Stick to 2-3 fonts MAX for a COHESIVE design that doesn't SCREAM "I just discovered Google Fonts and went on a DOWNLOAD BINGE!"

Step 3: Create Organized Sections

Structuring Your Page with CSS

GarbageMcTweak

Remember when we learned to organize content with div elements? Now we'll style those divisions to create visually distinct sections on our page.

Each section should have consistent styling that fits with your overall design theme.

Section Styling Examples

Header
About
Interests
Contact
/* Header Section Styling */
.header-section {
  text-align: center;
  padding: 50px 20px;
  background-color: var(--primary-color);
  color: white;
  margin-bottom: 30px;
}

.header-section h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.header-section p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}

About Me

Web developer and designer sharing my journey through code

/* About Section Styling */
.about-section {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.about-section h2 {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.profile-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

About Me

Profile

Hello! I'm a web developer passionate about creating beautiful and functional websites. I love learning new technologies and sharing my knowledge with others.

/* Interests Section Styling */
.interests-section {
  background-color: var(--background-color);
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-bottom: 30px;
}

.interests-section h2 {
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 25px;
}

.interest-card {
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

My Interests

Web Development

I love building websites and learning new frameworks and technologies.

Photography

Capturing beautiful moments and landscapes through my camera lens.

/* Contact Section Styling */
.contact-section {
  text-align: center;
  padding: 40px 20px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 8px;
}

.contact-section h2 {
  margin-bottom: 20px;
}

.contact-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.contact-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--secondary-color);
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s;
}

Contact Me

AllyMcTweak

Consider using consistent visual cues for each section, like similar padding, matching border styles, or complementary background colors. This creates a cohesive design while still allowing each section to be distinct.

Step 4: Create Responsive Images

Making Images Look Great on Any Screen

GarbageMcTweak

Responsive images automatically adjust to fit different screen sizes. This is important for mobile users who may be viewing your site on smaller screens.

Responsive Image Techniques

/* Basic Responsive Image */
img {
  max-width: 100%;
  height: auto;
}

/* Styled Profile Image */
.profile-image {
  max-width: 200px;
  height: auto;
  border-radius: 50%;  /* Creates circular image */
  border: 3px solid var(--primary-color);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}

.profile-image:hover {
  transform: scale(1.05);
}
Responsive Image Demo

Drag the slider to see how the image responds to different container widths:

Responsive demo
Container width: 400px
More Responsive Image Techniques
Basic
Profile Image
Gallery
/* Most Common Pattern */
img {
  max-width: 100%;
  height: auto;
}

/* HTML */
<img src="your-image.jpg" alt="Description">

This ensures your image never exceeds its container while maintaining its aspect ratio. 

/* Circular Profile Image */
.profile-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-color);
}

/* Responsive version */
@media (max-width: 768px) {
  .profile-image {
    width: 150px;
    height: 150px;
  }
}

The object-fit: cover ensures the image fills the space while maintaining its aspect ratio, even when forced into a specific width/height. 

/* Image Gallery */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-item {
  flex: 1 0 300px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

Creates a flexible gallery where images automatically wrap to new rows as needed. Each image maintains its aspect ratio while filling its container.

TrashyMcTweak

Add some PIZZAZZ to your images with hover effects! A subtle scale or shadow change can make your site feel INTERACTIVE and ALIVE! Just don't go OVERBOARD with animations that make your visitors SEASICK!

Putting It All Together

Creating Your Complete Styled About Me Page

GarbageMcTweak

Now it's time to bring everything together to create your styled About Me page. Here's a template to help you get started:

Complete Project Template

HTML
CSS
Preview
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <!-- Link to your CSS file -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header Section -->
    <header class="header-section">
        <h1>Your Name</h1>
        <p>Web Developer | Designer | Photographer</p>
    </header>

    <!-- Main Content -->
    <main class="container">
        <!-- About Section -->
        <section class="about-section">
            <h2>About Me</h2>
            <div class="profile-container">
                <img src="your-photo.jpg" alt="Your Name" class="profile-image">
                <div>
                    <p>Write a brief bio about yourself here. Share your background, interests, and what you're passionate about.</p>
                    <p>You can add multiple paragraphs to tell your story.</p>
                </div>
            </div>
        </section>

        <!-- Skills Section -->
        <section class="skills-section">
            <h2>My Skills</h2>
            <div class="skills-container">
                <div class="skill-card">
                    <h3>HTML</h3>
                    <div class="skill-level" data-level="90"></div>
                </div>
                <div class="skill-card">
                    <h3>CSS</h3>
                    <div class="skill-level" data-level="85"></div>
                </div>
                <div class="skill-card">
                    <h3>JavaScript</h3>
                    <div class="skill-level" data-level="70"></div>
                </div>
            </div>
        </section>

        <!-- Interests Section -->
        <section class="interests-section">
            <h2>My Interests</h2>
            <div class="interest-card">
                <h3>Web Development</h3>
                <p>Description of your interest in web development.</p>
            </div>
            <div class="interest-card">
                <h3>Photography</h3>
                <p>Description of your interest in photography.</p>
            </div>
            <div class="interest-card">
                <h3>Music</h3>
                <p>Description of your interest in music.</p>
            </div>
        </section>
    </main>

    <!-- Footer/Contact Section -->
    <footer class="contact-section">
        <h2>Get In Touch</h2>
        <div class="contact-links">
            <a href="#" class="contact-link">GitHub</a>
            <a href="#" class="contact-link">LinkedIn</a>
            <a href="mailto:your.email@example.com" class="contact-link">Email</a>
        </div>
    </footer>
</body>
</html>
/* styles.css */

/* CSS Variables for Color Scheme */
:root {
  --primary-color: #3a7bd5;
  --secondary-color: #00b894;
  --background-color: #f5f7fa;
  --text-color: #2d3436;
  --section-bg-color: white;
}

/* Base Styles */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
  color: var(--primary-color);
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Section */
.header-section {
  text-align: center;
  padding: 60px 20px;
  background-color: var(--primary-color);
  color: white;
  margin-bottom: 30px;
}

.header-section h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: white;
}

/* About Section */
.about-section {
  background-color: var(--section-bg-color);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.profile-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.profile-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-color);
  transition: transform 0.3s;
}

.profile-image:hover {
  transform: scale(1.05);
}

/* Skills Section */
.skills-section {
  background-color: var(--section-bg-color);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.skill-card {
  margin-bottom: 15px;
}

.skill-level {
  height: 10px;
  background-color: #eee;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.skill-level::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--level);
  background-color: var(--primary-color);
  border-radius: 5px;
}

/* Interests Section */
.interests-section {
  background-color: var(--section-bg-color);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.interest-card {
  border-left: 4px solid var(--secondary-color);
  padding-left: 15px;
  margin-bottom: 20px;
}

/* Contact Section */
.contact-section {
  text-align: center;
  padding: 40px 20px;
  background-color: var(--primary-color);
  color: white;
}

.contact-section h2 {
  color: white;
  margin-bottom: 20px;
}

.contact-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.contact-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--secondary-color);
  color: white;
  border-radius: 5px;
  transition: all 0.3s;
}

.contact-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .profile-container {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-image {
    width: 150px;
    height: 150px;
  }
  
  .header-section h1 {
    font-size: 2rem;
  }
}

This is a simplified preview of the final About Me page:

CodyMcTweak

Remember to personalize this template to make it your own! Change the colors, fonts, and content to reflect your personality and style.

Final Project Checklist

Before submitting your final project, make sure you've included all the required elements:

SnowzieMcTweak

*(barks approvingly)* Woof! Don't forget to test your page on different devices and browsers to make sure it looks good everywhere!

Bonus Challenge

Take Your Page to the Next Level

Want to make your About Me page stand out even more? Try these bonus challenges:

  • Add a subtle animation when the page loads (hint: look up CSS animations)
  • Create a light/dark mode toggle using CSS variables
  • Add a sticky navigation menu that stays at the top when scrolling
  • Use advanced CSS effects like gradients, shadows, or transformations
  • Implement a CSS grid layout for one of your sections
TrashyMcTweak

NOW you can add those AMAZING ANIMATIONS! Just remember what GrumpyMcTweak said - subtlety is key! We want to ENHANCE the user experience, not make them SEASICK with TOO MUCH MOVEMENT!

Congratulations!

You've completed Chapter 3 and learned all about using CSS to style your web pages! You now know how to:

  • Create and apply CSS styles using different methods (inline, internal, and external)
  • Work with colors, fonts, backgrounds, and text styling
  • Use classes and IDs to target specific elements
  • Create responsive designs that work on any device

In the next chapter, we'll dive deeper into CSS layouts using techniques like Flexbox and Grid to create more complex and responsive page structures.

SnowzieMcTweak

Code Committed! Great job completing Chapter 3! *happy tail wags*

Previous Lesson Home Next Chapter