Courses Frontend Basic Lesson 5

Final Touches & Portfolio Polish

Frontend Basic Lesson 5 of 5 18 min

Final Touches & Portfolio Polish

Day 5: Refinement, Best Practices, and Building Confidence

From Functional to Professional

Congratulations! You've built a functional portfolio website. It has structure (HTML), style (CSS), and layout. But there's a difference between code that works and code that's professional, maintainable, and polished.

Today is about refinement. You'll learn how to write reusable CSS that's easy to maintain, add delightful interactions with hover effects, ensure your site works on different screen sizes, and follow best practices that will make you a better developer.

Today's Goal: Transform your portfolio from "it works" to "it's professional." Learn the techniques that separate beginner code from production-ready code. By the end of today, you'll have a portfolio you're genuinely proud to show.

What Makes Code Professional?

Reusability
Don't repeat yourself. Create classes that can be used multiple times
User Experience
Add feedback through hover effects and interactions
Responsiveness
Works beautifully on all screen sizes
Clean Code
Well-organized, commented, easy to understand

Reusability with Classes: Don't Repeat Yourself

One of the most important principles in programming is DRY: Don't Repeat Yourself. If you find yourself writing the same CSS properties multiple times, you should create a reusable class.

Problem: Repetitive CSS

Bad Example (Repetitive):

