Complete capstone project integrating all CSS fundamentals concepts. Build a professional, responsive portfolio website from scratch.
This capstone lesson brings together everything you've learned throughout the CSS Fundamentals course. You'll build a complete, professional portfolio website that showcases not just your projects, but your mastery of CSS itself.
The website will integrate all major concepts from the course: semantic HTML structure, responsive design with CSS Grid and Flexbox, custom properties for theming, advanced selectors and pseudo-elements, smooth animations and transitions, cross-browser compatibility, and professional CSS architecture patterns.
By the end of this lesson, you'll have a production-ready website that demonstrates your CSS expertise and serves as both a learning culmination and a professional portfolio piece.
Plan and structure a complete website project using professional development practices and CSS architecture principles.
Project Requirements Analysis:
Technical Requirements:
CSS Architecture (ITCSS + BEM):
Create a fully responsive layout using CSS Grid, Flexbox, and modern CSS techniques.
Mobile-First Approach:
1/* Base mobile styles */
2.portfolio-grid {
3 display: grid;
4 grid-template-columns: 1fr;
5 gap: 2rem;
6}
7
8/* Tablet styles */
9@media (min-width: 768px) {
10 .portfolio-grid {
11 grid-template-columns: repeat(2, 1fr);
12 }
13}
14
15/* Desktop styles */
16@media (min-width: 1024px) {
17 .portfolio-grid {
18 grid-template-columns: repeat(3, 1fr);
19 }
20}Flexible Components:
Add professional polish with advanced CSS features and subtle animations.
CSS Custom Properties:
1:root {
2 --primary-color: #3b82f6;
3 --secondary-color: #1e40af;
4 --text-color: #1f2937;
5 --bg-color: #ffffff;
6 --border-radius: 0.5rem;
7 --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
8}Smooth Animations:
A professional portfolio website integrating all CSS fundamentals: responsive design, modern layout, animations, and accessibility.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Alex Chen - Frontend Developer Portfolio</title>
7 <meta name="description" content="Frontend Developer specializing in modern web technologies, responsive design, and user experience.">
8 <style>
9 /* CSS Custom Properties */
10 :root {
11 --primary-color: #3b82f6;
12 --secondary-color: #1e40af;
13 --text-color: #1f2937;
14 --text-light: #6b7280;
15 --bg-color: #ffffff;
16 --bg-secondary: #f9fafb;
17 --border-color: #e5e7eb;
18 --border-radius: 0.5rem;
19 --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
20 --transition: all 0.3s ease;
21 }
22
23 /* Reset and Base Styles */
24 * {
25 margin: 0;
26 padding: 0;
27 box-sizing: border-box;
28 }
29
30 body {
31 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
32 line-height: 1.6;
33 color: var(--text-color);
34 background-color: var(--bg-color);
35 }
36
37 /* Layout Grid */
38 .container {
39 max-width: 1200px;
40 margin: 0 auto;
41 padding: 0 2rem;
42 }
43
44 /* Header */
45 .header {
46 background: var(--bg-color);
47 box-shadow: var(--shadow);
48 position: sticky;
49 top: 0;
50 z-index: 100;
51 }
52
53 .nav {
54 display: flex;
55 justify-content: space-between;
56 align-items: center;
57 padding: 1rem 0;
58 }
59
60 .logo {
61 font-size: 1.5rem;
62 font-weight: 700;
63 color: var(--primary-color);
64 }
65
66 .nav-links {
67 display: flex;
68 list-style: none;
69 gap: 2rem;
70 }
71
72 .nav-links a {
73 text-decoration: none;
74 color: var(--text-color);
75 font-weight: 500;
76 transition: var(--transition);
77 }
78
79 .nav-links a:hover {
80 color: var(--primary-color);
81 }
82
83 /* Hero Section */
84 .hero {
85 padding: 5rem 0;
86 text-align: center;
87 background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-color) 100%);
88 }
89
90 .hero h1 {
91 font-size: clamp(2.5rem, 5vw, 4rem);
92 font-weight: 900;
93 margin-bottom: 1rem;
94 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
95 -webkit-background-clip: text;
96 -webkit-text-fill-color: transparent;
97 background-clip: text;
98 }
99
100 .hero p {
101 font-size: 1.25rem;
102 color: var(--text-light);
103 max-width: 600px;
104 margin: 0 auto 2rem;
105 }
106
107 .cta-button {
108 display: inline-block;
109 background: var(--primary-color);
110 color: white;
111 padding: 1rem 2rem;
112 border-radius: var(--border-radius);
113 text-decoration: none;
114 font-weight: 600;
115 transition: var(--transition);
116 transform: translateY(0);
117 }
118
119 .cta-button:hover {
120 background: var(--secondary-color);
121 transform: translateY(-2px);
122 box-shadow: 0 8px 15px -3px rgba(59, 130, 246, 0.3);
123 }
124
125 /* Portfolio Grid */
126 .portfolio {
127 padding: 5rem 0;
128 }
129
130 .section-title {
131 text-align: center;
132 font-size: 2.5rem;
133 font-weight: 700;
134 margin-bottom: 3rem;
135 }
136
137 .portfolio-grid {
138 display: grid;
139 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
140 gap: 2rem;
141 }
142
143 .portfolio-card {
144 background: var(--bg-color);
145 border-radius: var(--border-radius);
146 overflow: hidden;
147 box-shadow: var(--shadow);
148 transition: var(--transition);
149 }
150
151 .portfolio-card:hover {
152 transform: translateY(-5px);
153 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
154 }
155
156 .card-image {
157 width: 100%;
158 height: 200px;
159 background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
160 display: flex;
161 align-items: center;
162 justify-content: center;
163 color: white;
164 font-size: 1.5rem;
165 font-weight: 600;
166 }
167
168 .card-content {
169 padding: 1.5rem;
170 }
171
172 .card-title {
173 font-size: 1.25rem;
174 font-weight: 600;
175 margin-bottom: 0.5rem;
176 }
177
178 .card-description {
179 color: var(--text-light);
180 margin-bottom: 1rem;
181 }
182
183 .card-link {
184 color: var(--primary-color);
185 text-decoration: none;
186 font-weight: 600;
187 }
188
189 .card-link:hover {
190 text-decoration: underline;
191 }
192
193 /* Footer */
194 .footer {
195 background: var(--bg-secondary);
196 text-align: center;
197 padding: 3rem 0;
198 border-top: 1px solid var(--border-color);
199 }
200
201 /* Responsive Design */
202 @media (max-width: 768px) {
203 .nav-links {
204 display: none;
205 }
206
207 .hero {
208 padding: 3rem 0;
209 }
210
211 .container {
212 padding: 0 1rem;
213 }
214 }
215
216 /* Animation Classes */
217 @keyframes fadeInUp {
218 from {
219 opacity: 0;
220 transform: translateY(30px);
221 }
222 to {
223 opacity: 1;
224 transform: translateY(0);
225 }
226 }
227
228 .animate-fade-in {
229 animation: fadeInUp 0.6s ease-out;
230 }
231 </style>
232</head>
233<body>
234 <!-- Header -->
235 <header class="header">
236 <div class="container">
237 <nav class="nav">
238 <div class="logo">Alex Chen</div>
239 <ul class="nav-links">
240 <li><a href="#about">About</a></li>
241 <li><a href="#portfolio">Portfolio</a></li>
242 <li><a href="#contact">Contact</a></li>
243 </ul>
244 </nav>
245 </div>
246 </header>
247
248 <!-- Hero Section -->
249 <section class="hero">
250 <div class="container">
251 <h1 class="animate-fade-in">Frontend Developer</h1>
252 <p class="animate-fade-in">I create beautiful, responsive websites with modern CSS and cutting-edge web technologies.</p>
253 <a href="#portfolio" class="cta-button animate-fade-in">View My Work</a>
254 </div>
255 </section>
256
257 <!-- Portfolio Section -->
258 <section id="portfolio" class="portfolio">
259 <div class="container">
260 <h2 class="section-title">Featured Projects</h2>
261 <div class="portfolio-grid">
262 <article class="portfolio-card">
263 <div class="card-image">E-commerce Site</div>
264 <div class="card-content">
265 <h3 class="card-title">Modern E-commerce Platform</h3>
266 <p class="card-description">Responsive online store built with CSS Grid, custom animations, and mobile-first design.</p>
267 <a href="#" class="card-link">View Project →</a>
268 </div>
269 </article>
270 <article class="portfolio-card">
271 <div class="card-image">Dashboard App</div>
272 <div class="card-content">
273 <h3 class="card-title">Analytics Dashboard</h3>
274 <p class="card-description">Interactive dashboard with CSS charts, dark mode theming, and accessibility features.</p>
275 <a href="#" class="card-link">View Project →</a>
276 </div>
277 </article>
278 <article class="portfolio-card">
279 <div class="card-image">Portfolio Site</div>
280 <div class="card-content">
281 <h3 class="card-title">Creative Portfolio</h3>
282 <p class="card-description">Artist portfolio featuring CSS animations, custom properties, and performance optimization.</p>
283 <a href="#" class="card-link">View Project →</a>
284 </div>
285 </article>
286 </div>
287 </div>
288 </section>
289
290 <!-- Footer -->
291 <footer class="footer">
292 <div class="container">
293 <p>© 2024 Alex Chen. Built with CSS Fundamentals mastery. 🎨</p>
294 </div>
295 </footer>
296</body>
297</html>This capstone project integrates all CSS Fundamentals concepts:
🏗️ CSS Architecture:
📱 Responsive Design:
🎨 Modern CSS Features:
♿ Accessibility & Performance:
This project demonstrates professional CSS development skills and creates a portfolio-ready website showcasing your expertise.
🎉 Congratulations! You've completed the CSS Fundamentals course and built a professional portfolio website. You now have mastery over all essential CSS concepts and can confidently tackle any styling challenge.
What's Next?
Your portfolio website is ready to showcase your skills to employers and clients. Keep building, keep learning, and continue pushing the boundaries of what's possible with CSS! 🚀
Your progress is saved in this browser, on this device only.