Case study
Back to projectsAdam Keyes | Faithful layout from Figma
CSS layout exercise from the Conquer Blocks master: translating a Figma design into clean and responsive code.
Starting point
The project before the code
Context
Layout exercise from the Conquer Blocks master. The goal was to take a Figma design of a fictional portfolio and bring it to code while respecting every detail of the original design.
Goal
Demonstrate the ability to build a layout faithful to the original design, applying CSS best practices, modular Sass architecture and responsive design.
An exercise that looks simple
In the Conquer Blocks master we were given a Figma design for a fictional portfolio and the goal was clear: bring it to code while respecting every detail. Typography, spacing, optimised images.
It sounds straightforward when you describe it like that, but the reality is that building a layout faithfully requires far more attention to detail than it seems. Every CSS decision matters.
How I built it
I set the project up with Vite and organised all styles using the Sass 7-1 architecture: variables, mixins, functions and each component in its own file. Custom typography with Space Grotesk, smooth scroll animations with Lenis and frontend contact form validation.
The design is fully responsive and accessible, built to work just as well on mobile as on desktop.
What it taught me
These kinds of exercises train you for what you actually need in real projects: being able to take a design and bring it to code without the result drifting from the original intent. It sounds basic, but it’s a skill that makes a real difference.
What changed
Lessons learned
The Sass 7-1 pattern forces you to think about code organisation before writing a single line. That pays off later when the project grows.
Building a layout that is faithful to the original design seems like a rigid exercise, but it trains your eye to spot inconsistencies that do affect the end user.