Bygg en komplett portfolio-sida
Kombinera dina HTML- och CSS-kunskaper och bygg en komplett portfolio-sida. Kopiera koden och anpassa med ditt eget innehåll.
Vad vi ska bygga
I den här artikeln sätter vi ihop allt du lärt dig och bygger en komplett portfolio-sida med:
- En header med navigation
- En hero-sektion med din presentation
- En sektion med projekt/arbeten
- En kontaktsektion
- En footer
Allt i ren HTML och CSS – inga ramverk, inga verktyg. Kopiera koden och anpassa med ditt eget innehåll.
Steg 1: HTML-strukturen
Skapa en fil portfolio.html:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anna Svensson – Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<header>
<nav>
<a href="#" class="logo">Anna S.</a>
<ul>
<li><a href="#om">Om mig</a></li>
<li><a href="#projekt">Projekt</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
</header><section class="hero" id="om">
<h1>Hej, jag heter Anna</h1>
<p>Jag är en blivande webbutvecklare som älskar att skapa
snygga och funktionella webbsidor. Just nu lär jag mig
HTML, CSS och grunderna i programmering.</p>
</section><section class="projekt" id="projekt">
<h2>Mina projekt</h2>
<div class="grid">
<article class="kort">
<h3>Min första sida</h3>
<p>En enkel HTML-sida jag byggde när jag
lärde mig grunderna.</p>
<a href="#">Visa projekt →</a>
</article>
<article class="kort">
<h3>CSS-experiment</h3>
<p>Övningar med flexbox, färger
och typografi.</p>
<a href="#">Visa projekt →</a>
</article>
<article class="kort">
<h3>Receptsamling</h3>
<p>En statisk sida med mina favoritrecept,
uppbyggd med HTML-tabeller och listor.</p>
<a href="#">Visa projekt →</a>
</article>
</div>
</section><section class="kontakt" id="kontakt">
<h2>Kontakt</h2>
<p>Vill du nå mig? Skicka ett mejl till
<a href="mailto:anna@exempel.se">anna@exempel.se</a></p>
</section><footer>
<p>© 2025 Anna Svensson. Byggd med HTML & CSS.</p>
</footer>
</body>
</html>Steg 2: CSS – ge den liv
Skapa portfolio.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: 'Segoe UI', system-ui, sans-serif;
line-height: 1.6;
color: #2d2d2d;
background: #fff;
}/* Navigation */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: #1a1a2e;
}nav .logo {
color: #fff;
font-size: 1.4em;
font-weight: 700;
text-decoration: none;
}nav ul {
display: flex;
list-style: none;
gap: 24px;
}nav a {
color: #ccc;
text-decoration: none;
}nav a:hover {
color: #e94560;
}/* Hero */
.hero {
text-align: center;
padding: 80px 20px;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #fff;
}.hero h1 {
font-size: 2.5em;
margin-bottom: 16px;
}.hero p {
max-width: 600px;
margin: 0 auto;
font-size: 1.1em;
color: #b0b0c0;
}/* Projekt */
.projekt {
padding: 60px 40px;
}.projekt h2 {
text-align: center;
margin-bottom: 32px;
font-size: 2em;
}.grid {
display: flex;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
}.kort {
background: #f5f5f5;
border-radius: 12px;
padding: 24px;
width: 280px;
}.kort h3 {
margin-bottom: 8px;
color: #1a1a2e;
}.kort a {
color: #e94560;
text-decoration: none;
font-weight: 600;
}/* Kontakt */
.kontakt {
text-align: center;
padding: 60px 20px;
background: #fafafa;
}.kontakt h2 {
margin-bottom: 16px;
}.kontakt a {
color: #e94560;
}/* Footer */
footer {
text-align: center;
padding: 24px;
background: #1a1a2e;
color: #888;
font-size: 0.9em;
}Vad du kan anpassa
- Ditt namn och din text – byt ut "Anna Svensson" mot ditt eget
- Färgerna – ändra
#1a1a2eoch#e94560till dina favoritfärger - Projekten – lägg till fler
<article class="kort">-block - En bild – lägg till
<img>i hero-sektionen
Utmaning: Lägg till en sektion "Om mig" med en bild och tre fakta om dig själv. Använd flexbox för att placera bilden bredvid texten.
Responsiv design (bonus)
Lägg till detta i slutet av din CSS för att göra sidan mobilanpassad:
@media (max-width: 600px) {
nav {
flex-direction: column;
gap: 12px;
}.grid {
flex-direction: column;
align-items: center;
}.kort {
width: 100%;
max-width: 400px;
}.hero h1 {
font-size: 1.8em;
}
}Nästa steg
Du har nu en riktig webbsida! Men den ligger bara lokalt på din dator. I nästa artikel sätter vi upp en lokal utvecklingsmiljö med XAMPP så att du kan köra en riktig webbserver och förbereda dig för dynamiskt innehåll med PHP.
Nästa steg
Du har nu en komplett portfolio-sida med HTML och CSS! Men hittills har du bara öppnat filer direkt i webbläsaren. Nästa steg är att köra en riktig webbserver lokalt:
👉 Lokal utvecklingsmiljö med XAMPP – installera Apache och kör din sida som på en riktig server.
Vill du istället ta en genväg och bygga med AI? Kolla in Snabbspåret – bygg med AI.
Vill du jämföra verktyg?
Jämför de bästa vibe coding-plattformarna →