CSS ile Sayfa Tasarımı ve Responsive Uyum

Web programcılığı stajımın ikinci haftasında, HTML ile oluşturduğum basit sayfaları güzelleştirmek için CSS (Cascading Style Sheets) ile tanıştım. CSS sayesinde sayfaları renklendirdim, yazı tiplerini değiştirdim ve sayfa düzenini çok daha kullanıcı dostu hale getirdim.

CSS Nedir?

CSS, HTML öğelerine stil kazandırmak için kullanılan bir tasarım dilidir. HTML sayfaları yapısal anlamda bilgiyi taşır, CSS ise bu bilgiyi görsel olarak düzenler.

İlk CSS Denemem

İlk olarak HTML sayfama satır içi (inline) stil verdim:


<p style="color:blue; font-size:18px;">Merhaba, bu yazı mavi renkte.</p>

Daha sonra sayfa başlığına harici CSS dosyası bağlamayı öğrendim:


<link rel="stylesheet" href="style.css">

CSS ile Öğrendiğim Temel Kavramlar

color, background-color: Renk ayarları
font-family, font-size: Yazı tipi ve boyutu
padding, margin: İç ve dış boşluklar
border: Kenarlık çizimi
display, flex, grid: Yerleşim sistemleri

Responsive Tasarım Nedir?

Responsive tasarım, bir web sitesinin farklı ekran boyutlarında düzgün görünmesini sağlayan tekniktir. Bu amaçla media query kullanımı öğrenmem çok önemliydi.


@media screen and (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

Bu kodla sayfamın arka plan rengi mobilde farklı, masaüstünde farklı olacak şekilde ayarlandı.

Mobil Uyumlu Sayfa Tasarımı

Mobil cihazlarda düzgün görüntü almak için aşağıdaki adımları öğrendim:

Sayfa başına viewport etiketi eklemek
Flexbox ve Grid sistemlerini öğrenmek
Yüzdelik değerler (%, vw, vh) kullanmak


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Uygulamalı Proje

Bir “Hakkımızda” sayfası oluşturarak, tüm öğrendiğim CSS kurallarını uyguladım. Arka plan rengini, yazı tipini ve kutu modellerini farklılaştırarak sade ama şık bir sayfa yaptım.

Karşılaştığım Zorluklar

İlk başta margin ve padding farkını karıştırdım
Tarayıcılar arası görünüm farklılıklarını çözmek zaman aldı
Responsive ayarları doğru çalışmayınca çok test yapmam gerekti

Genel Değerlendirme

Stajımın bu haftasında görselliğin kullanıcı deneyimindeki yerini çok net bir şekilde anladım. CSS ile bir sayfanın sade veya profesyonel görünmesi tamamen benim elimdeydi. Artık mobil uyumlu, düzenli bir sayfa yapısına sahip siteler oluşturabiliyorum.