Portfolio Website Instructions

Follow these step-by-step instructions to build Build a Portfolio Website from scratch.

Difficulty: beginnerDuration: 3 daysSkills: 4

Get Started with GitHub Classroom

Accept the GitHub Classroom assignment to get your personal repository with starter code and automated testing setup.

Accept Assignment View Live Demo

What you'll get: Personal repository, starter files, automated tests, and issue tracking.

Project Assets

Download starter files, design assets, and reference materials for this project.

Starter Files.zip

Complete starter code with project structure and initial files

2.1 MB

Design File.fig

Figma design file with layouts, components, and style guide

890 KB

Preview Images.zip

High-quality preview images for reference

5.2 MB

Project Brief.pdf

Detailed project requirements and specifications

1.4 MB

Getting Started Tip

Download the starter files first, then use the design file as reference while working through the instructions. The preview images show what your final project should look like.

Finished building?

Check out the complete solution with detailed explanations and best practices.

View Solution

Quick Actions

Get Starter Code Live Demo View Solution

Your Progress

Started project

Setup complete

Core features built

Styling complete

Project deployed

Progress20%

Need Help?

💬Community Discord ❓Troubleshooting Guide 📋Project Overview

Portfolio Website - Instructions

Follow this step-by-step guide to build your professional portfolio website. Take your time with each step and don't hesitate to experiment!

📋 Before You Start

Required Tools

Code Editor: VS Code (recommended) or your preferred editor
Web Browser: Chrome or Firefox for development
Terminal: Built-in terminal or VS Code integrated terminal
Git: For version control and deployment

Development Setup

Install VS Code extensions:
- Live Server (for live reload)
- HTML CSS Support
- Auto Rename Tag
- Prettier (for code formatting)

🚀 Getting Started

Step 1: Get Your Starter Code

Accept the GitHub Classroom assignment
- Click the GitHub Classroom link provided
- This creates a personal repository with starter files
- Clone the repository to your local machine

1
git clone https://github.com/YOUR-GITHUB-USERNAME/portfolio-starter.git
2
cd portfolio-starter

Step 2: Project Structure

Your starter repository includes:

portfolio-starter/
├── index.html          # Home page
├── about.html         # About page
├── projects.html      # Projects showcase
├── contact.html       # Contact form
├── css/
│   ├── styles.css     # Main stylesheet
│   └── reset.css      # CSS reset
├── images/            # Your photos and project images
├── assets/            # Icons, fonts, etc.
└── README.md

📝 Development Guide

Phase 1: Home Page (index.html)

1.1 HTML Structure

Start by creating the basic structure in index.html:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Your Name - Web Developer</title>
7
    <link rel="stylesheet" href="css/reset.css">
8
    <link rel="stylesheet" href="css/styles.css">
9
</head>
10
<body>
11
    <header>
12
        <nav>
13
            <!-- Navigation will go here -->
14
        </nav>
15
    </header>
16

17
    <main>
18
        <section class="hero">
19
            <!-- Hero content -->
20
        </section>
21

22
        <section class="intro">
23
            <!-- Introduction section -->
24
        </section>
25

26
        <section class="featured-projects">
27
            <!-- Featured projects preview -->
28
        </section>
29
    </main>
30

31
    <footer>
32
        <!-- Footer content -->
33
    </footer>
34
</body>
35
</html>

1.2 Create the Navigation

Add a responsive navigation menu:

1
<header>
2
    <nav class="navbar">
3
        <div class="nav-brand">
4
            <a href="index.html">Your Name</a>
5
        </div>
6
        <ul class="nav-menu">
7
            <li><a href="index.html" class="nav-link active">Home</a></li>
8
            <li><a href="about.html" class="nav-link">About</a></li>
9
            <li><a href="projects.html" class="nav-link">Projects</a></li>
10
            <li><a href="contact.html" class="nav-link">Contact</a></li>
11
        </ul>
12
        <div class="hamburger">
13
            <span class="bar"></span>
14
            <span class="bar"></span>
15
            <span class="bar"></span>
