How to Build a Portfolio Website as a Student

A portfolio website is a single place where anyone can see what you have actually made: the app you built for a hackathon, the posters you designed for your college fest, the research summary you wrote for a seminar, or the data analysis you did for a final-year project. Certificates say you attended a course; a portfolio shows what you can do with it. The good news is that you can build and publish one for free, even if you have only just learned basic HTML. This guide walks through planning, writing, coding and publishing a simple, fast portfolio in about one weekend.

Step 1: Decide Who the Site Is For

Before you write a single line of code, answer one question: who should visit this site, and what should they do next? A second-year computer science student might want a hiring manager to open their GitHub projects. A design student might want a client to view their Behance-style case studies. A commerce student building analytics skills might want a professor to see a dashboard they created. Your answer decides what goes at the top of the page.

Write a one-line statement such as: "I am a BSc Statistics student who builds clear data dashboards in Python and Power BI." This line becomes the heading of your homepage, so keep it specific. Avoid vague phrases like "passionate learner" that every visitor has already seen many times.

Step 2: Choose Three to Five Projects

Quality beats quantity. Pick the projects that best support your one-line statement, even if they are small. For each one, prepare a short case study using this structure:

1. Problem: what needed solving, in one or two sentences.
2. Your role: what you personally did, especially for group projects.
3. Tools: languages, software or methods used.
4. Result: what you built, with a screenshot, link or demo.
5. What you learned: one honest lesson, including what you would change.

Here is an example. Riya (example), a first-year student, built a canteen menu web page for her hostel. Her case study explains that students had to walk to the canteen to check the day's menu, that she built a mobile-friendly page the mess committee could update by editing a Google Sheet, and that she learned how to read sheet data with JavaScript. It is a modest project, but the write-up shows problem-solving, not just code.

Step 3: Plan the Pages

A student portfolio rarely needs more than one page with clear sections. Use this layout as a starting point:

Skip skill bars and percentage ratings like "Java 80%". They mean nothing to a reader because there is no scale behind the number.

Step 4: Write the HTML

Create a folder called portfolio and, inside it, a file named index.html. The name matters: web hosts look for index.html as the homepage. Start with a clean, semantic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Riya Sharma | Web Projects</title>
  <meta name="description" content="Student web developer building simple, useful sites.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Riya Sharma</h1>
    <p>First-year BCA student building simple, useful websites.</p>
    <a href="#projects">See my projects</a>
  </header>

  <main>
    <section id="projects">
      <h2>Projects</h2>
      <article class="card">
        <h3>Hostel Canteen Menu</h3>
        <p>A mobile page that shows the daily menu from a Google Sheet.</p>
        <a href="https://github.com/your-username/canteen-menu">View code</a>
      </article>
    </section>
  </main>

  <footer>
    <p>Contact: riya.example@email.com</p>
  </footer>
</body>
</html>

The viewport meta tag is essential. Without it, your site will look tiny on phones, and many people will open your link on a phone first. Replace the example name, links and email with your own.

Step 5: Add Simple, Readable CSS

Create style.css in the same folder. You do not need a framework. A few rules give you a clean, readable layout that works on any screen size:

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2933;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

#projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

#projects h2 {
  grid-column: 1 / -1;
}

.card {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 1rem;
}

a {
  color: #0b5cad;
}

The auto-fit and minmax combination makes the cards sit side by side on a laptop and stack in one column on a phone, with no media queries needed. The grid-column: 1 / -1 rule makes the heading span the full width above the cards.

Step 6: Publish for Free With GitHub Pages

GitHub Pages (pages.github.com) hosts static sites directly from a GitHub repository at no cost. The basic steps are:

1. Create a free account on github.com if you do not have one.
2. Create a new public repository named your-username.github.io, replacing your-username with your exact GitHub username.
3. Upload index.html and style.css using the "Add file" button, or push them with Git.
4. Open the repository's Settings, go to Pages, and confirm the site is publishing from your main branch.
5. Visit https://your-username.github.io after a few minutes.

GitHub's interface changes from time to time, so follow the current instructions on pages.github.com if a menu looks different. Netlify and Cloudflare Pages are other popular free options for static sites. A custom domain is optional; the free GitHub address is perfectly acceptable for students.

Step 7: Check Before You Share

• Open it on your phone and on a friend's phone. Fix anything that needs sideways scrolling.
• Click every link, especially project and contact links.
• Compress screenshots before uploading. A free tool like Squoosh (squoosh.app) can shrink large images without visible loss in quality.
• Run Lighthouse from Chrome's DevTools to spot accessibility and performance issues, such as missing image alt text or low colour contrast.
• Proofread every line. A spelling mistake in your own headline undermines an otherwise strong site.

Mistakes to Avoid

• Using a heavy template you cannot edit or explain. If an interviewer asks how your site works, you should be able to answer.
• Listing tutorial clones, such as a copied to-do app, as original work. If you followed a tutorial, say so and describe what you added yourself.
• Publishing your phone number, home address or date of birth. A professional email is enough.
• Letting the site go stale. Add each new project within a week of finishing it.

FAQs

I am not a computer science student. Do I still need a portfolio?

It helps in any field where you produce visible work: design, writing, architecture, marketing, research or data analysis. A site builder is fine if you do not want to code, as long as the content is clear and your own.

How many projects are enough to start?

Three thoughtful projects with proper write-ups are a good start. You can publish with even one or two and add more as you complete them.

Do I need to buy a domain name?

No. A free address such as your-username.github.io works well. Buy a domain later only if you plan to use it for years.

Can I include group projects?

Yes, but describe your exact contribution and credit your teammates. Honest attribution makes your portfolio more trustworthy, not less impressive.