Add Styling to Your Personal Profile Page

Duration: 60 minutes

Module 1: CSS Basics

Learning Objectives

Master CSS styling techniques
Control visual presentation
Create attractive designs
Understand CSS best practices

Assignment Overview

In this assignment, you will enhance your personal profile page by adding CSS styling. You'll transform your plain HTML structure into a visually appealing and professional-looking profile that effectively showcases your information. This task will help you apply the CSS concepts we've covered in our sessions and give you practice with layout, typography, color schemes, and responsive design.

George Polya's 4-Step Problem Solving Method

Step 1: Understand the Problem

We need to style our existing HTML profile page to:

Create a visually appealing layout
Establish a consistent color scheme
Improve typography and readability
Add visual hierarchy to highlight important information
Ensure the design is responsive (looks good on different screen sizes)
Maintain accessibility standards
Add subtle animations or transitions for interactivity (optional)

The goal is to create a professional-looking profile that reflects your personal style while following good design principles.

Step 2: Devise a Plan

Create an external CSS file to keep our styles separate from HTML
Define a color palette and typography strategy
Set up basic CSS reset and global styles
Style the page layout using appropriate CSS techniques (Flexbox/Grid)
Style individual sections (header, about, skills, projects, etc.)
Add responsive design elements with media queries
Add finishing touches (hover effects, transitions, subtle animations)
Test on different screen sizes and browsers
Validate CSS and check for accessibility issues

Step 3: Execute the Plan

Let's implement our solution step by step:

Solution: Adding CSS to Your Profile Page

Files:

index.html - Your existing HTML profile page (with minor adjustments if needed)
styles.css - New external CSS file for styling
Images/ - Folder for storing profile pictures and other images

Location: Your "personal_profile" folder

Step 1: Update Your HTML File

First, we need to link our CSS file to the HTML document. Add this line in the <head> section of your index.html file:

<!-- Add this line in the head section -->
<link rel="stylesheet" href="styles.css">

You may also want to add a few classes to your HTML elements to make them easier to target with CSS. For example:

<!-- Example of adding classes to elements -->
<header class="profile-header">
    <h1 class="name">John Doe</h1>
    <h2 class="title">Web Developer</h2>
    
    <figure class="profile-image">
        <img src="images/profile.jpg" alt="John Doe's profile picture" width="200" height="200">
        <figcaption>John Doe - Web Developer</figcaption>
    </figure>
</header>

Step 2: Create Your CSS File

Now, let's create our styles.css file with the following sections:

CSS Reset and Global Styles

/* CSS Reset and Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #004080;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #222;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
    margin-top: 2.5rem;
}

h3 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

ul, ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

section {
    margin-bottom: 3rem;
}

Header Styling

/* Header Styling */
.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 0;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.profile-header .name {
    margin-bottom: 0.5rem;
    color: #0066cc;
}

.profile-header .title {
    font-weight: 400;
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.profile-image {
    margin-bottom: 1rem;
}

.profile-image img {
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.profile-image figcaption {
    margin-top: 0.5rem;
    font-style: italic;
    color: #666;
}

Main Content Styling

/* Main Content Styling */
main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    main {
        grid-template-columns: 2fr 1fr;
    }
}

#about {
    grid-column: 1 / -1;
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

blockquote {
    font-style: italic;
    border-left: 3px solid #0066cc;
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: #555;
}

blockquote cite {
    display: block;
    text-align: right;
    margin-top: 0.5rem;
    font-weight: bold;
}

/* Skills Section */
#skills {
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#skills ul {
    list-style-type: none;
    padding-left: 0;
}

#skills li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

#skills li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #0066cc;
    font-weight: bold;
}

/* Projects Section */
#projects {
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.project {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.project:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.project h3 {
    color: #0066cc;
}

.project a {
    display: inline-block;
    margin-top: 0.5rem;
    background-color: #0066cc;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.project a:hover {
    background-color: #004080;
    text-decoration: none;
}

/* Education Section */
#education {
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#education dl {
    margin-bottom: 1.5rem;
}

#education dt {
    font-weight: bold;
    color: #0066cc;
    margin-bottom: 0.25rem;
}

