CSS Battle — Target #1 — Simply Square
Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo
Merhaba arkadaşlar. Yeni bir seri ile karşınızdayım. Bu serimizde cssbattle.dev sitesindeki challenge’ları nasıl çözdüğümü, detayları ile beraber göstermek istiyorum. Bu çözümlerimin kesinlikle en ideal çözüm olduğunu iddia etmiyorum :) Sadece kendi çözümlerimi, sizlere detayları ile beraber göstermek istiyorum. Dilerseniz sizde kendi çözümlerinizi benimle paylaşabilirsiniz :)
Hadi başlayalım!
Target #1 — Simple Square
Challenge’ın linki:
Hedeflenen Tasarım:
Kullanacağımız renkler:
Serinin ilk yazısına çok basit bir tasarım ile başlıyor olacağız. Adım adım giderek neler yapacağımıza bakalım.
- Öncelikle body’nin background özelliğine #5d3a3a rengini vererek arka plan rengimizi belirleyelim.
Şimdi kutumuzu oluşturalım.
- Bir tane div elemanı oluşturduk.
- div’in width ve height özelliklerine değerlerine 200px verdik.
- div’in background özelliğine de #b5e0ba rengini verdik.
- body’de default olarak 8px margin değeri bulunmaktadır.
margin: Bir HTML elemanının etrafına boşluk vermek için kullanılır.
margin değerinden dolayı, oluşturduğumuz kutu, köşeden uzak kalmış durumdadır. Köşeye tam sıfırlamak için margin değerini 0'a eşitleyelim.
Böylelikle ilk challenge’ımızı tamamlamış olduk!
Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo
Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)
İletişim kanalları: Twitter — LinkedIn — Mail
Bir sonraki challenge’ta görüşmek üzere!
