Lessons·teens · intermediate
HTML & CSS: Build a Portfolio Website
Learn flexbox, grid, and responsive design by building a real portfolio page.
About 35 minutes
Layout & Design Terms
| English | Türkçe |
|---|---|
| responsiveA responsive site works on mobile and desktop. | duyarlıResponsive bir site hem mobilde hem de masaüstünde çalışır. |
| flexboxFlexbox arranges items in a row or column. | esnek kutuFlexbox, öğeleri satır veya sütun halinde düzenler. |
| gridCSS Grid creates 2D layouts with rows and columns. | ızgaraCSS Grid, satır ve sütunlarla 2 boyutlu düzenler oluşturur. |
| media queryA media query changes styles at different screen sizes. | medya sorgusuMedia query, farklı ekran boyutlarında stilleri değiştirir. |
| viewportThe viewport is the visible area of the browser. | görünüm alanıViewport, tarayıcının ekranda görünen alanıdır. |
| layoutA good layout makes content easy to read. | düzenİyi bir düzen, içeriğin okunmasını kolaylaştırır. |
| containerA container wraps content with max-width. | kapsayıcıContainer, içeriği belirli bir maksimum genişlikle sarmalar. |
| marginMargin is the space outside an element. | dış boşlukMargin, bir öğenin dışındaki boşluktur. |
| paddingPadding is the space inside an element. | iç boşlukPadding, bir öğenin içindeki boşluktur. |
| gradientA gradient blends two colours together. | gradyanGradient, iki rengi birbiriyle harmanlar. |
What is Responsive Design?
Responsive design means your website looks good on every screen — from a tiny phone to a wide desktop monitor.
The key tools are:
• Flexbox — arrange items in one direction (row or column)
• CSS Grid — create 2D layouts with rows AND columns
• Media queries — change styles at different screen widths
Let's build a portfolio page using all three!
Challenge 1: Flexbox Navigation Bar
Challenge 2: Gradient Hero Section
Challenge 3: CSS Grid Card Layout
Challenge 4: Hover Effects
Challenge 5: Make It Responsive
Knowledge Check
Now actually practise it
Reading a lesson is the easy half. A free account unlocks the parts that make it stick — listen to every word in a British accent, and use it in a live conversation with James. Your progress is saved and the words come back for review before you forget them.