#education dd {
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 2px solid #eee;
}

#education ol {
    counter-reset: education-counter;
    list-style-type: none;
    padding-left: 0;
}

#education li {
    counter-increment: education-counter;
    margin-bottom: 0.5rem;
    padding-left: 2rem;
    position: relative;
}

#education li::before {
    content: counter(education-counter) ".";
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #0066cc;
}

Contact Section and Form Styling

/* Contact Section */
#contact {
    grid-column: 1 / -1;
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

address {
    font-style: normal;
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* Form Styling */
form {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    form {
        grid-template-columns: 1fr 1fr;
    }
    
    form div:last-of-type,
    button[type="submit"] {
        grid-column: span 2;
    }
}

form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #555;
}

form input,
form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

form input:focus,
form textarea:focus {
    border-color: #0066cc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}

button[type="submit"] {
    background-color: #0066cc;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #004080;
}

Footer Styling

/* Footer Styling */
footer {
    margin-top: 4rem;
    text-align: center;
    padding: 2rem;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

footer p {
    color: #666;
    margin-bottom: 1rem;
}

footer nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

footer nav li {
    margin: 0 1rem 0.5rem;
}

footer nav a {
    font-weight: bold;
}

Responsive Design

/* Responsive Design */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .profile-header {
        padding: 1.5rem 0;
    }
    
    .profile-image img {
        width: 150px;
        height: 150px;
    }
    
    section {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .profile-header .title {
        font-size: 1rem;
    }
    
    .profile-image img {
        width: 120px;
        height: 120px;
    }
    
    section {
        padding: 1rem;
    }
    
    footer nav ul {
        flex-direction: column;
    }
    
    footer nav li {
        margin: 0.25rem 0;
    }
}

Optional Animations and Effects

/* Optional Animations and Effects */
/* Fade-in animation for sections */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    animation: fadeIn 0.8s ease forwards;
}

/* Stagger animations for sections */
main section:nth-child(1) { animation-delay: 0.1s; }
main section:nth-child(2) { animation-delay: 0.2s; }
main section:nth-child(3) { animation-delay: 0.3s; }
main section:nth-child(4) { animation-delay: 0.4s; }
main section:nth-child(5) { animation-delay: 0.5s; }

/* Skill bar animation (optional) */
.skill-bar {
    height: 10px;
    background-color: #eee;
    border-radius: 5px;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.skill-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #0066cc;
    border-radius: 5px;
    animation: skillFill 1.5s ease forwards;
}

.skill-html::after { width: 90%; }
.skill-css::after { width: 85%; }
.skill-js::after { width: 60%; }
.skill-git::after { width: 70%; }
.skill-responsive::after { width: 80%; }

@keyframes skillFill {
    from { width: 0; }
}

Step 4: Look Back and Review

Our CSS styling successfully transforms the plain HTML profile page into a professional and visually appealing design:

We've created a clean, modern layout with appropriate spacing and hierarchy
Used a consistent color scheme centered around a primary blue (#0066cc)
Improved typography with appropriate font choices and sizing
Added visual interest with subtle shadows, borders, and hover effects
Implemented responsive design with media queries
Added optional animations for enhanced user experience
Maintained accessibility with adequate contrast and focus states

The styling is modular and organized, making it easy to update or modify specific sections as needed.

Understanding CSS Styling Concepts

CSS Structure and Organization

graph LR
    A[CSS Organization] --> B[Reset & Global Styles]
    A --> C[Layout Styles]
    A --> D[Component Styles]
    A --> E[Responsive Design]
    A --> F[Effects & Animations]
    
    B --> B1[Box Sizing]
    B --> B2[Typography]
    B --> B3[Color Scheme]
    
    C --> C1[Grid/Flexbox]
    C --> C2[Spacing]
    C --> C3[Containers]
    
    D --> D1[Header]
    D --> D2[Sections]
    D --> D3[Forms]
    D --> D4[Footer]
    
    E --> E1[Media Queries]
    E --> E2[Mobile Adaptations]
    
    F --> F1[Transitions]
    F --> F2[Animations]
    F --> F3[Hover Effects]
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:1px
    style C fill:#bbf,stroke:#333,stroke-width:1px
    style D fill:#bbf,stroke:#333,stroke-width:1px
    style E fill:#bbf,stroke:#333,stroke-width:1px
    style F fill:#bbf,stroke:#333,stroke-width:1px

A well-organized CSS file follows a logical structure, making it easier to maintain and update. Our approach organizes styles from general to specific:

Reset & Global Styles: Establish the foundation for consistent rendering across browsers
Layout Styles: Define the overall page structure and main containers
Component Styles: Style specific sections and elements within the layout
Responsive Design: Adapt the layout and components for different screen sizes
Effects & Animations: Add polish with transitions, animations, and interactive effects

Key CSS Concepts Used

CSS Reset and Box Model

We start with a simple CSS reset to eliminate browser inconsistencies:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

The box-sizing: border-box; property ensures that padding and borders are included in element width calculations, making layout more predictable.

Layout Techniques: Flexbox and Grid

Modern CSS layout techniques like Flexbox and Grid make it easier to create complex layouts:

Flexbox for Header

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* other styles */
}

Flexbox is ideal for one-dimensional layouts (rows or columns). Here we're using it to center and stack header elements vertically.

Grid for Main Content

main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    main {
        grid-template-columns: 2fr 1fr;
    }
}

