Frontend Becerilerinizi Geliştirecek HTML ve CSS Projeleri

Frontend'e yeni başlayan hemen hemen herkes bu duvara çarpar.

Eğitim videoları bir süre sonra birbirine karışmaya başlar. div nedir bilirsiniz. Başkasının yazdığı stil dosyasına şöyle bir göz ucuyla bakıp ne olup bittiğini anlayabilirsiniz. Üç tane Flexbox videosu mu? İzlendi. Ama boş bir index.html dosyası açıp o imleç karşınızda yanıp sönmeye başladığında, beyniniz adeta durur.

Çözüm yeni bir eğitim videosu izlemek değil. Bir proje geliştirmektir.

Bir hafta sonu bitirebileceğiniz kadar küçük, arkadaşınıza gösterebileceğiniz somut bir sonuç veren bir şey. HTML ve CSS, ancak onları bizzat yazdığınızda, bozduğunuzda ve sonra geri dönüp bozduğunuz şeyi düzelttiğinizde aklınızda kalır.

HTML ve CSS serileri, Coddy platformundaki en aktif seriler arasındadır. Ve frontend kodlamada kendilerine güvenecek kadar uzun süre devam edenlerin ortak bir özelliği vardır: Düzenli olarak küçük projeler bitirmek. "Yeterince öğrenene" kadar beklemezler. İnşa ederler, duvara toslarlar, araştırırlar ve yollarına devam ederler.

Bu rehber size, tek sayfalık bir siteden sadece CSS ile yapılan bir görsel kaydırıcıya (carousel) kadar, zorluk derecesine göre sıralanmış 18 HTML ve CSS projesi sunuyor. Hepsini yapmanız gerekmiyor. Bu hafta sonu birini seçin ve bitirin.

Projeler Neden Eğitim Videolarından Daha Etkilidir?

Kod okumak insana üretkenmiş hissi verir. Ama aslında öyle değildir.

Bir ay boyunca YouTube videoları izleseniz bile basit bir açılış sayfası (landing page) hazırlayamayabilirsiniz; çünkü izlemek ve yazmak farklı kasları çalıştırır. Özellikle CSS'in akılda kalması için bizzat yazılması gerekir; çünkü CSS'in büyük bir kısmı, ancak deneme yanılma yoluyla öğrenebileceğiniz ince ayarlardan ibarettir.

Projeler sizi araştırma yapmaya da zorlar! Frontend geliştirme işinin yaklaşık %30'u kod yazmak, %70'i ise MDN'de arama yapmak, dokümanları okumak ve bir elementin neden iki piksel kaydığını anlamaya çalışmaktır. Eğitim videoları tüm bu süreci sizden gizler.

Projelerin size kazandırdığı bir diğer şey de somut bir sonuçtur. "HTML ve CSS öğreniyorum" demek kulağa pek tatmin edici gelmeyebilir. Ama "Şöyle bir restoran sayfası yaptım, işte linki" demek, bir arkadaşınıza gönderebileceğiniz somut bir şeydir. İşte o "bunu ben yaptım" hissi, insanları zor zamanlarda motive eden şeydir.

Nasıl Kurulum Yapılır? (Zaten Yaptıysanız Geçin)

HTML ve CSS için karmaşık kurulumlara gerek yok. Sadece şu üç şey yeterli:

1. Bir metin editörü. Çoğu kişi için varsayılan tercih VS Code'dur. Ücretsizdir ve birkaç proje yaptıktan sonra yüklemeye değer harika CSS eklentileri vardır.
2. Bir tarayıcı. Halihazırda hangisini kullanıyorsanız o olur. Geliştirici araçları (sağ tıklayıp İncele veya Inspect demek), düzen (layout) sorunlarını nasıl çözeceğinizi gösterir. Bu alışkanlığı erkenden edinin.
3. Her proje için bir klasör. Başlangıçta sadece index.html ve style.css yeterli! İlk projenizde derleme araçları (build tools), framework'ler veya "en iyi pratikler" (best practices) hakkında endişelenmeyin.

