Where to start
In two hours you build the same screen twice: first in Figma, then in code. This is a paid taster — it exists so you can feel which side you enjoy doing with your hands, and choose your main course knowing why.
What you will be able to do
3 modules, one project
01 What a screen is made of2 lessons · 34 minOpen
We take one finished screen apart and look at where the border between layout and code runs. No tools yet — only observation and the vocabulary you will need later.
02 As a designer: the screen in Figma3 lessons · 46 min
We open Figma and build a product card: frames, auto layout, spacing and colour. By the end of the module you have your own layout, not one repeated after the teacher.
03 As a developer: the same screen in code3 lessons · 40 min
We build the same layout in the browser with HTML and CSS, break it and fix it. At the end we compare both experiences and choose which main course to take.
What you get
A frame with ready text and images, so you spend no time on preparation and build the card straight away.
A folder with empty index.html and style.css and instructions on opening them in an editor and in the browser.
The final layout and the final code of the card, so you can compare them with your own result and find where you drifted.
A table: what each of the four main courses covers, what you need to know beforehand and which tasks you will be able to solve.
The whole first module is open
Watch the lessons of the first module and the first task. If the format does not suit you, you have lost nothing.