16
        </div>
17
    </nav>
18
</header>

1.3 Hero Section

Create an impactful hero section:

1
<section class="hero">
2
    <div class="hero-content">
3
        <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
4
        <p class="hero-subtitle">Aspiring Web Developer</p>
5
        <p class="hero-description">
6
            I'm passionate about creating beautiful, functional websites
7
            and learning new technologies.
8
        </p>
9
        <div class="hero-buttons">
10
            <a href="projects.html" class="btn btn-primary">View My Work</a>
11
            <a href="contact.html" class="btn btn-secondary">Get In Touch</a>
12
        </div>
13
    </div>
14
</section>

Phase 2: Styling with CSS

2.1 CSS Custom Properties

Set up your design system in css/styles.css:

1
:root {
2
    /* Colors */
3
    --primary-color: #3b82f6;
4
    --secondary-color: #1e40af;
5
    --accent-color: #f59e0b;
6
    --text-color: #1f2937;
7
    --text-light: #6b7280;
8
    --bg-color: #ffffff;
9
    --bg-light: #f9fafb;
10
    --border-color: #e5e7eb;
11

12
    /* Typography */
13
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
14
    --font-size-sm: 0.875rem;
15
    --font-size-base: 1rem;
16
    --font-size-lg: 1.125rem;
17
    --font-size-xl: 1.25rem;
18
    --font-size-2xl: 1.5rem;
19
    --font-size-3xl: 1.875rem;
20
    --font-size-4xl: 2.25rem;
21

22
    /* Spacing */
23
    --space-xs: 0.5rem;
24
    --space-sm: 1rem;
25
    --space-md: 1.5rem;
26
    --space-lg: 2rem;
27
    --space-xl: 3rem;
28
    --space-2xl: 4rem;
29

30
    /* Layout */
31
    --max-width: 1200px;
32
    --border-radius: 0.5rem;
33
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
34
}

2.2 Base Styles

1
body {
2
    font-family: var(--font-family);
3
    color: var(--text-color);
4
    line-height: 1.6;
5
}
6

7
.container {
8
    max-width: var(--max-width);
9
    margin: 0 auto;
10
    padding: 0 var(--space-sm);
11
}
12

13
/* Button styles */
14
.btn {
15
    display: inline-block;
16
    padding: var(--space-xs) var(--space-md);
17
    border-radius: var(--border-radius);
18
    text-decoration: none;
19
    font-weight: 500;
20
    transition: all 0.3s ease;
21
}
22

23
.btn-primary {
24
    background-color: var(--primary-color);
25
    color: white;
26
}
27

28
.btn-primary:hover {
29
    background-color: var(--secondary-color);
30
}

2.3 Navigation Styles

1
.navbar {
2
    display: flex;
3
    justify-content: space-between;
4
    align-items: center;
5
    padding: var(--space-sm) var(--space-md);
6
    background-color: var(--bg-color);
7
    box-shadow: var(--shadow);
8
}
9

10
.nav-brand a {
11
    font-size: var(--font-size-xl);
12
    font-weight: bold;
13
    text-decoration: none;
14
    color: var(--primary-color);
15
}
16

17
.nav-menu {
18
    display: flex;
19
    list-style: none;
20
    margin: 0;
21
    padding: 0;
22
    gap: var(--space-md);
23
}
24

25
.nav-link {
26
    text-decoration: none;
27
    color: var(--text-color);
28
    transition: color 0.3s ease;
29
}
30

31
.nav-link:hover,
32
.nav-link.active {
33
    color: var(--primary-color);
34
}
35

36
/* Mobile hamburger menu (we'll add JavaScript later) */
37
.hamburger {
38
    display: none;
39
    flex-direction: column;
40
    cursor: pointer;
41
}
42

43
.bar {
44
    width: 25px;
45
    height: 3px;
46
    background-color: var(--text-color);
47
    margin: 3px 0;
48
    transition: 0.3s;
49
}

Phase 3: Responsive Design

3.1 Mobile-First Approach

