Build a responsive personal portfolio to showcase your work.
Goals
-
Semantic HTML structure
-
Responsive layout using CSS Grid or Flexbox
-
Accessible navigation and contact form
Starter Files
Create index.html and styles.css
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Jane Developer</h1>
<nav aria-label="Primary">
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main id="content">
<section id="about">
<h2>About Me</h2>
<p>Developer focused on building accessible, performant web apps.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<article>
<h3>Sample App</h3>
<p>Short description of a project with a link.</p>
<a href="#">View</a>
</article>
</section>
<section id="contact">
<h2>Contact</h2>
<form action="#" method="post">
<label>Name <input name="name" required /></label>
<label>Email <input type="email" name="email" required /></label>
<label>Message <textarea name="message" rows="4" required></textarea></label>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<small>© <span id="year"></span> Jane Developer</small>
<script>
document.getElementById('year').textContent = new Date().getFullYear()
</script>
</footer>
</body>
</html>
* { box-sizing: border-box }
body { margin: 0; font-family: system-ui, Arial, sans-serif; line-height: 1.6 }
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #eee }
nav a { margin: 0 .5rem; text-decoration: none; color: #0a66c2 }
main { max-width: 960px; margin: 0 auto; padding: 1rem }
#projects article { padding: 1rem; border: 1px solid #eee; border-radius: .5rem; margin-bottom: 1rem }
form { display: grid; gap: .75rem; max-width: 480px }
input, textarea, button { font: inherit; padding: .5rem }
button { background: #0a66c2; color: white; border: none; border-radius: .25rem; cursor: pointer }
button:hover { background: #084f96 }
@media (max-width: 600px) { header { flex-direction: column; gap: .5rem } }
Steps
-
Fill in your bio and add at least three projects
-
Add alt text to all images
-
Deploy to Netlify or Vercel
Acceptance Criteria
-
Lighthouse performance and accessibility score 90 or higher
-
Valid HTML with no major validator errors
-
Fully responsive on mobile and desktop
