Dersler·Gençler · Orta
HTML & CSS ile Portfolyo Sitesi Oluşturma
İngilizce ders adı: HTML & CSS: Build a Portfolio Website
Bu dersle flexbox, grid ve responsive tasarım prensiplerini öğrenerek kendi portfolyo web siteni baştan sona kendin yap.
Gençler için özel olarak tasarlanmış bu HTML & CSS dersinde, modern web tasarımının temel taşlarını öğreneceksin. Kendi portfolyo siteni adım adım oluştururken, web sitelerinin farklı cihazlarda nasıl düzgün göründüğünü sağlayan responsive tasarımın inceliklerini keşfedeceksin.
Bu derste ne öğreneceksiniz
- Flexbox kullanarak etkili navigasyon barları tasarlarsın.
- CSS Grid ile profesyonel kart düzenleri oluşturursun.
- Web siteni tüm ekran boyutlarına uygun hale getirirsin.
- Hover efektleri gibi interaktif özellikler eklersin.
Yaklaşık 35 dakika
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. |
What is Responsive Design?
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.