CSS Grid works perfectly for two-dimensional layouts. Here, we're creating a single column on mobile and a two-column layout on larger screens, with the left column taking up twice the space of the right column.

Selectors and Specificity

Our CSS uses various selectors to target elements:

Element selectors: body, h1, p
Class selectors: .profile-header, .project
ID selectors: #about, #skills
Pseudo-classes: a:hover, input:focus
Pseudo-elements: li::before
Combinators: footer nav li (descendant)

Color Scheme and Typography

A consistent color scheme and typography system helps create a cohesive design:

Primary color: #0066cc (blue) for links, buttons, and accents
Secondary color: #004080 (darker blue) for hover states
Text colors: #333 (dark gray) for body text, #222 (nearly black) for headings
Background colors: #f5f5f5 (light gray) for body, white for sections
Font family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif (system fonts for better performance)
Font sizes: Responsive sizing with rems (relative to root font size)

Responsive Design with Media Queries

Media queries allow us to adapt our layout for different screen sizes:

@media (min-width: 768px) {
    main {
        grid-template-columns: 2fr 1fr;
    }
    
    form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
    }
    
    /* other responsive adjustments */
}

We've used both min-width and max-width queries for different scenarios:

min-width: Apply styles when viewport is at least the specified width (mobile-first approach)
max-width: Apply styles when viewport is at most the specified width (desktop-first approach)

CSS Animations and Transitions

Subtle animations and transitions add polish and improve user experience:

Transitions: Smooth changes between states (e.g., hover effects)

a {
    transition: color 0.3s ease;
}

.profile-image img {
    transition: transform 0.3s ease;
}

Keyframe Animations: More complex animations defined with keyframes

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    animation: fadeIn 0.8s ease forwards;
}

Design Principles Applied

Visual Hierarchy

Visual hierarchy guides the viewer's eye to the most important elements first:

Size contrast: Larger headings, smaller paragraph text
Color contrast: Blue for important elements, gray for supporting text
Positioning: Profile image and name at the top
White space: Adequate spacing to separate sections

Consistency

Consistency creates a cohesive, professional look:

Consistent color scheme throughout
Repeated design elements: Card-like sections with shadow and rounded corners
Uniform spacing between elements
Consistent typography with clear heading hierarchy

Accessibility

Accessible design ensures your profile is usable by everyone:

Adequate color contrast between text and background
Focus states for interactive elements
Responsive design that works on all devices
Semantic HTML enhanced with appropriate styling

CSS Tips and Best Practices

1. Keep Your CSS Organized

Organize your CSS in a logical manner to make it easier to maintain:

Group related styles together
Use consistent naming conventions for classes
Add comments to explain complex or non-obvious styles
Consider using a methodology like BEM (Block, Element, Modifier) for larger projects

2. Use Relative Units

Prefer relative units over absolute units for better responsiveness:

rem: Relative to the root font size, good for consistent scaling
em: Relative to the parent element's font size
%: Percentage of the parent element's size
vh/vw: Percentage of viewport height/width

These units allow your design to scale appropriately based on screen size and user preferences.

3. Mobile-First Approach

Start with styles for mobile devices and then enhance for larger screens:

/* Base styles for mobile */
.container {
    padding: 1rem;
}

/* Enhanced styles for larger screens */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }
}

This approach generally results in cleaner, more efficient CSS.

4. Optimize Performance

Keep your CSS efficient for better performance:

Avoid overly specific selectors (e.g., .header .nav .menu .item)
Combine similar styles to reduce redundancy
Minimize the use of expensive properties (e.g., box-shadow, text-shadow, gradients)
Consider using system fonts for better performance

5. Test Across Browsers and Devices

Ensure your styles work consistently across different environments:

Test in multiple browsers (Chrome, Firefox, Safari, Edge)
Check on different devices (desktop, tablet, mobile)
Use browser developer tools to simulate different screen sizes
Consider using vendor prefixes or a tool like Autoprefixer for broader compatibility

Common Issues and How to Fix Them

Layout Breaking at Certain Screen Sizes

Problem: Your layout looks good on desktop and mobile but breaks at certain in-between sizes.

Solution: Add additional media queries to handle these edge cases:

/* Specific adjustments for medium tablets */
@media (min-width: 481px) and (max-width: 767px) {
    .container {
        padding: 1.5rem;
    }
    
    .profile-header {
        flex-direction: row;
        text-align: left;
        padding: 1.5rem;
    }
    
    .profile-image {
        margin-right: 2rem;
        margin-bottom: 0;
    }
}

Text Readability Issues

Problem: Text is hard to read due to poor contrast or font sizing.

Solution: Improve typography and contrast:

Ensure sufficient contrast between text and background (use tools like WebAIM's Contrast Checker)
Increase font size for better readability (minimum 16px for body text)
Increase line height (1.5-1.6 is generally good for readability)
Limit line length to around 60-80 characters

body {
    font-size: 16px; /* Minimum size for readability */
    line-height: 1.6;
    color: #333; /* Dark gray for sufficient contrast */
}

@media (min-width: 768px) {
    .container {
        max-width: 720px; /* Limits line length */
    }
}

Inconsistent Spacing

Problem: Elements have inconsistent margins and padding, creating an unbalanced look.

Solution: Create a spacing system:

/* Define a spacing scale */
:root {
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 2rem;     /* 32px */
    --space-xl: 4rem;     /* 64px */
}

/* Use consistent spacing throughout */
section {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
}

h2 {
    margin-bottom: var(--space-md);
}

p, ul, ol {
    margin-bottom: var(--space-md);
}

Images Not Scaling Properly

Problem: Images are too large on small screens or get distorted.

Solution: Make images responsive:

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

.profile-image img {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Maintains aspect ratio while covering area */
    border-radius: 50%;
}

@media (max-width: 768px) {
    .profile-image img {
        width: 150px;
        height: 150px;
    }
}

Form Elements Styling Inconsistently

Problem: Form elements look different across browsers.

Solution: Reset and consistently style form elements:

/* Reset browser styles */
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* Apply consistent styling */
input, textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    background-color: #0066cc;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
}

CSS Frameworks and Alternatives

Custom CSS (Our Approach)

Pros:

Complete control over design and functionality
No unnecessary code
Better understanding of CSS principles
Potentially faster load times with less CSS

Cons:

More time-consuming to develop
Need to handle cross-browser compatibility
May require more testing

CSS Frameworks (e.g., Bootstrap)

Pros:

Faster development time
Built-in components and utilities
Consistent styling across projects
Responsive by default
Well-tested across browsers

Cons:

Less design flexibility
Risk of looking like many other websites
Additional file size
Learning curve for framework-specific classes

When to consider: When you need to develop quickly, for prototypes, or when consistency with other projects is important.

CSS Preprocessors (SASS/SCSS)

Pros:

Variables, nesting, mixins, and functions
Better organization with partials
More maintainable CSS for large projects
Still custom CSS, just with better development tools

Cons:

Requires compilation step
Learning curve for preprocessor syntax
Can create overly complex selectors if not careful