Kurulum adımını atlamak isterseniz, Coddy'nin HTML dersi ve CSS dersi tarayıcıda sıfır kurulumla çalışır. Yeni bir proje başlatmadan belirli bir konuyu pratik etmek istediğinizde oldukça kullanışlıdır. Aksi takdirde, bir klasör ve bir metin editörü fazlasıyla yeterlidir.

Başlangıç Seviyesi HTML ve CSS Projeleri

Bu beş proje temel unsurları kullanır: başlıklar, paragraflar, görseller, listeler, bağlantılar ve biraz renk ile boşluklandırma. Birkaç HTML ve CSS dersinden sonra, bunlardan herhangi biri birkaç saat içinde tamamlanabilir.

1. Saygı Duruşu (Tribute) Sayfası

Hayran olduğunuz birini seçin (bir müzisyen, yazar, sporcu veya bilim insanı) ve tek sayfalık bir saygı duruşu sitesi hazırlayın. Büyük bir başlık, ana görsel (hero image), kısa bir biyografi, hayatından önemli anların yer aldığı bir zaman çizelgesi ve daha fazlasını öğrenmek için bağlantıların bulunduğu bir liste. Projenin tamamında başlıklar, paragraflar, görseller, listeler ve tipografi ile boşluklandırma için temel CSS kullanılır. Klasik bir ilk HTML projesi olmasının bir sebebi var: Buradaki hiçbir şey zor değil.

2. Kişisel "Hakkımda" Sayfası

Kendinizi tanıtan tek sayfalık kişisel bir site. Bir fotoğraf, kısa bir biyografi, ilgi duyduğunuz şeylerin listesi ve sizinle iletişime geçilebilecek bir bölüm. Eğer bir yerde canlıya alırsanız (deploy ederseniz) ekstra puan! GitHub Pages ücretsizdir ve kurulumu sadece birkaç dakika sürer. Artık paylaşabileceğiniz gerçek bir bağlantınız var.

3. Yemek Tarifi Kartı

Yemeğin ana görseli, malzeme listesi, numaralandırılmış adımlar ve küçük bir detay kutusunda gösterilen hazırlama süresini içeren bir tarif kartı. Bu proje size sıralı ve sırasız listeleri, görsel boyutlandırmayı ve içerik açısından yoğun bir sayfanın karmaşık görünmek yerine nasıl düzenli hissettireceğini öğretir.

4. İletişim Formu Sayfası

Form içeren bir sayfa: isim, e-posta, mesaj ve gönder butonu. Formun henüz bir yere veri göndermesi gerekmiyor, o kısım JavaScript'in işi. Buradaki amaç, HTML form elemanlarını (input, textarea, label, button) öğrenmek ve tarayıcının varsayılan çirkin görünümünden kurtulacak şekilde onları stilize etmektir. Formlar hemen hemen her frontend projesinde karşınıza çıkar, bu yüzden şimdiden onlara alışmak gelecekte çok işinize yarayacaktır.

5. Basit Restoran Menüsü

Hayali bir restoran için tek sayfalık bir menü. Kategoriler (başlangıçlar, ana yemekler, tatlılar) ve her yemeğin adı ile kısa bir açıklaması. Üst kısma şık bir banner ve alt kısma çalışma saatlerini içeren küçük bir footer ekleyin. İçeriği bölümlere ayırma, tekrarlayan düzenler oluşturma ve uyumlu bir renk şeması seçme konusunda harika bir pratiktir.

Orta Seviye Projeler (Flexbox, Grid, Düzenler)

Artık öğeleri düzgün bir şekilde yerleştiriyor, birden fazla bölümü bir arada yönetiyor ve internette görebileceğiniz gerçek bir web sayfasına benzeyen sonuçlar elde ediyorsunuz. Bu projelerin çoğu, tam da geliştirmek istediğiniz kas olan Flexbox veya CSS Grid'e dayanıyor.

6. Hayali Bir Ürün İçin Açılış Sayfası (Landing Page)

