1
Course orientation · about 4 min
Why learn CSS?
Understand what CSS is, where it is used and what you could build or become with it.
CSS complete beginner course
Your full CSS curriculum.
Design responsive, readable interfaces with a reliable visual system. Complete each practical lesson in order and finish with a real portfolio project.
12 guided steps2 learning hours1 final project
Module 1
Start with the reason
Module 2
Control the visual language
2
Practical lesson · about 7 min
Choose elements with selectors
Selectors target the exact content you want to style.
3
Practical lesson · about 9 min
Use colour, type and readable units
A strong interface begins with contrast and comfortable typography.
Module 3
Space and shape
4
Practical lesson · about 9 min
Understand the box model
Every element is a box made from content, padding, border and margin.
5
Practical lesson · about 10 min
Create reusable buttons and cards
Reusable classes keep a product consistent.
6
Practical lesson · about 9 min
Control states and interaction feedback
Hover and focus styles show people what they can use.
Module 4
Build layouts
7
Practical lesson · about 10 min
Arrange content with Flexbox
Flexbox is ideal for rows, navigation and one-dimensional layouts.
8
Practical lesson · about 11 min
Create page grids
Grid controls rows and columns for cards and full page areas.
9
Practical lesson · about 9 min
Position important elements
Positioning places badges, menus and overlays relative to a chosen box.
Module 5
Adapt to every screen
10
Practical lesson · about 12 min
Make layouts responsive
Media queries adapt a design when space becomes limited.
11
Practical lesson · about 10 min
Use variables for a design system
Custom properties keep colours and spacing consistent.
Module 6
Build the project
12
Final course project · about 20 min
Finish a responsive portfolio theme
Combine tokens, layout, components and responsive rules into one polished system.
Final outcome
Turn a plain portfolio into a polished, responsive website with reusable components.
Complete the curriculum in order, practise each task and adapt the final project so it is genuinely yours.
NA
Want Nathaniel beside you on the journey?
View guided learning options →Choose a private lesson for personalised guidance and feedback.