When to consider: For larger projects, when working on a team, or when you want better organization for complex stylesheets.

CSS-in-JS Solutions

Pros:

Component-scoped styles
Dynamic styling based on props/state
No global CSS conflicts
Integration with JavaScript frameworks

Cons:

Requires JavaScript framework
Can increase bundle size
May have performance implications

When to consider: When working with component-based frameworks like React, Vue, or Angular.

Further Learning Resources

MDN Web Docs: CSS - Comprehensive reference for CSS properties and concepts
CSS-Tricks - Articles, tutorials, and guides on CSS techniques
Learn CSS from web.dev - Google's guide to modern CSS
Flexbox Froggy - A game for learning Flexbox
Grid Garden - A game for learning CSS Grid
Coolors - Color scheme generator
Type Scale - Visual type scale calculator
Contrast Ratio - Check color contrast for accessibility

Homework Assignment

Primary Task: Style Your Personal Profile Page

Create a styles.css file and link it to your HTML profile page
Implement styling for your profile page using the concepts covered in this lesson
Include the following CSS features:
- A consistent color scheme (at least 3-4 colors)
- Responsive layout using media queries
- Flexbox and/or Grid for layout
- Styled form elements
- At least one transition or animation effect
- Appropriate typography choices
Test your page at multiple screen sizes
Validate your CSS using the W3C CSS Validator

Submission Guidelines

Submit your index.html and styles.css files
Include any image files used in your design
Write a brief explanation of your design choices (colors, layout, typography)
Mention any challenges you encountered and how you resolved them
Be prepared to show your styled profile page in the next session

Grading Criteria

Visual Design (25%): Attractive color scheme, typography, and overall design aesthetic
Layout Structure (25%): Effective use of CSS layout techniques (Flexbox/Grid) and proper spacing
Responsiveness (20%): Design adapts well to different screen sizes
Code Quality (15%): Well-organized, efficient CSS with appropriate comments
Technical Implementation (15%): Correct use of CSS properties and selectors

Bonus Challenges (Optional)

Dark Mode: Implement a theme toggle between light and dark modes (requires JavaScript)
Print Stylesheet: Add print-specific styles that optimize your page for printing
Advanced Animations: Create more complex animations to enhance user experience
Accessibility Enhancements: Ensure your design meets WCAG 2.1 AA standards
Cross-Browser Testing: Test and optimize for multiple browsers (Chrome, Firefox, Safari, Edge)

Course Progress

Learning Objectives

Assignment Overview

George Polya's 4-Step Problem Solving Method

Step 1: Understand the Problem

Step 2: Devise a Plan

Step 3: Execute the Plan

Solution: Adding CSS to Your Profile Page

Step 1: Update Your HTML File

Step 2: Create Your CSS File

CSS Reset and Global Styles

Header Styling

Main Content Styling

Contact Section and Form Styling

Footer Styling

Responsive Design

Optional Animations and Effects

Step 4: Look Back and Review

Understanding CSS Styling Concepts

CSS Structure and Organization

Key CSS Concepts Used

CSS Reset and Box Model

Layout Techniques: Flexbox and Grid

Flexbox for Header

Grid for Main Content

Selectors and Specificity

Color Scheme and Typography

Responsive Design with Media Queries

CSS Animations and Transitions

Design Principles Applied

Visual Hierarchy

Consistency

Accessibility

CSS Tips and Best Practices

1. Keep Your CSS Organized

2. Use Relative Units

3. Mobile-First Approach

4. Optimize Performance

5. Test Across Browsers and Devices

Common Issues and How to Fix Them

Layout Breaking at Certain Screen Sizes

Text Readability Issues

Inconsistent Spacing

Images Not Scaling Properly

Form Elements Styling Inconsistently

CSS Frameworks and Alternatives

Custom CSS (Our Approach)

CSS Frameworks (e.g., Bootstrap)

CSS Preprocessors (SASS/SCSS)

CSS-in-JS Solutions

Further Learning Resources

Homework Assignment

Primary Task: Style Your Personal Profile Page

Submission Guidelines

Grading Criteria

Bonus Challenges (Optional)