.about-section {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.skills-section {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.contact-section {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

Problem: Same properties repeated three times!

Solution: Create a Reusable Class

Good Example (DRY):

/* Reusable card class */
.card {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

HTML Usage:

...


...


...

Better: One class definition, reused everywhere!

Benefit: If you want to change the shadow or border-radius later, you only update it in ONE place instead of hunting through your entire CSS file.

Utility Classes: Small, Reusable Helpers

Utility classes are small, single-purpose classes that do one thing well. They're incredibly useful for common styling needs.

Creating Utility Classes:

/* Text alignment utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Spacing utilities */
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.mt-20 { margin-top: 20px; }

/* Color utilities */
.text-primary { color: #3498db; }
.text-secondary { color: #2ecc71; }
.text-muted { color: #7f8c8d; }

/* Display utilities */
.hidden { display: none; }
.inline-block { display: inline-block; }

Visual Examples:

text-center: This text is centered

text-right: This text is right-aligned

text-primary: This text uses primary color

text-muted: This text is muted/subtle

Combining Classes

The real power comes from combining classes. Each class does one job, but together they create complex styling.

HTML Example:


    
Welcome

    
This card combines multiple classes

Visual Result:

Welcome

This card combines multiple classes:
card (white bg, padding, shadow) + text-center + mb-40

Three simple classes create a polished component!

Button Classes: A Practical Example

Creating Reusable Button Styles:

/* Base button style */
.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

/* Color variations */
.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
}

.btn-secondary {
    background: #2ecc71;
    color: white;
}

.btn-secondary:hover {
    background: #27ae60;
}

.btn-outline {
    background: transparent;
    border: 2px solid #3498db;
    color: #3498db;
}

.btn-outline:hover {
    background: #3498db;
    color: white;
}

Visual Results:

Hover over buttons to see the transition effects

HTML Usage:

View Project
Contact Me
Learn More

Hover Effects: Adding Delight and Feedback

Hover effects provide immediate visual feedback to users, making your site feel more interactive and professional. They signal that elements are clickable and create a more engaging experience.

The :hover Pseudo-Class

The :hover pseudo-class applies styles when the user's cursor is over an element.

Basic Hover Syntax:

/* Normal state */
.element {
    background: #3498db;
    color: white;
}

/* Hover state */
.element:hover {
    background: #2980b9;  /* Darker blue on hover */
}

1. Color Change Hover

The simplest hover effect: change color to indicate interactivity.

a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    color: #2c3e50;
}

Visual Example:

This is a hoverable link that changes color when you move your mouse over it.

2. Background Change Hover

Change the background color to create button-like effects.

.card {
    background: white;
    border: 2px solid #e0e0e0;
}

.card:hover {
    background: #f8f9fa;
    border-color: #3498db;
}

Visual Example:

Hover Over This Card

Watch the background lighten and border change color

3. Scale/Transform Hover

Use CSS transforms to create subtle zoom or lift effects.

.project-card {
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);  /* Lift up 5px */
}

Visual Example:

Project Card

Hover to see it lift up slightly with enhanced shadow

4. Shadow Change Hover

Enhance or add shadows on hover to create depth.

.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);  /* Bigger shadow */
}

Visual Example:

Shadow Enhancement

Hover to see the shadow grow larger and darker

5. Combining Multiple Hover Effects

The most professional hover effects combine multiple properties for a cohesive interaction.

.project-card {
    background: white;
    border: 2px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.project-card:hover {
    border-color: #3498db;        /* Color change */
    box-shadow: 0 8px 16px rgba(52, 152, 219, 0.2);  /* Shadow */
    transform: translateY(-5px);   /* Lift */
}

Visual Example (hover for combined effect):

E-Commerce Platform

Full-stack application with React and Node.js

View Project →

Border changes color, shadow expands, and card lifts up

Smooth Transitions

Always add transitions to make hover effects smooth instead of jarring.

/* Transition all properties */
.element {
    transition: all 0.3s ease;
}

/* Transition specific properties */
.element {
    transition: background 0.3s ease, transform 0.2s ease;
}

Comparison:

Without Transition:

Hover Me
(Instant change)

With Transition:

Hover Me
(Smooth change)
Best Practice: Hover effects should be subtle and enhance the experience, not distract. A 0.3s transition is usually perfect - fast enough to feel responsive, slow enough to be smooth.

Responsive Design: One Site, All Screens

Responsive design means your website looks great and functions well on all devices: desktops, tablets, and phones. This is absolutely essential in modern web development.

The Viewport Meta Tag

This must be in every HTML document's head. It tells mobile browsers not to zoom out.

Critical: Without this tag, your site will look zoomed out on mobile devices. Always include it!

Using Percentages for Width

Percentages are relative to the parent container, making elements flexible.

/* Bad: Fixed width */
.container {
    width: 960px;  /* Breaks on small screens */
}

/* Good: Flexible width */
.container {
    width: 90%;  /* Always takes 90% of available space */
    max-width: 1200px;  /* But never exceeds 1200px */
}

Visual Demonstration:

width: 90%, max-width: 600px
Resize your browser to see me adapt!

This box is 90% wide but never exceeds 600px

Max-Width for Readability

Content containers should have a max-width to prevent text lines from becoming too long.

main {
    max-width: 900px;  /* Content never exceeds 900px */
    margin: 0 auto;    /* Center it */
    padding: 0 20px;   /* Add side padding */
}

Without max-width (bad on wide screens):

This text has no max-width. On a very wide monitor, the lines would stretch across the entire screen, making it incredibly difficult to read. Your eyes would have to travel a huge distance from the end of one line to the beginning of the next, causing fatigue and reducing comprehension.

With max-width (good):

This text has max-width: 600px. No matter how wide your screen is, the line length stays optimal for reading. This is much more comfortable and professional.

Flexible Images

Images should never overflow their container. Make them responsive with max-width.

img {
    max-width: 100%;  /* Never exceed container width */
    height: auto;     /* Maintain aspect ratio */
    display: block;   /* Remove inline spacing */
}

Visual Example:

[Image Placeholder]
max-width: 100%
Shrinks on small screens

Media Queries (Introduction)

Media queries let you apply different styles based on screen size. This is advanced but worth knowing about.

/* Desktop styles */
.container {
    width: 90%;
    max-width: 1200px;
}

h1 {
    font-size: 48px;
}

/* Tablet and smaller */
@media (max-width: 768px) {
    h1 {
        font-size: 36px;  /* Smaller heading on tablets */
    }
    
    nav li {
        display: block;  /* Stack nav vertically */
        margin: 10px 0;
    }
}

/* Mobile */
@media (max-width: 480px) {
    h1 {
        font-size: 28px;  /* Even smaller on phones */
    }
    
    .container {
        width: 95%;  /* Use more screen space */
    }
}

Media queries adjust styles based on screen width. This is how professional responsive sites work!

Responsive Design Checklist:
✓ Viewport meta tag in HTML head
✓ Use percentages or max-width, not fixed widths
✓ Images have max-width: 100%
✓ Text containers have reasonable max-width
✓ Test on different screen sizes (or browser DevTools)

Code Best Practices: Writing Professional Code

Good code isn't just code that works – it's code that's easy to read, maintain, and modify. These practices will make you a better developer.

1. Organize Your CSS

Structure your CSS file logically with clear sections and comments.

/* ===========================
   TABLE OF CONTENTS
   1. Reset & Base Styles
   2. Typography
   3. Layout
   4. Components
   5. Utilities
   =========================== */

/* ===== 1. RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    line-height: 1.6;
    color: #333;
}

/* ===== 2. TYPOGRAPHY ===== */
h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }

/* ===== 3. LAYOUT ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== 4. COMPONENTS ===== */
.card { /* ... */ }
.btn { /* ... */ }

/* ===== 5. UTILITIES ===== */
.text-center { text-align: center; }
.mb-20 { margin-bottom: 20px; }

2. Use Meaningful Names

Class names should describe what something is or does, not how it looks.

Bad (describes appearance):

/* What if you change the color to green? */
.blue-box { background: blue; }
.big-text { font-size: 32px; }

Good (describes purpose):

/* Describes what it is, not how it looks */
.project-card { background: white; }
.hero-title { font-size: 48px; }
.btn-primary { background: blue; }

3. Consistent Naming Convention

Choose a naming convention and stick to it. Kebab-case is most common for CSS.

/* Kebab-case (recommended for CSS) */
.project-card { }
.nav-link { }
.btn-primary { }

/* BEM (Block Element Modifier) - advanced but popular */
.card { }
.card__header { }
.card__title { }
.card--featured { }

4. Indent and Format Properly

Proper indentation makes code readable. Use 2 or 4 spaces consistently.

Bad (unreadable):

.card{background:white;padding:20px;border:1px solid #ddd;}

Good (readable):

.card {
    background: white;
    padding: 20px;
    border: 1px solid #ddd;
}

5. Add Comments

Comments explain why you did something, not what the code does (that should be obvious).

/* Bad: States the obvious */
.text-center {
    text-align: center;  /* This centers the text */
}

/* Good: Explains the why */
.profile-img {
    border-radius: 50%;  /* Circle shape for profile photos */
    border: 5px solid #3498db;  /* Match brand color */
}

/* Better: Section comments */
/* ===== NAVIGATION =====
   Horizontal nav on desktop, stacks vertically on mobile.
   Active state shows which page user is on.
===== */
nav { /* ... */ }

6. Group Related Properties

Order properties logically: positioning, display, box model, colors, typography, other.

.element {
    /* Positioning */
    position: relative;
    top: 10px;
    z-index: 10;
    
    /* Display & Box Model */
    display: block;
    width: 300px;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ddd;
    
    /* Colors & Backgrounds */
    background: white;
    color: #333;
    
    /* Typography */
    font-size: 16px;
    line-height: 1.6;
    
    /* Other */
    transition: all 0.3s ease;
}

7. Remove Unused Code

Before finishing, delete any CSS rules or HTML elements you're not using.

Pro Tip: Comment out code you might need later instead of deleting it immediately. After a week, if you haven't needed it, delete it for good.

8. Validate Your Code

Use online validators to check for errors:

HTML Validator
validator.w3.org - Checks HTML for errors
CSS Validator
jigsaw.w3.org/css-validator - Checks CSS for errors

Final Portfolio Project: Putting It All Together

Let's create a complete, production-ready portfolio with everything you've learned: reusable classes, hover effects, responsive design, and best practices.

Complete HTML (index.html)




    
    
    
    John Doe | Web Developer Portfolio
    



    
    

        

            
John Doe

            
Full Stack Web Developer

            

                Crafting beautiful, functional web experiences with 
                modern technologies and user-centered design.
            

            
            
        

    


    
    

        
        
        

            
About Me

            
            

                John Doe
            

            
            

                Hello! I'm John, a passionate web developer based in San Francisco. 
                I specialize in building responsive, user-friendly websites and 
                applications that solve real-world problems.
            

            
            

                My journey into web development began three years ago when I built 
                my first website for a local coffee shop. Since then, I've worked 
                with startups, small businesses, and fellow developers to bring 
                digital ideas to life.
            

            
            

                I believe in writing clean, maintainable code and creating 
                experiences that users love. When I'm not coding, you'll find me 
                hiking in the Bay Area, reading about new technologies, or 
                experimenting with coffee brewing methods.
            

        


        
        

            
Technical Skills

            
            

                

                    Frontend
                    
HTML5, CSS3, JavaScript (ES6+), React.js

                

                
                

                    Backend
                    
Node.js, Express.js, Python, Django

                

                
                

                    Database
                    
MongoDB, PostgreSQL, MySQL

                

                
                

                    Tools
                    
Git, GitHub, VS Code, Figma, Postman

                

                
                

                    Concepts
                    
Responsive Design, REST APIs, Agile, Testing

                

                
                

                    Currently Learning
                    
TypeScript, Next.js, Docker, Cloud Deployment

                

            

        


        
        

            
Featured Projects

            
            
            

                Featured
                
TaskFlow - Project Management App

                

                    A full-stack project management application built with React and 
                    Node.js. Features include real-time collaboration, task assignments, 
                    progress tracking, and team chat. Implemented WebSocket for live 
                    updates and integrated third-party APIs for calendar sync.
                

                

                    React
                    Node.js
                    MongoDB
                    Socket.io
                

                

                    View Live Site
                    View Code
                

            


            
            

                
E-Commerce Platform

                

                    Modern e-commerce website with shopping cart, user authentication, 
                    payment processing, and admin dashboard. Built with focus on 
                    performance and user experience. Includes product search, filtering, 
                    and responsive design for all devices.
                

                

                    React
                    Express
                    PostgreSQL
                    Stripe
                

                

                    View Live Site
                    View Code
                

            


            
            

                
Weather Dashboard

                

                    Interactive weather application that provides current conditions, 
                    5-day forecast, and historical data visualization. Features location 
                    search, favorite cities, and weather alerts. Data visualization with 
                    Chart.js for temperature trends and precipitation graphs.
                

                

                    JavaScript
                    Weather API
                    Chart.js
                    CSS Grid
                

                

                    View Live Site
                    View Code

Complete CSS (styles.css)

/* ===========================
   PROFESSIONAL PORTFOLIO CSS
   Day 5 - Final Project
   =========================== */

/* ===== 1. RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    line-height: 1.6;
    color: #333;
    background: #f5f5f5;
}

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

/* ===== 2. TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Arial', sans-serif;
    line-height: 1.2;
}

h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

p {
    margin-bottom: 15px;
}

/* ===== 3. LAYOUT ===== */
.container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    padding: 0 20px;
}

.main {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.section {
    margin-bottom: 40px;
}

/* ===== 4. REUSABLE COMPONENTS ===== */

/* Card Component */
.card {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* Button Components */
.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin: 5px;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.btn-outline {
    background: transparent;
    border: 2px solid #3498db;
    color: #3498db;
}

.btn-outline:hover {
    background: #3498db;
    color: white;
}

/* Badge Component */
.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
}

.badge-featured {
    background: #e74c3c;
    color: white;
    position: absolute;
    top: 20px;
    right: 20px;
}

/* ===== 5. UTILITY CLASSES ===== */
.text-center {
    text-align: center;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

/* ===== 6. HEADER ===== */
.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.hero-title {
    color: white;
    font-size: 56px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 24px;
    margin-bottom: 15px;
    opacity: 0.95;
}

.hero-description {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 30px auto;
    opacity: 0.9;
}

/* ===== 7. NAVIGATION ===== */
.nav-list {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.nav-link {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: all 0.3s ease;
    font-family: 'Arial', sans-serif;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* ===== 8. ABOUT SECTION ===== */
.profile {
    margin-bottom: 30px;
}

.profile-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid #3498db;
    object-fit: cover;
    margin: 0 auto;
}

/* ===== 9. SKILLS SECTION ===== */
.section-title {
    color: #2c3e50;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.skill-item {
    background: #ecf0f1;
    padding: 20px;
    border-left: 4px solid #3498db;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.skill-item:hover {
    background: #d5dbdb;
    transform: translateX(5px);
}

.skill-item strong {
    display: block;
    color: #2c3e50;
    font-size: 18px;
    margin-bottom: 8px;
    font-family: 'Arial', sans-serif;
}

.skill-item p {
    margin: 0;
    color: #555;
    font-size: 15px;
}

/* ===== 10. PROJECTS SECTION ===== */
.project-card {
    position: relative;
    margin-bottom: 30px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.project-card:hover {
    border-color: #3498db;
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.2);
    transform: translateY(-5px);
}

.project-title {
    color: #3498db;
    margin-top: 0;
}

.project-description {
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

.project-tech {
    margin-bottom: 20px;
}

.tech-tag {
    display: inline-block;
    background: #e8f4f8;
    color: #2980b9;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-family: 'Arial', sans-serif;
}

.project-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== 11. FOOTER ===== */
.footer {
    background: #2c3e50;
    color: white;
    padding: 60px 0 40px 0;
    margin-top: 60px;
}

.footer-title {
    color: white;
    border: none;
    margin-bottom: 15px;
}

.footer-description {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin-bottom: 30px;
}

.contact-link {
    color: #3498db;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

.contact-link:hover {
    color: #5dade2;
    transform: translateX(5px);
}

.copyright {
    margin-top: 30px;
    font-size: 14px;
    opacity: 0.7;
}

/* ===== 12. RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
    
    h2 {
        font-size: 28px;
    }
    
    .card {
        padding: 25px;
    }
    
    .nav-list {
        flex-direction: column;
        align-items: center;
    }
    
    .nav-link {
        display: block;
        width: 200px;
        text-align: center;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
    
    .project-links {
        flex-direction: column;
    }
    
    .btn {
        display: block;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 28px;
    }
    
    .container {
        width: 95%;
    }
    
    .card {
        padding: 20px;
    }
}

What Makes This Portfolio Professional?

✓ Reusable Classes
.card, .btn, .badge can be used throughout the site
✓ Smooth Hover Effects
All interactive elements have transitions and hover states
✓ Fully Responsive
Works on desktop, tablet, and mobile with media queries
✓ Clean, Organized Code
Commented sections, logical property order, consistent naming
✓ Semantic HTML
Proper use of header, nav, main, section, article, footer
✓ Detailed Content
Comprehensive project descriptions, skills breakdown, about section

Final Testing Checklist

  • ✓ All links work (no broken hrefs)
  • ✓ All images have alt text
  • ✓ Hover effects work on all interactive elements
  • ✓ Navigation highlights active page
  • ✓ Content is readable and well-written
  • ✓ Site works on different screen sizes
  • ✓ CSS is organized with comments
  • ✓ HTML validates without errors
  • ✓ CSS validates without errors
  • ✓ No console errors in browser

Next Steps After Day 5

1. Add Your Real Content
Replace placeholder text with your actual projects and information
2. Add Real Images
Replace image placeholders with actual photos and screenshots
3. Deploy Your Site
Use GitHub Pages, Netlify, or Vercel to make it live
4. Get Feedback
Share with friends, mentors, or communities for suggestions
5. Keep Learning
Explore JavaScript, CSS frameworks (Bootstrap/Tailwind), and Flexbox/Grid

Complete this lesson

Mark as complete to track your progress

Previous Lesson
CSS Positioning and Simple Layout
Course Complete!
Return to Course Overview