Add responsive breakpoints:

1
/* Mobile styles (default) */
2
.hero {
3
    padding: var(--space-2xl) var(--space-sm);
4
    text-align: center;
5
}
6

7
.hero h1 {
8
    font-size: var(--font-size-3xl);
9
    margin-bottom: var(--space-sm);
10
}
11

12
/* Tablet styles */
13
@media (min-width: 768px) {
14
    .hero h1 {
15
        font-size: var(--font-size-4xl);
16
    }
17

18
    .hero-buttons {
19
        display: flex;
20
        gap: var(--space-sm);
21
        justify-content: center;
22
    }
23
}
24

25
/* Desktop styles */
26
@media (min-width: 1024px) {
27
    .hamburger {
28
        display: none;
29
    }
30

31
    .nav-menu {
32
        display: flex;
33
    }
34
}
35

36
/* Mobile menu toggle */
37
@media (max-width: 1023px) {
38
    .nav-menu {
39
        position: fixed;
40
        left: -100%;
41
        top: 70px;
42
        flex-direction: column;
43
        background-color: var(--bg-color);
44
        width: 100%;
45
        text-align: center;
46
        transition: 0.3s;
47
        box-shadow: var(--shadow);
48
    }
49

50
    .nav-menu.active {
51
        left: 0;
52
    }
53

54
    .hamburger {
55
        display: flex;
56
    }
57
}

🔧 Implementation Checkpoints

Complete each phase before moving to the next:

✅ Phase 1 Checklist

[ ] HTML structure is semantic and valid
[ ] Navigation menu is implemented
[ ] Hero section displays correctly
[ ] All internal links work properly

✅ Phase 2 Checklist

[ ] CSS custom properties are defined
[ ] Typography is consistent and readable
[ ] Color scheme is applied throughout
[ ] Hover effects work smoothly

✅ Phase 3 Checklist

[ ] Website is responsive on mobile devices
[ ] Tablet layout looks good (768px+)
[ ] Desktop layout utilizes space well (1024px+)
[ ] Navigation works on all screen sizes

🚨 Common Issues & Solutions

Problem: Styles not loading

Solution: Check file paths in your HTML <link> tags and ensure CSS files exist.

Problem: Images not displaying

Solution: Verify image paths and file extensions match exactly (case-sensitive).

Problem: Mobile menu not working

Solution: We'll add JavaScript functionality in a later step.

Problem: Layout breaking on different screen sizes

Solution: Test with browser dev tools and adjust media query breakpoints.

📱 Testing Your Website

Responsive Design: Use browser dev tools to test different screen sizes
Cross-browser: Test in Chrome, Firefox, and Safari
Validation: Use W3C HTML and CSS validators
Performance: Check loading speed with browser dev tools

🚀 Deployment

When you're ready to deploy:

Push to GitHub:

1
git add .
2
git commit -m "Complete portfolio website"
3
git push origin main

Enable GitHub Pages:
- Go to repository settings
- Scroll to "Pages" section
- Select "Deploy from a branch" → "main"
- Your site will be live at: https://username.github.io/repository-name

🎯 Next Steps

Once you complete the basic portfolio:

Add JavaScript interactivity (hamburger menu, smooth scrolling)
Implement the About page with your story and skills
Create the Projects page to showcase your work
Build the Contact page with a functional form
Add animations and micro-interactions
Optimize for performance and SEO

📚 Additional Resources

MDN Web Docs - Comprehensive web development reference
CSS Tricks - Helpful CSS tutorials and examples
Can I Use - Browser compatibility checker
Google Fonts - Free web fonts

💡 Pro Tips

Start simple: Get the basic structure working before adding complexity
Test frequently: Check your work in the browser after each major change
Use semantic HTML: Screen readers and search engines will thank you
Mobile first: Design for mobile, then enhance for larger screens
Commit often: Save your progress with meaningful Git commit messages

Ready to build something amazing? Let's code! 🚀

Need help? Check the solution page for complete code examples and explanations, or reach out in the community Discord for support from fellow learners.