Web Development - CSS Project
Project: Style the Personal Website
Kan lage en side med og en uten variabler
In this project you will style the HTML personal website you built earlier. You will add colors, typography, layout, responsive behavior, and tasteful animations to create a polished portfolio page.
Goal: Turn a plain HTML site into a clean, responsive portfolio with consistent design, good spacing, and accessible contrast.
https://my-fantastic-website.w3spaces.com/
What You Will Do
- Set up a color palette with CSS variables.
- Choose body and heading fonts with consistent sizing.
- Build a responsive layout using Flexbox or Grid.
- Style navigation, hero, buttons, cards, and footer.
- Add hover/focus states, transitions, and a mobile menu.
- Check accessibility and performance basics.
Starter Files
Link your CSS file from the previous HTML project. If you need a quick start, use this structure:
Example
Basic HTML with a linked stylesheet:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Your Name - Portfolio</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<header class='site-header'>...</header>
<main>...</main>
<footer class='site-footer'>...</footer>
</body>
</html>
Try it Yourself »
Step 1: Design Tokens With CSS Variables
Declare a small palette and spacing scale in :root for consistency.
Example
Color palette and spacing variables:
:root {
--bg: #0f172a; /* slate-900 */
--panel: #111827; /* gray-900 */
--text: #e5e7eb; /* gray-200 */
--muted: #94a3b8; /* slate-400 */
--brand: #22d3ee; /* cyan-400 */
--brand-strong: #06b6d4;
--accent: #a78bfa; /* violet-400 */
--radius: 12px;
--space-1: 8px;
--space-2: 12px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
}
Try it Yourself »
Step 2: Base Styles and Typography
Set background, text color, font stack, and a clean vertical rhythm.
Example
Global resets and type scale:
* {
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background: radial-gradient(1200px 800px at 10% -10%, #1f2937 0%, var(--bg) 50%);
line-height: 1.6;
}
h1, h2, h3 {
line-height: 1.2;
margin: 0 0 var(--space-3);
}
h1 {
font-size: clamp(2rem, 4vw, 3rem);
}
h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
}
p {
margin: 0 0 var(--space-3);
color: var(--text);
}
a {
color: var(--brand);
text-decoration: none;
}
a:hover, a:focus {
color: var(--brand-strong);
text-decoration: underline;
}
.container {
max-width: 1024px;
padding: 0 var(--space-3);
margin: 0 auto;
}
Try it Yourself »
Step 3: Header and Navigation
Create a sticky header with a brand on the left and simple nav on the right. Add a mobile collapse.
Example
Responsive header and nav:
.site-header {
position: sticky;
top: 0;
z-index: 10;
background: rgba(17, 24, 39, 0.8);
backdrop-filter: blur(6px);
border-bottom: 1px solid #1f2937;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) 0;
}
.brand {
font-weight: 700;
letter-spacing: 0.5px;
}
.nav {
display: flex;
gap: var(--space-4);
}
.nav a {
color: var(--muted);
}
.nav a:hover, .nav a:focus {
color: var(--text);
}
.menu-btn {
display: none;
}
@media (max-width: 700px) {
.nav {
display: none;
}
.menu-btn {
display: inline-flex;
padding: 8px 12px;
border: 1px solid #374151;
border-radius: 8px;
background: #0b1220;
color: var(--text);
}
.nav.open {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3) 0;
}
}
Try it Yourself »
Example
Header HTML snippet:
<header class='site-header'>
<div class='container navbar'>
<div class='brand'>Your Name</div>
<nav id='site-nav' class='nav'>
<a href='#about'>About</a>
<a href='#projects'>Projects</a>
<a href='#contact'>Contact</a>
</nav>
<button id='menuBtn' class='menu-btn' aria-expanded='false' aria-controls='site-nav'>Menu</button>
</div>
</header>
<script>
const btn = document.getElementById('menuBtn');
const nav = document.getElementById('site-nav');
btn.addEventListener('click', function () {
const open = nav.classList.toggle('open');
btn.setAttribute('aria-expanded', String(open));
});
</script>
Try it Yourself »
Step 4: Hero Section
Use spacing, clear hierarchy, and a strong call to action.
Example
Hero styles:
.hero {
padding: clamp(40px, 8vw, 96px) 0;
}
.lead {
color: var(--muted);
max-width: 60ch;
}
.cta {
display: inline-block;
margin-top: var(--space-4);
background: var(--brand);
color: #09333b;
padding: 12px 18px;
border-radius: var(--radius);
border: 1px solid #155e67;
transition: transform 0.2s, background 0.2s;
}
.cta:hover, .cta:focus {
background: var(--brand-strong);
transform: translateY(-2px);
}
Try it Yourself »
Step 5: Project Cards
Showcase projects in a responsive grid with cards and clear links.
Example
Card grid and card styles:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-4);
}
.card {
background: linear-gradient(180deg, #0b1220, #0a0f1a);
border: 1px solid #1f2937;
border-radius: var(--radius);
padding: var(--space-4);
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.card:hover, .card:focus-within {
transform: translateY(-4px);
border-color: #2b3a52;
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.card h3 {
margin-bottom: var(--space-2);
}
.card p {
color: var(--muted);
}
.card .actions {
margin-top: var(--space-3);
display: flex;
gap: var(--space-2);
}
.btn {
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #374151;
background: #0b1220;
color: var(--text);
transition: background 0.2s, border-color 0.2s;
}
.btn:hover, .btn:focus {
background: #101827;
border-color: #4b5563;
}
Try it Yourself »
Step 6: About and Contact Sections
Keep paragraphs readable with a max width. Make contact links obvious.
Example
Section spacing and readable text width:
section {
padding: 56px 0;
border-top: 1px solid #1f2937;
}
.prose {
max-width: 65ch;
}
.contact a {
display: inline-block;
margin-right: var(--space-3);
}
Try it Yourself »
Step 7: Footer
Use subtle contrast and small, readable type.
Example
Footer styles:
.site-footer {
padding: var(--space-4) 0;
color: var(--muted);
border-top: 1px solid #1f2937;
}
.site-footer a {
color: var(--muted);
}
.site-footer a:hover {
color: var(--text);
}
Try it Yourself »
Step 8: Responsive Tweaks
Adjust spacing and layout for small screens. Collapse grids and increase tap targets.
Example
Media query for small screens:
@media (max-width: 600px) {
:root {
--space-4: 20px;
--space-5: 28px;
}
.hero {
text-align: center;
}
.cta {
width: 100%;
text-align: center;
}
}
Try it Yourself »
Step 9: Focus, Hover, and Motion
Provide keyboard focus outlines and tasteful transitions.
Example
Interactive states and reduced motion support:
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
* {
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
Try it Yourself »
Step 10: Accessibility and Performance
- Ensure color contrast ratio is at least 4.5:1 for normal text.
- Use semantic HTML for headings, lists, nav, and buttons.
- Add
alttext for images that convey meaning. - Compress images and prefer modern formats when possible.
- Load only the fonts and scripts you need.
Project Checklist
- Consistent color palette using CSS variables.
- Clear typography scale and readable line lengths.
- Responsive layout for mobile, tablet, and desktop.
- Styled navigation with working mobile toggle.
- Hero section with a primary call to action.
- Project cards with hover/focus states and links.
- Accessible focus outlines and adequate contrast.
- Basic performance hygiene (compressed images, minimal bloat).
Example Page Assembly
Example
Putting sections together:
<header class='site-header'>...</header>
<main class='container'>
<section class='hero' id='home'>
<h1>Hi, I'm Your Name</h1>
<p class='lead'>I build clean, accessible websites.</p>
<a class='cta' href='#projects'>See my work</a>
</section>
<section id='projects'>
<h2>Projects</h2>
<div class='grid'>
<article class='card'>
<h3>Project One</h3>
<p>Short description of what you built.</p>
<div class='actions'>
<a class='btn' href='#'>Live</a>
<a class='btn' href='#'>Code</a>
</div>
</article>
<!-- Repeat cards -->
</div>
</section>
<section id='about'>
<h2>About</h2>
<p class='prose'>A short bio about you and your interests.</p>
</section>
<section id='contact' class='contact'>
<h2>Contact</h2>
<a href='mailto:you@example.com'>Email</a>
<a href='https://www.linkedin.com/'>LinkedIn</a>
</section>
</main>
<footer class='site-footer container'>© 2025 Your Name</footer>
Try it Yourself »
Submit Your Project
- Link to your live page and repository.
- List the design choices you made: palette, fonts, spacing, and layout decisions.
- Provide 2 screenshots: desktop and mobile width.
Next, you will start adding interactivity with JavaScript.
Next » Introduction to JavaScript
