CSS’e nereden başlasam nasıl devam etsem?

Abi işin mutfağını öğrenip, CSS’e bakıp çıkacaktım. 😉

CSS kimdir?

Günlük hayatımızdan bir örnek verecek olursak, yemeğimizin her bir malzemesini HTML etiketleri(tag) olarak düşünelim. Yemeğimizin olması ve onu tabak da sunmak ise CSS kullanmaktır.

Yemeğimizin malzemeleri olmadan ve yapılmadan yemeğimizi sunamayız. O yüzden CSS öğrenmeye başlarken ön koşul, temel düzeyde HTML(Hyper Text Markup Language) bilgisine sahip olunmasıdır.

CSS(Cascading Style Sheets), ifadesinden oluşturulmuş bir kısaltmadır. Biçimler(style), HTML elemanlarının nasıl görüntüleneceğini tanımlar.
Yani HTML’i kullanarak paragrafları, görselleri, başlıkları, linkleri ve daha fazlasını tanımlayabilir, böylece tarayıcınıza web sitesinin yapısını yorumlatabilirsiniz.

CSS bizi nasıl buldu?

CSS‘e nereden başlayacağım demeden önce son olarak, CSS nereden başladı durumuna isterseniz göz atalım.

HTML ilk çıktığında alt etiket(tag) düşünülmedi;

<h1>Başlık</h1> , <p>Paragraf</p>

şeklindeydi. Daha sonra HTML 3.2 sürümü ile birlikte alt etiketler(tag) üretildi.

<h1 color=”blue” bgcolor=”#ffff”> Başlık </h1>

Bu sefer şöyle bir sıkıntı ortaya çıktı. Çok büyük web sitelerde tasarımcılar büyük sıkıntılar yaşıyordu. Sonradan doğru tag’ı bulup değiştirmek büyük zaman kaybı yaşatıyordu.

HTML 4.0 sürümü ile birlikte CSS yapısı bizi bulmuş oldu. Böylece etiketlere(tag), biçim(style) vermek tek bir CSS dosyası tarafından kontrol altına alınmış oldu. Web sayfasında bir anda birden fazla sayfa değişmiş oldu.

CSS3 sürümü ile web dünyasına çok etkin ve aktif girdi. CSS’in daha önceki sürümleri üzerine geliştirilmiş son sürümdür. Bu sürüm ile birlikte @media-queries, box-shadow, text-shadow, translate, transform, transition gibi birçok özellik gelmiş, artık web siteleri görsel açıdan daha güçlü bir konuma erişmiştir.

Kendinizi test edip yazılım yönününüze bakabilirsiniz

HTML ve CSS kodlamalarını öğrenerek yazılım işine başlamadan önce kendimizi test edebiliriz. HTML ve CSS‘in yazılım dilleri olmadığını belirtmekte fayda var. Bu iki dil dinamik değil statik dillerdir, dolayısıyla HTML ve CSS vesilesi ile bir butona tıklandığında bir işlem yaptıramazsınız. Sadece görsel işlemler yapabilirsiniz.

Eğer web programlama alanında kendinizi geliştirmek istiyorsanız daha fazlasını öğrenmeye ve kazanmaya başlayabilirsiniz. HTML ve CSS web’in temeli olduğu için aynı zamanda teknik yetenekleriniz bir üst seviyeye taşımak için de size temel olacak. Bu dilleri bildiğinizde PHP, Javascript veya Ruby gibi diğer dilleri öğrenmek ve yeni iş fırsatlarına yelken açmak sizin için oldukça kolay olacak.

Tavsiyeler…

Duyduğumu unuturum, gördüğümü hatırlarım, yaptığımı anlarım. Çin Atasözü

Ben HTML ve CSS ile ilk tanıştığımda, HTML dosyalarını Notepad’te açar, kodlarını inceler, değiştirir, kayıt ederdim ve daha sonra yaptığım hangi değişikliğin ne işe yaradığını anlamaya çalışırdım.

CSS kodlaması W3C(World Wide Web Consortium)‘nin belirlediği standartlara sahip olmalıdır. Çünkü standartlara uyulması web sitemizi görsellik olarak, hem de SEO(Search Engine Optimization) dostu olması açısından önem taşımaktadır.

Görsellik olarak iyi bulduğunuz herhangi bir web sitesinin index sayfasını veya sayfalarını birebir CSS kullanarak dizayn etmek.

Mutlaka küçük bir proje çıkarmalıyız. Proje sayesinde bir amacınız olur ve o amaca ulaşmaya çalışarak öğrenebilirsiniz.

CSS framework’lerini kurup incelemek fayda sağlayacaktır. Daha detaylı bir liste istiyorsanız:

Bir sorun ile karşılaştığınızda sorunu Google Amca’ya sorarak çıkan sonuçları, bağlantılardaki anlatımları inceleyecek ve anlayarak uygulamak da kararlı olursanız yeni bir Front-end Developer doğuyor demektir.

Son tavsiyem HTML ve CSS kullanarak kaliteli işler yapmak istiyorsanız, yani iyi bir web tasarımcı olmak istiyorsanız HTML5, CSS3, JQuery ve Photoshop konularında iyi olmanız gerekmektedir.

İşin mutfağının kaynakları

Fatih Hayrioğlu’nun Türkçe kaynaklı kitabını incelemek önemli.
fatihhayrioglu.com/kitap

CSS Tutorial başlığı altındaki her başlığın uygulanarak incelenmesi.
w3schools.com/css/default.asp

Codecademy kendinize bir profil açarak HTML ve CSS ikisini bir arada götürerek çalışabilirsiniz.
codecademy.com/learn/web

W3C(World Wide Web Consortium)’nin sayfasını takip etmekte de fayda var.
w3.org/Style/CSS

Bu yazımızda kısacası CSS mutfağında neler var? ve ortaya neler çıkartabiliriz? dedik. Mutfakta ustalaşmanız yolunda bir adım attırdıysak, bilgimizin zekatını verdik demektir. Elhamdülillah. Her ne işimiz olursa olsun işin mutfağını öğrenmek ve işimizi temiz, severek yapmak bizi her zaman ayrıcalıklı yapacaktır. Esenle kalın. Afiyet Olsun. 🙂