A portfolio page is the most useful first web project: you learn layout properly, and you finish with something you can actually send to people.
The structure#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ayesha Khan — Developer</title>
<meta name="description" content="Junior developer building small web apps with JavaScript and Python.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<a class="logo" href="#top">Ayesha Khan</a>
<nav>
<a href="#projects">Projects</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section class="hero" id="top">
<h1>I build small, useful web things.</h1>
<p>Learning JavaScript and Python. Here is what I have made so far.</p>
<a class="btn" href="#projects">See my work</a>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="grid">
<article class="card">
<h3>To-do app</h3>
<p>A browser to-do list that saves your tasks. Built with plain JavaScript.</p>
<a href="#">View project</a>
</article>
<article class="card">
<h3>Quiz app</h3>
<p>A multiple-choice quiz with scoring and instant feedback.</p>
<a href="#">View project</a>
</article>
<article class="card">
<h3>File organiser</h3>
<p>A Python script that tidies a messy downloads folder by file type.</p>
<a href="#">View project</a>
</article>
</div>
</section>
<section id="about">
<h2>About</h2>
<p>Two short paragraphs. What you are learning, what you want to build next.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p><a href="mailto:you@example.com">you@example.com</a></p>
</section>
</main>
<footer><p>© 2026 Ayesha Khan</p></footer>
</body>
</html>Note the semantic tags — header, main, section, article, footer — rather than div everywhere. They cost nothing and help search engines and screen readers understand the page.
The CSS#
:root {
--ink: #16181d;
--body: #4a5163;
--line: #e6e8ee;
--accent: #4f46e5;
--max: 900px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
color: var(--body);
line-height: 1.65;
}
h1, h2, h3 { color: var(--ink); line-height: 1.2; }
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
max-width: var(--max);
margin: 0 auto;
padding: 20px;
}
.site-header nav { display: flex; gap: 18px; }
.site-header a { color: var(--body); text-decoration: none; }
.site-header a:hover { color: var(--accent); }
.logo { font-weight: 700; color: var(--ink); }
main { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
section { padding: 56px 0; border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.btn {
display: inline-block;
margin-top: 16px;
padding: 12px 22px;
background: var(--accent);
color: #fff;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-top: 24px;
}
.card {
border: 1px solid var(--line);
border-radius: 14px;
padding: 20px;
transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.card h3 { margin: 0 0 8px; }
footer { max-width: var(--max); margin: 0 auto; padding: 30px 20px; font-size: .9rem; }
@media (max-width: 560px) {
.site-header { flex-direction: column; align-items: flex-start; }
section { padding: 40px 0; }
}Why this layout is responsive without much effort#
The key line is:
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));Read as: “fit as many columns as you can, each at least 240px wide, sharing the space equally”. Three columns on a laptop, two on a tablet, one on a phone — with no media query at all.
clamp(2rem, 5vw, 3rem) does the same for the heading: it scales with the screen but never gets absurdly small or large.
Publishing it free#
- Put the folder on GitHub — see Git and GitHub explained
- In the repository settings, enable GitHub Pages from the main branch
- Your site appears at a public URL within a minute or two
Netlify offers a similar free option where you can drag the folder onto the page. Having a link to share is what turns this from an exercise into a portfolio.
Questions people ask#
Do I need a framework?
No. A one-page portfolio in plain HTML and CSS loads faster than most framework sites and shows you understand the fundamentals.
What should I put in it with only two projects?
Two projects with clear descriptions is enough. Say what each does, what you built it with, and what you learned. Honesty about being early in your journey reads far better than padding.
Should I use Bootstrap or Tailwind?
Learn plain CSS first. Frameworks make more sense once you understand what they are doing for you — otherwise every unusual layout becomes a mystery.