Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yogisv5/sitesbyyogi.com/wp-includes/functions.php on line 6260
MODULE 10: Final Project — Personal Portfolio Website - SitesByYogi
SitesByYogi text logo
Contact
🧠 Module 10

Final Project — Personal Portfolio Website

Objective: Combine your HTML and CSS skills to design, build, and launch a fully responsive portfolio that showcases your work and personality.

🧩 1. Project Overview

You’ll create a multi-page portfolio with consistent design and professional layout. Host it on GitHub Pages or your own server.

🧱 Core Pages

  • Home — hero + featured projects
  • About — bio, skills, photo
  • Projects — 3–6+ projects
  • Contact — form + social links

Use consistent headers, footers, fonts, and colors across all pages.

🧱 2. Folder Structure

/portfolio-site
├── index.html
├── about.html
├── projects.html
├── contact.html
├── css/
│   └── style.css
├── images/
│   ├── profile.jpg
│   ├── project1.jpg
│   ├── project2.jpg
│   └── project3.jpg
└── fonts/

🎨 3. Design Guidelines

Brand Colors

  • Primary: #0E477B
  • Accent: #6EC1E4
  • Highlight: #FFB71B
  • Neutral: #f5f5f5 bg, #333 text

Typography & Layout

  • Font: 'Poppins' or 'Roboto', sans-serif
  • Headings 600–700, body 400
  • Flexbox for header/nav; Grid for project gallery
  • Consistent spacing (e.g., 20px margins/padding)

💻 4. Core Components

✅ Header & Navigation

<header class="site-header">
  <div class="logo">StreetGeek</div>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="projects.html">Projects</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

.site-header{
  display:flex;justify-content:space-between;align-items:center;
  background:#0E477B;color:#fff;padding:20px;border-radius:12px;
}
.site-header nav{display:flex;gap:15px;}
.site-header a{color:#fff;text-decoration:none;}
.site-header a:hover{color:#FFB71B;}

✅ Hero (Home)

<section class="hero">
  <h1>Hello, I'm Yogi 👋</h1>
  <p>WordPress Developer & Web Design Instructor</p>
  <a class="btn" href="projects.html">View My Work</a>
</section>

Hello, I'm Yogi 👋

WordPress Developer & Web Design Instructor

View My Work

✅ About Section

<section class="about">
  <img src="images/profile.jpg" alt="Your Name" />
  <div>
    <h2>About Me</h2>
    <p>I'm a passionate developer and educator helping beginners build modern websites.</p>
  </div>
</section>
Profile photo

About Me

I'm a passionate WordPress developer and educator teaching beginners how to build and manage their own websites.

✅ Projects Grid

<section class="projects">
  <h2>My Projects</h2>
  <div class="grid">
    <div class="card"><img src="images/project1.jpg" alt=""><h3>Portfolio Site</h3></div>
    <div class="card"><img src="images/project2.jpg" alt=""><h3>Blog Layout</h3></div>
    <div class="card"><img src="images/project3.jpg" alt=""><h3>Shop Template</h3></div>
  </div>
</section>

My Projects

Portfolio Site

Blog Layout

Shop Template

✅ Contact Section

<section class="contact">
  <h2>Get In Touch</h2>
  <form>
    <label>Name:</label><input type="text" required>
    <label>Email:</label><input type="email" required>
    <label>Message:</label><textarea rows="5"></textarea>
    <button type="submit">Send Message</button>
  </form>
</section>

Get In Touch

💡 5. Responsive Adjustments

Copy these at the bottom of css/style.css:

@media (max-width:768px){
  .site-header{ flex-direction:column; gap:10px; }
  .site-header nav a{ display:block; }
  .projects .grid{ grid-template-columns:1fr; }
}

Now your layout adapts beautifully on mobile and tablet screens.

🧠 6. Launch Checklist

  • All pages link correctly
  • Consistent fonts and colors
  • Responsive across sizes (no sideways scroll)
  • Images contain descriptive alt text
  • No console/validator errors
  • Your name & contact info are correct

🧪 7. Bonus: Publish Online

Option 1: GitHub Pages

  1. Create repo portfolio-site
  2. Upload files
  3. Settings → Pages → Deploy from main
  4. Visit https://<username>.github.io/portfolio-site

Option 2: StreetGeek VPS

Upload to /public_html via cPanel/FTP.

🧠 8. Quiz Time

  • What are four essential pages in a professional portfolio?
  • Which CSS tool best builds multi-column project grids?
  • How can you make navigation responsive on mobile?
  • Why include alt attributes on images?
  • What free tool can you use to publish your site?

🚀 Challenge Task — Final Project Submission

  • Include 4 pages (Home, About, Projects, Contact)
  • Use your own palette and photos
  • Build with Flexbox, Grid, and Media Queries
  • Ensure mobile-friendly layouts
  • Publish via GitHub Pages or your hosting
  • Bonus: Add dark mode via a class toggle
/* CSS dark mode (toggle .dark on <body>) */
body.dark{ background:#111; color:#f5f5f5; }
body.dark a{ color:#6EC1E4; }

🏁 Module 10 Summary

  • Multi-page, responsive website
  • Semantic HTML structure
  • Modern CSS with Flexbox & Grid
  • Clean, cohesive visual design
  • Deployed portfolio to showcase your skills

🎓 You did it! You’ve completed HTML & CSS Foundations: From Zero to Web Design Hero.

Next: 👉 PHP Foundations: From Zero to Dynamic Web Developer.