Eğitici Klavye/Fare

Bilgisayarda en iyi şekilde oynanır.

Oyun açılmazsa

Sayfayı yenileyip “Oyna” düğmesine yeniden bas.
Reklam engelleyici kullanıyorsan bu sitede duraklat.
Tarayıcını güncelle ya da başka bir tarayıcı dene.
Gizli sekmede çerezler kısıtlıysa normal bir sekmede aç.

Bunları dene

CSS Diner

CSS seçicilerini lokanta masasında öğreten bulmaca · tek kişilik

Luke Pacholski (flukeout)

Klavye/Fare

Benzer oyunlar

Hakkında

CSS Diner, tarayıcıda indirmeden oynanan eğitici bir oyundur.

Masadaki tabakları, bento kutularını, elmaları ve turşuları doğru CSS seçicisini yazarak tek tek havaya kaldırıyorsun. CSS Diner, web geliştirmenin temel konularından birini bir eğitici bulmaca oyunu hâline getiriyor; üstteki sipariş neyi istiyorsa onu seçen kuralı editöre yazman gerekiyor.

İlk bölümler "plate" gibi basit tür seçicileriyle başlıyor. Sonra kimlik ve sınıf seçicileri, iç içe geçmiş öğeler, kardeş seçicileri ve :nth-child gibi sözde sınıflar geliyor. Toplam 32 bölüm var ve her biri bir öncekinin üzerine yeni bir kural ekliyor. Masadaki bir nesnenin üzerine geldiğinde sağdaki HTML görüntüleyicide ona karşılık gelen satır parlıyor, bu da kodla görüntü arasındaki bağı kurmayı kolaylaştırıyor.

Sağdaki yardım paneli her bölümün konusunu örneklerle anlatıyor. CSS öğrenmeye yeni başlayan biri için de, seçicilerde eksiklerini kapatmak isteyen bir geliştirici için de pratik bir alıştırma alanı.

Sık sorulan sorular

CSS Diner'da kaç bölüm var?

Oyunda 32 bölüm var. Tür ve kimlik seçicileriyle başlayıp alt öğe, kardeş ve :nth-child gibi ileri seçicilere kadar ilerliyorsun. Bölüm numarasını yazarak istediğin bölüme atlayabiliyorsun.

CSS Diner nasıl oynanır?

Üstte yazan siparişe göre masadaki doğru öğeleri seçen CSS kuralını editöre yazıp Enter'a basıyorsun. Doğruysa seçilen öğeler masadan uçuyor ve bir sonraki bölüm açılıyor.

Künye ve lisans

Geliştirici: Luke Pacholski (flukeout)
Lisans: MPL-2.0
Kaynak: github.com/flukeout/css-diner
Atıf: CSS Diner by Luke Pacholski (flukeout), MPL-2.0. Fonts: Exo 2 (SIL OFL 1.1, The Exo 2 Project Authors) and Satisfy (Apache-2.0, Sideshow), bundled locally via Fontsource.

Oyun, lisans koşullarına uygun olarak barındırılmaktadır.

Puanlar ve yorumlar

İlk puanı sen ver

Ortalama, yeterli oy toplandığında burada görünür.

Bu oyunu puanla

İlk yorumu sen yaz

Bu oyunu oynadıysan ne düşündüğünü paylaş: zorluk, en sevdiğin bölüm, bir ipucu.

Yorumlar yüklenemedi.

Eğitici oyunlar

Tümü

Popüler oyunlar