Bir ürün seçin (bir uygulama, SaaS aracı, mum şirketi veya herhangi bir şey) ve ana sayfasında göreceğiniz türden bir açılış sayfası oluşturun. Başlık ve harekete geçirici mesaj (call-to-action) butonu içeren bir ana bölüm (hero). Altında üç özellikli bir bölüm. Müşteri yorumları (testimonials). Bağlantıların olduğu bir footer. Bu projenin tamamı Flexbox ve Grid için harika bir antrenman olmasının yanı sıra, boşluklandırma ve görsel hiyerarşi konusunda da iyi bir derstir.

7. Portfolyo Sitesi

Şu anki "çalışmalarınız" sadece iki saygı duruşu sayfası ve bir yemek tarifi kartından ibaret olsa bile, çalışmalarınızı sergileyen çok bölümlü bir sayfa. Menü içeren bir header, ana bölüm (hero), projeler ızgarası (grid), hakkımda bölümü ve iletişim bölümü. Proje düzeni için Grid, menü ve hero bölümleri için Flexbox kullanın.

Henüz bir portfolyoya ihtiyacınız olmadığını düşünseniz bile oldukça faydalı bir projedir. Herhangi bir işe başvurmaya veya freelance çalışmaya başladığınız an, elinizin altında hazır bir portfolyonuz olacaktır.

8. Fiyatlandırma Tablosu

Yan yana dizilmiş üç fiyatlandırma seçeneği; her biri kendi kartı içinde bir isim, özellik listesi ve CTA butonu barındırsın. Ortadakine "En Popüler" vurgusu ekleyin. Fiyatlandırma tabloları basit görünür ama aslında oldukça uğraştırıcıdır: eşit yükseklikteki kartlar, hizalanmış listeler, butonların hover (üzerine gelme) durumları... Harika bir Flexbox pratiği!

9. Blog Ana Sayfası

Bir blog dizini: menü ve arama çubuğu içeren bir header, en üstte öne çıkan bir makale, altında son yazılardan oluşan bir ızgara (grid), kategoriler ve son yorumların yer aldığı bir yan menü (sidebar) ve en altta bir footer. Bu proje, gerçek hayattaki frontend geliştirmeye çok daha yakın olan, birden fazla bölgeye sahip bir içerik düzenini yönetmeyi öğretir.

10. Giriş Yap ve Kaydol Sayfası

Biri giriş yapma, diğeri kaydolma için tasarlanmış, ortalanmış bir form, marka logolu bir header ve aralarında geçiş yapmayı sağlayan bağlantılar içeren iki ilişkili sayfa. Buradaki zorluk, aşırıya kaçmadan şık görünen bir şey tasarlamaktır. En iyi giriş sayfaları, iyi hizalanmış ve kullanıcının beklediğinden biraz daha estetik olanlardır. Değeri bilinmeyen harika bir tasarım zevki egzersizidir.

11. Kontrol Paneli (Dashboard) Taslağı

Statik bir kontrol paneli düzeni: solda dikey menü (sidebar), üstte kullanıcı bilgilerini içeren bir bar, ana içerik alanında birkaç istatistik kartı, bir grafik alanı ve son aktiviteler listesi. Henüz etkileşim yok. Bu tamamen bir düzen (layout) projesidir. İşin büyük kısmını Grid üstlenir. Projenin sonunda CSS Grid'in neden var olduğunu ve onu henüz denememiş kişilerin düzenler hakkında neden sürekli şikayet ettiğini çok iyi anlayacaksınız.

CSS Animasyon ve Efekt Projeleri

Şimdi işin eğlenceli kısmına geliyoruz. Kapsamı daha küçük ama CSS ağırlıklı projeler. Geçişleri (transitions), keyframe'leri, transform'ları ve :hover ile :focus gibi sözde sınıfları (pseudo-classes) öğrenmek için harikadır.

12. Yükleniyor Simgesi (Loading Spinner)

Sadece CSS kullanılarak yapılmış bir yükleniyor simgesi. Birkaç varyasyon deneyin: dönen bir halka, zıplayan üç nokta, nabız gibi atan bir daire veya sürekli dolan bir ilerleme çubuğu. Her biri yaklaşık 15 satır CSS kodundan oluşur ve size @keyframes, animation ve transform konularını öğretir.

13. Hover Efektli Görsel Galerisi

Üzerine gelindiğinde (hover) yumuşak bir geçişle başlığı ortaya çıkaran bir fotoğraf ızgarası. Farklı efektler deneyin: kayan bir katman (overlay), görselin yakınlaşması (zoom) veya yavaşça kaybolan bir renk filtresi. Bu proje, çoğu insanın kafasında transition kavramının tam olarak oturduğu yerdir. Ayrıca position: absolute ile elementleri nasıl üst üste katmanlandıracağınızı da öğrenirsiniz.

14. Animasyonlu Menü Çubuğu (Navigation Bar)

Solda bir logo ve sağda menü öğelerinin yer aldığı, menü öğelerinin üzerine gelindiğinde kayan bir animasyonla altlarının çizildiği ve aktif sayfanın altının çizili kaldığı bir menü çubuğu. Mobil cihazlarda menü, açılır bir liste açan bir hamburger ikonuna dönüşmeli. Hayatınız boyunca kullanacağınız bir şablon: etkileşimli öğeler üzerinde animasyonlu durumlar ve farklı ekran boyutlarına uyum sağlayan (responsive) davranışlar.

15. CSS Kart Döndürme Efekti

Üzerine gelindiğinde arkasındaki şeyi (bir alıntı, bir tanım veya ekstra bir detay) göstermek için ters dönen bir kart. Sık sık kullanmadığınız ama ilk kez çalıştıklarında sihirli hissettiren iki CSS özelliği olan transform: rotateY ve backface-visibility özelliklerini kullanır. Hızlı biten ama özgüveni büyük ölçüde artıran bir projedir.

16. Sadece CSS ile Görsel Kaydırıcı (Slider)

Tamamen CSS ile oluşturulmuş, önceki/sonraki kontrollerine sahip, yatay olarak kayan bir görsel karusel. JavaScript yok. İşin sırrı, ekran dışında gizlenmiş radyo butonlarını ve hangi görselin görüneceğini değiştirmek için :checked seçicisini kullanmaktır. Zekice bir yöntemdir ve JavaScript'e başvurmadan önce sadece CSS ile neler yapabileceğinizi gösterir. Normalde JavaScript ile yapacak olsanız bile bir kez denemeye değer.

İleri Seviye HTML ve CSS Projeleri

Bu son birkaç proje, temel konular artık rutin gelmeye başladığında ve gerçek bir meydan okuma aradığınızda idealdir. Hala tamamen HTML ve CSS (JavaScript gerekmez) kullanırlar ancak düzen, hassasiyet ve sabır konularında sınırlarınızı zorlarlar.

17. Ünlü Bir Ana Sayfayı Klonlayın

Gerçek bir site seçin (Netflix ana sayfası, Spotify açılış sayfası veya belirli bir cihaz için Apple ürün sayfası) ve sitenin görünen kısmını HTML ve CSS ile olabildiğince aslına uygun şekilde yeniden oluşturun. Fonksiyonel hale getirmenize gerek yok, sadece düzeni, tipografiyi, boşlukları ve renkleri eşleştirin.

O padding değerini tam olarak nasıl ayarladıklarını merak ederek saatler harcayacak, ardından grid'lerin neden bu şekilde ölçüledildiğini öğrenecek ve ziyaret ettiğiniz her sitedeki düzen kararlarını fark etmeye başlayacaksınız. Frontend geliştiricileri yıllardır bu tarz egzersizler yapmaktan bahsederler.

18. CSS Sanatı (CSS Art)

Sadece div elementlerini ve CSS kullanarak bir şeyler çizin. İnsanlar bu yöntemle şaşırtıcı derecede detaylı çizimler yaptılar: çizgi film karakterleri, manzaralar, hayvanlar ve hatta portreler. Basit bir şeyle başlayın: bir fincan kahve, gülen bir yüz veya basit bir robot.

Deneyene kadar kulağa saçma gelebilir. Ancak denediğinizde; position, border-radius, box-shadow, gradyanlar ve transform konularında harika bir derse dönüşür. Sırf bir dikdörtgenin içine daire çizmeye çalışarak bile, projenin sonunda CSS'i çoğu yeni başlayanın asla ulaşamayacağı bir seviyede anlamış olursunuz.

Coddy Bu Sürecin Neresinde?

Coddy'nin HTML dersi ve CSS dersi , "Bunu öğrenmek istiyorum" ile "Bir proje geliştirebilirim" arasındaki boşluğu doldurmak için tasarlanmıştır. Her ders yaklaşık beş dakika sürer, tarayıcıda gerçek kod yazarsınız ve margin: auto ifadesinin elementinizi neden dikey olarak ortalamadığı gibi bir konuda takıldığınızda, ders içi yapay zeka asistanı Bugsy size yardımcı olmak için oradadır.

Tüm yapı günlük pratik üzerine kuruludur. İnsanların her sabah dil uygulamalarını açmasını sağlayan o alışkanlık modelinin kodlamaya uyarlanmış hali: Şurada beş dakika, burada beş dakika. Kendi hızınızda ilerlediğiniz bir kursu %30 civarında bıraktıysanız, muhtemelse eksik olan şey bu kısa ve öz (bite-sized) formattı.

HTML ve CSS'in her dersi, kurulum gerektirmeden tamamen ücretsiz plandadır. Bu durum insanları şaşırtıyor. Flexbox öğrenmenin tam ortasında bir ödeme duvarıyla karşılaşmayacaksınız!

Yardımcı Olacak Birkaç Alışkanlık

Bir proje seçmeden önce, şaşırtıcı derecede fark yaratan üç küçük şey:

Tarayıcı geliştirici araçlarını kullanın. Herhangi bir elemente sağ tıklayın, İncele (Inspect) deyin ve stiller paneline bakın. Ne olacağını görmek için CSS'i tarayıcıda canlı olarak düzenleyebilirsiniz. Kullanacağınız en iyi hata ayıklama (debugging) aracıdır ve zaten her tarayıcıda ücretsiz olarak bulunur.

Önce mobil odaklı (mobile-first) geliştirin. CSS yazmaya küçük ekranlar için başlayın, ardından daha büyük ekranlarda iyi görünmesi için medya sorguları (media queries) ekleyin. Bunun tersini yapmak daha zordur. Modern frontend kodlarının çoğu bu yöntemi kullanır, bu yüzden şimdiden bu alışkanlığı edinmek gelecekte işinizi kolaylaştıracaktır.

Önce çirkin versiyonu yayınlayın. Sayfayı geçici içerikler (placeholder) ve kaba taslak stillerle çalışır hale getirin. İnce ayarları sonra yaparsınız. Birçok yeni başlayanın düştüğü hata, mükemmel butonu yapmak için üç saat harcayıp ardından sayfa düzeninin aslında çalışmadığını fark etmektir; bu durumda her şeyi yeniden yapmak gerekir.

Sırada Ne Var?

Bir projeyi bitirdiğinizde bir sonraki adımınızın ne olacağı kafanızda netleşiyorsa, bu iyiye işarettir. Hazırsınız demektir!

Bu listeden bir sonrakini seçin ve başlayın. Kendinizi "yeterince hazır" hissedene kadar beklemeyin, çünkü o his asla gelmez. Sadece bir gün bakarsınız ki altı şey inşa etmişsiniz ve yedincisi de yapılabilir görünüyor.

Bir sonraki adımda ne seçeceğinizi bilmiyorsanız, gözünüzü hafifçe korkutan projeye yönelin. Beceri sıçramaları konfor alanının tam ortasında değil, sınırlarında gerçekleşir.

Ve eğer temel konularda duvara tosluyorsanız (seçiciler çalışmıyor, düzenler çöküyor, Flexbox hiçbir şey yapmıyor gibi), bir süreliğine projeden uzaklaşın ve eksikleri kapatmak için odaklanmış derslere göz atın.

Coddy'nin HTML and CSS serileri tam olarak bunun için tasarlanmıştır: Takıldığınız kavram üzerinde kısa, hedef odaklı pratikler yapın ve ardından projenize geri dönün.