Duyarlı Web Tasarımı - Web Tasarımı ve Kodlama

Ünite 1

Soru 1

Aşağıdakilerden hangisi duyarlı web tasarımı kavramlarından biri değildir?

A

Akışkan Izgara (Grid) Düzeni

B

Duyarlı görüntüler

C

Medya sorguları

D

Kesme noktaları

E

Güvenlik katmanı

Doğru Cevap: E

Soru 2

Duyarlı web siteleri, yayınlanan içeriğin ekran boyutlarına göre boyutunu ve yerleşimini otomatik olarak ayarlamasına imkân sağlayan esnek bir ………………… kullanmaktadırlar.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

ızgara sistemi

B

medya sorgusu

C

duyarlı görüntü

D

içerik hiyerarşisi

E

maliyet etkinliği

Doğru Cevap: A

Soru 3

………………… tasarım ve geliştirmenin ekran boyutu, platform ve yönelime bağlı olarak kullanıcının davranışına ve ortamına yanıt vermesi gerektiğini öne sürmektedir.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

Web uygulaması

B

Duyarlı web tasarımı

C

Windows uygulaması

D

Web sitesi

E

Web geliştiricisi

Doğru Cevap: B

Soru 4

Aşağıdakilerden hangisi duyarlı web tasarımının faydalarından biri değildir?

A

Geliştirilmiş mobil uyumluluk

B

Maliyet etkinliği

C

Site güvenliği

D

Geliştirilmiş SEO performansı

E

Daha kolay web sitesi yönetimi

Doğru Cevap: C

Soru 5

………………… karışıklığa neden olabileceği için yinelenen içeriğe sahip web sitelerini tercih etmez.
Yukarıdaki cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

Web siteleri

B

Güvenlik katmanı

C

Web uygulamaları

D

Arama motorları

E

Web tarayıcıları

Doğru Cevap: D

Soru 6

Aşağıdakilerden hangisi duyarlı web tasarımının web sitesi yönetimi için sağladığı faydalardan biri değildir?

A

Güvenlik desteği

B

Basitleştirilmiş Analitik ve Raporlama

C

Daha Düşük Bakım Maliyetleri

D

Verimli Teknik Destek

E

Kolaylaştırılmış İçerik Güncellemeleri

Doğru Cevap: A

Soru 7

Aşağıdakilerden hangisi duyarlı web tasarımında sıkça kullanılan yenilikçi teknolojilerden biri değildir?

A

CSS Framework'leri

B

Flexbox

C

Responsive Images

D

MsSql

E

PWA

Doğru Cevap: D

Soru 8

Aşağıda verilenlerden hangisi Tailwind’in avantajlarından birisi değildir?

A

İçerik oluşturabilmesi

B

Web sitesini duyarlı hale getirmesi

C

Bileşenleri yapmak için tasarımların özelleştirilebilmesi

D

Yardımcı sınıflar kullanılabilir

E

Yerel değişiklikler yapabilir

Doğru Cevap: A

Soru 9

Aşağıdakilerden hangisi Bootstrap’ın avantajlarından birisi değildir?

A

Tarayıcı uyumluluğu

B

Daha hızlı geliştirme

C

Harika tasarım

D

Öğrenilmesi kolay

E

Ücreti düşük olması

Doğru Cevap: E

Soru 10

………………… hizalama yapılarını kontrol etmek için ögeler arasında dağıtılmış boşluklara sahip esnek ve verimli düzenlere sahip tek boyutlu bir düzen modeli olarak adlandırılmaktadır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

Bootstrap

B

Foundation

C

Framework

D

Responsive Images

E

Flexbox

Doğru Cevap: E

Soru 11

Aşağıdakilerden hangisinde kullanıcıların web içeriklerine erişme imkânı yoktur?

A

Hesap makinesi

B

Tablet

C

Akıllı saat

D

Masaüstü bilgisayar

E

Akıllı telefon

Doğru Cevap: A

Soru 12

Aşağıdakilerden hangisi duyarlı web tasarımı kavramlarından biridir?

A

Sql sorguları

B

Medya sorguları

C

Accsess sogruları

D

Veri tabanı sorguları

E

Oracle sorguları

Doğru Cevap: B

Soru 13

………………… bir web sitesinin düzeninin farklı ekran boyutlarına uyum sağlamak için değiştiği belirli ekran genişlikleri olarak adlandırılabilir.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

Duyarlı görüntüler

B

İçerik

C

Grid

D

Web sitesi

E

Kesme noktaları

Doğru Cevap: E

Soru 14

Duyarlı bir web tasarımı yaklaşımı benimsemek, daha düşük geliştirme ve bakım masrafının yanı sıra, gelişmiş kullanıcı deneyimi ve etkileşimi, daha iyi SEO performansı ve daha fazla erişim ve erişilebilirlik yoluyla ………………… sunmaktadır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

maliyet etkinliği

B

geliştirilmiş mobil uyumluluk

C

geliştirilmiş SEO performansı

D

daha kolay web sitesi yönetimi

E

güvenli site sayfaları

Doğru Cevap: A

Ünite 2

Soru 1

HTML’in İngilizce açılımı aşağıdakilerden hangisidir?

A

Hyper Text Markup Language

B

High Text Markup Language

C

Hyper Traditional Markup Language

D

High Traditional Markup Language

E

Hyper Totorial Markup Language

Doğru Cevap: A

Soru 2

İlk olarak 2014 yılında W3C tarafından resmî olarak kabul edilmiş olan ………………… web geliştiricilerine yeni özellikler, geliştirilmiş performans ve daha iyi bir kullanıcı deneyimi sunabilmeyi amaçlamaktadır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

HTML1

B

HTML2

C

HTML3.2

D

HTML4.01

E

HTML5

Doğru Cevap: E

Soru 3

………………… en büyük sorunu web geliştirici ve tasarımcılarının HTML’de desteklenmeyen içerik veya özellikler eklemek istemeleriydi.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

HTML5'in

B

HTML4'ün

C

HTML3.2'nin

D

HTML2'nin

E

HTML1'in

Doğru Cevap: B

Soru 4

Aşağıdakilerden hangisi HTML5’in özelliklerinden birisi değildir?

A

Multimedya desteği

B

Sürükle ve bırak

C

Coğrafi konum hizmetleri

D

Kolay karakter kodlaması

E

Hatalı söz dizimi ile baş edemez

Doğru Cevap: E

Soru 5

HTML5 tarayıcıda daha karmaşık görselleştirmeler ve etkileşimli oyunlar oluşturmayı mümkün kılan .………………… öğesini sunmuştur.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

B

C

D

E

Doğru Cevap: A

Soru 6

Aşağıdakilerden hangisi HTML5 ile gelen yeniliklerden birisi değildir?

A

<canvas> etiketi

B

Geliştirilmiş multimedya desteği

C

Çevrimdışı depolama

D

Geliştirilmiş erişebilirlik

E

<strike> etiketi

Doğru Cevap: E

Soru 7

Aşağıdaki programlardan hangisi html editörü değildir?

A

Notepad++

B

Sublime Text

C

Adobe Dreamweaver CC

D

NetBeans

E

Figma

Doğru Cevap: E

Soru 8

Aşağıdakilerden hangisi <!DOCTYPE html> için doğru bir açıklamadır?

A

Dokümanın boyutunu belirtir.

B

Dokümanın türünü belirtir.

C

Dokümanın kaç kelimeden oluştuğunu belirtir.

D

Dokümanın başlığını belirtir.

E

Dokümanın stilini belirtir.

Doğru Cevap: B

Soru 9

Aşağıdakilerden hangisi HTML5’e geçişte kaldırılan etiketlerden birisi değildir?

A

B

C

<abbr>

D

E

<big>

Doğru Cevap: A

Soru 10

………………… ögesi, belirli bir içeriği bir makalenin parçası olarak işaretlemek için kullanılmaktadır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

B

C

D

E

Doğru Cevap: A

Soru 11

………………… masaüstü bilgisayarlar, dizüstü bilgisayarlar, akıllı telefonlar ve tabletler de dâhil olmak üzere çok çeşitli cihazlarla uyumlu olacak şekilde tasarlanmış ve geliştiricilerin birden fazla cihazda sorunsuz bir şekilde çalışan platformlar arası web uygulamaları oluşturmasını kolaylaştırmıştır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

HTML5

B

MsSql

C

MySql

D

Oracle

E

Teradata

Doğru Cevap: A

Soru 12

Grafikler çizmek ve bir sayfaya görüntü eklemek için JavaScript kullanan HTML5 öğesi aşağıdakilerden hangisidir?

A

B

C

D

E

Doğru Cevap: A

Soru 13

HTML kodları içinde veri saklamak için kullanılan ………………… etiketi, web sayfalarında kullanıcıya görünmeyen ancak sunucuyla iletişim hâlinde olan verileri depolamak ve iletmek için kullanılmaktadır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

B

C

D

E

Doğru Cevap: B

Ünite 3

Soru 1

Web sayfası içerisindeki HTML etiket seçici olarak aşağıdakilerden hangisi kullanılmaz?

A

<h3>

B

<h4>

C

<h5>

D

<h6>

E

<h7>

Doğru Cevap: E

Soru 2

Aşağıdakilerin hangisinde HTML etiket seçici kullanılmaktadır?

A

.p { font-size: 16px; }

B

#h1 { text-align: center; }

C

ul li { color: red; }

D

li { color: red; }

E

#p { font-size: 16px; }

Doğru Cevap: D

Soru 3

Aşağıdakilerden hangisi bir web sayfasında bulunan bir çok başlığından sadece bir tanesini seçmek için kullanılabilir?

A

#h2 { color: gray; }

B

h.2 { color: gray; }

C

h2 { color: gray; }

D

h2.all { color: gray; }

E

h2.one { color: gray; }

Doğru Cevap: A

Soru 4

Bir web sayfasındaki içeriklerin tümünün iç kenar boşluklarını sıfırlamak için kullanılacak kod aşağıdakilerden hangisidir?

A

all { margin: 0 }

B

all { padding: 0 }

C

* { padding: 0 }

D

* { margin: 0 }

E

elements { padding: 0 }

Doğru Cevap: C

Soru 5

Sınıf seçici ile ilgili aşağıdakilerden hangisi doğru bir ifadedir?

A

btn.buton1 { … } ile web sayfasındaki tüm öğeler seçilebilir.

B

* { … } ile belirli bir HTML öğesi seçilir.

C

#myID { … } ile aynı sınıfa ait tüm öğeler hedeflenir.

D

p { … } ile bir öğenin altındaki öğeler seçilir.

E

a:hover { … } ile bağlantının “yalancı sınıf” durumu hedeflenir.

Doğru Cevap: E

Soru 6

Yalancı sınıf seçici ne amaçla kullanılır?

A

Bir öğenin içindeki öğeleri seçer.

B

Belirli bir durumu veya etkinliği hedefler.

C

Web sayfasındaki tüm öğeleri seçer.

D

Bir öğe ile aynı seviyede olan kardeş öğeleri seçer.

E

Evrensel seçici olarak kullanılır.

Doğru Cevap: B

Soru 7

ul li { … } şeklinde bir CSS kodu yazıldığında hangi öğeler seçilmiş olur?

A

<ul> etiketi içerisindeki ilk <li> etiketini seçer.

B

<ul> etiketi içerisindeki tüm <li> etiketlerini seçer.

C

<ul> etiketinden sonra gelen ilk <li> etiketini seçer.

D

<ul> etiketi ile kardeş olan tüm <li> etiketlerini seçer.

E

<ul> etiketi içerisindeki 1. derece <li> etiketlerini seçer.

Doğru Cevap: B

Soru 8

I. Soy seçici (boşluk karakteri), (ing.:descendant selector)
II. Çocuk (child) seçici (>)
III. Komşu kardeş seçici (ing.:adjacent sibling selector, +)
Yukarıdakilerden hangisi ya da hangileri CSS dilindeki birleştiriciler arasında yer alır?

A

Yalnız III

B

II ve III

C

I ve II

D

I, II ve III

E

Yalnız I

Doğru Cevap: D

Soru 9

Birden çok HTML öğesine aynı CSS kodunu uygulamak için aşağıdaki yöntemlerden hangisi kullanılabilir?

A

Aynı CSS kodunu her öğe için ayrı ayrı yazarak.

B

Virgülle ayrılmış birden çok seçiciyi bir araya getirerek.

C

Evrensel seçici kullanarak.

D

Yalnızca id seçici kullanarak.

E

Yalnızca class seçici kullanarak.

Doğru Cevap: B

Soru 10

Bir web sayfasındaetiketi içerisinde , ve etiketleri bulunmaktadır. Aşağıdaki CSS seçicilerden hangisiiçerisindeki tüm etiketlerin kenarlık özelliğini ayarlar?

A

body.h1.p.img { border: 2px dashed blue; }

B

h1 p img { border: 1px solid red; }

C

h1, p, img { border: 2px dashed blue; }

D

body h1, p, img { border: 1px solid red; }

E

body.h1+ body.p + body.img { border: 2px dashed blue; }

Doğru Cevap: C

Soru 11

Aşağıdakilerden hangisi doğru bir CSS seçici kodudur?

A

p1 { color = red; }

B

h1 { color = red; }

C

.h7 { color : red; }

D

{ p: color=red; }

E

h1: color=red;

Doğru Cevap: C

Soru 12

Aşağıdakilerden hangisi bir web sayfasındaki resmin dış kenar boşluklarını ayarlamak için kullanılan bir CSS kodudur?

A

image { margin: 10px 2px; }

B

img { margin: 10px 2px; }

C

#img { margin: 10px 2px; }

D

img.resim { margin: 10px 2px; }

E

#image { margin: 10px 2px; }

Doğru Cevap: B

Soru 13

ID seçicinin görevi aşağıdakilerden hangisidir?

A

Bir ögenin içindeki tüm ögeleri seçer.

B

Web sayfasındaki tüm ögeleri seçer.

C

Tek bir ögeyi hedeflemek için kullanılır.

D

Bir HTML ögesinin belirli bir durumunu hedefler.

E

Evrensel seçicidir.

Doğru Cevap: C

Soru 14

"Yalancı Öge Seçici" ne için kullanılır?

A

Bir ögenin içindeki ögeleri seçer.

B

Belirli bir durumu veya etkinliği hedefler.

C

Bir ögenin belirli bir parçasını hedefler.

D

Bir öge ile aynı seviyede olan kardeş ögeleri seçer.

E

Evrensel seçici olarak kullanılır.

Doğru Cevap: C

Ünite 4

Soru 1

CSS medya sorgusu hangi amaçla kullanılır?

A

CSS özelliklerini tanımlar.

B

Web tarayıcılarının türünü belirler.

C

Web sitelerinin farklı cihazlarda ve ekran boyutlarında nasıl görüntüleneceğini belirlemek için kullanılır.

D

Kullanıcının kullandığı cihaz işletim sistemine göre web sayfasını kontrol eder.

E

Kullanıcının kullandığı mobil cihazın marka ve modeline göre CSS stilleri uygular.

Doğru Cevap: C

Soru 2

CSS medya sorguları hangi kodla sayfaya dâhil edilir?

A

#media

B

@media

C

media

D

css-media

E

.media

Doğru Cevap: B

Soru 3

“@media screen and (max-width: 768px)” medya sorgusu ne anlama gelir?

A

Ekranın genişliğinin 768 pikselden büyük olduğuna

B

Ekranın genişliğinin 768 pikselden küçük olduğuna

C

Ekranın yatay modda olduğuna

D

Ekranın dikey modda olduğuna

E

Ekranın genişliğinin 768 piksel genişliğinde olduğuna

Doğru Cevap: B

Soru 4

“@media print” medya sorgusu ne işe yarar?

A

Ekran için stil tanımlar.

B

Sayfayı yazdırmak için stil tanımlar.

C

Resimleri görüntülemek için stil tanımlar.

D

Ses dosyalarını çalmak için stil tanımlar.

E

Mobil cihazlar için stil tanımlar.

Doğru Cevap: B

Soru 5

CSS medya sorgularında kullanılan “and” kelimesi neyi ifade eder?

A

"Veya" mantıksal bağlacını temsil eder.

B

"Eşittir" mantıksal bağlacını temsil eder.

C

İki koşulun aynı anda sağlanması gerektiğini belirtir.

D

İki koşulun birini sağlaması gerektiğini belirtir.

E

Koşulların hiçbirini sağlaması gerekmediğini belirtir.

Doğru Cevap: C

Soru 6

CSS medya sorguları, kullanıcının tarayıcı penceresini nasıl etkiler?

A

Tarayıcı penceresini kapatır.

B

Tarayıcı penceresini büyütür.

C

Tarayıcı penceresini küçültür.

D

Sayfa içeriğini değiştirir.

E

Sayfanın görünümünü tarayıcı penceresine göre ayarlar.

Doğru Cevap: E

Soru 7

“@media (max-width: 1024px) and (min-width: 1440px)” medya sorgusu hangi ekran genişlik aralığını hedefler?

A

1439 pikselden daha büyük ve 1025 pikselden daha küçük ekran genişliklerini.

B

1024 piksel ve 1440 piksel arasındaki ekran genişliklerini.

C

1024 piksel ve daha büyük ekran genişliklerini.

D

1024 piksel ve 1440 piksel dahil tüm ekran genişliklerini.

E

1440 piksel ve daha büyük ekran genişliklerini.

Doğru Cevap: A

Soru 8

Konteyner sorgusu ile medya sorgusu arasındaki fark aşağıdakilerden hangisidir?

A

Konteyner sorgusu, ekran boyutunu kontrol etmek için kullanılır, medya sorgusu ise HTML öğelerinin içeriklerini belirler.

B

Konteyner sorgusu, tarayıcı penceresinin boyutunu kontrol etmek için kullanılır, medya sorgusu ise sayfanın arka plan rengini seçmek için kullanılır.

C

Konteyner sorgusu ve medya sorgusu arasında temel bir fark yoktur, aynı amaçlar için kullanılırlar.

D

Konteyner sorgusu, belirli bir HTML öğesinin içeriğini seçerken kullanılır, medya sorgusu ise ekran özelliklerini kontrol etmek için kullanılır.

E

Konteyner sorgusu, yazı tipi ve renkleri ayarlamak için kullanılır, medya sorgusu ise sayfanın düzenini kontrol etmek için kullanılır.

Doğru Cevap: D

Soru 9

Bir konteyner sorgusu hangi özel karakterle başlar?

A

#

B

. (nokta)

C

$

D

@

E

%

Doğru Cevap: D

Soru 10

Konteyner sorguları ile ilgili doğru ifade hangisidir?

A

Ekran boyutunu sabitler.

B

Sayfanın içeriğini değiştirir.

C

Ekran özelliklerine ve boyutlarına bağlı olarak stil tanımlamak için kullanılır.

D

JavaScript kodlarını çalıştırır.

E

Yalnızca metin fontunu değiştirmek için kullanılır.

Doğru Cevap: C

Soru 11

“@media screen and (min-width: 600px) and (max-width: 900px)” medya sorgusu ne amaçla kullanılır?

A

Web sayfasının hangi tür cihazdan görüntülendiğini anlamak için kullanılır.

B

Ekran genişliğinin 600-900 piksel arasında olup olmadığını anlamak için kullanılır.

C

Web sayfasının tablet ekranda görüntülenip görüntülenmediğini anlamak için kullanılır.

D

Ekran genişliğinin 600 pikselden az ya da 900 pikselden fazla olup olmadığını anlamak için kullanılır.

E

Ekranın dikey modda görüntülenip görüntülenmediğini anlamak için kullanılır.

Doğru Cevap: C

Soru 12

Konteyner adı “kutu” olan bir etiketinin boyutu 400 piksel ile 700 piksel arasında olduğunun sorgulanmasını sağlayacak konteyner sorgusu aşağıdakilerden hangisidir?

A

@container div ( min-width:400px )

B

@container kutu ( max-width:700px )

C

@container kutu ( 400px < width < 700px )

D

@container kutu ( width > 400px ) and ( width < 700px )

E

@container (name=kutu) and ( width > 400px ) and ( width < 700px )

Doğru Cevap: D

Soru 13

Bir web sayfasında yer alan ve class özelliği “kutu” olarak ayarlanan etiketinin yüksekliğini sorgulamak için hangi CSS özelliği kullanılır?

A

width

B

height

C

size

D

dimension

E

dim

Doğru Cevap: B

Ünite 5

Soru 1

Mobil ve masaüstü cihazların ekran boyutları arasındaki fark nedir ve bu fark kullanıcı deneyimini nasıl etkiler?

A

Her ikisi de aynı boyutta ekranlara sahiptir ve kullanıcı deneyimi üzerinde bir etkisi yoktur.

B

Mobil cihazlar genellikle 5-7 inç, masaüstü cihazlar ise 21-27 inç arasında değişen ekran boyutlarına sahiptir ve bu, görsel tasarımın nasıl optimize edileceğini etkiler.

C

Masaüstü cihazların ekranları mobil cihazlardan daha küçüktür, bu da masaüstü cihazlarda daha minimalist tasarımlar gerektirir.

D

Masaüstü cihazlar sadece büyük ekranlar için tasarlanır ve mobil cihazlar herhangi bir ekran boyutunu desteklemez.

E

Mobil cihaz ekranları 7-12 inç arasındadır ve masaüstü monitörler 30 inç ve üzerindeki ekranlara sahiptir.

Doğru Cevap: B

Soru 2

Mobil cihazlar ve masaüstü cihazlar için giriş yöntemleri nasıl farklılık gösterir?

A

Her ikisi de yalnızca dokunmatik ekranları kullanır.

B

Mobil cihazlar klavye ve fare kullanırken, masaüstü cihazlar sesli komutları tercih eder.

C

Mobil ve masaüstü cihazlar yalnızca sesli komutları kullanır.

D

Masaüstü cihazlar hareket sensörleri ile kontrol edilirken, mobil cihazlar yalnızca klavye kullanır.

E

Mobil cihazlar doğrudan dokunmatik giriş kullanırken, masaüstü cihazlar klavye ve fare girişlerine dayanır.

Doğru Cevap: E

Soru 3

Mobil ve masaüstü cihazların bağlantı türleri ve kullanım amaçları açısından ana farklar nelerdir?

A

Her ikisi de yalnızca kablolu Ethernet bağlantıları kullanır ve eğlence amaçlıdır.

B

Mobil ve masaüstü cihazlar aynı bağlantı türlerini ve kullanım amaçlarını paylaşır, bu yüzden aralarında bir fark yoktur.

C

Mobil cihazlar kablosuz bağlantıları kullanır ve taşınabilirliğe odaklanırken, masaüstü cihazlar genellikle kablolu bağlantıları tercih eder ve işlevsellik için kullanılır.

D

Mobil cihazlar yalnızca kablolu bağlantıları destekler, masaüstü cihazlar ise kablosuz bağlantılara izin verir.

E

Masaüstü cihazlar genellikle hücresel ağları kullanırken, mobil cihazlar sabit bir konumda kablolu bağlantılara bağlı kalır.

Doğru Cevap: C

Soru 4

Mobil öncelikli tasarımın hangi özelliği kullanıcı arayüzünün basit ve etkili olmasını gerektirir?

A

Geniş ekranlar ve yüksek çözünürlük

B

Sınırlı ekran boyutları ve piksel değeri

C

Klavye ve fare kullanımı

D

Sesli komut özelliği

E

Artırılmış gerçeklik teknolojileri

Doğru Cevap: B

Soru 5

Mobil kullanıcıların web sayfası performansı ile ilgili tolerans seviyesi nasıldır?

A

Çok yüksek, yavaş yüklenen sayfalara sabırla yaklaşırlar.

B

Orta düzeyde, bazı gecikmeleri kabul edebilirler.

C

Düşük, web sayfasının hızlı yüklenmesini ve sorunsuz çalışmasını beklerler.

D

Çok düşük, herhangi bir bekleme süresini kabul etmezler.

E

Toleransları değişkendir ve genellikle internet bağlantı hızına bağlıdır.

Doğru Cevap: C

Soru 6

Mobil cihazlarda kullanıcı oturum sürelerinin genellikle kısa olmasının web tasarımına olan etkisi nedir?

A

Kullanıcıların hızlı bilgi edinmesini ve görevleri tamamlamasını sağlamak için etkileşimlerin optimize edilmesi gerekir.

B

Kullanıcıların daha uzun süre çevrimiçi kalmasını teşvik etmek için animasyonlar ve video içerikler kullanılmalıdır.

C

Oturum sürelerinin uzunluğu web tasarımını etkilemez, bu yüzden göz ardı edilebilir.

D

Kullanıcıların ilgisini çekmek için daha fazla metin ve detaylı içerik eklenmelidir.

E

Kullanıcı oturumlarını uzatmak için karmaşık gezinme menüleri ve çok sayıda sayfa eklenmelidir.

Doğru Cevap: A

Soru 7

Masaüstü öncelikli web tasarımının odak noktası aşağıdakilerden hangisidir?

A

Kullanıcıların büyük ekranlarda etkileşimli ögeler ve detaylı grafikler arasında rahatça gezinmelerini sağlamak

B

Mobil cihaz kullanıcılarını hedef almak

C

Web sitelerini yalnızca masaüstü kullanımına özgü hale getirmek

D

En düşük çözünürlüklü ekranlar için tasarım yapmak

E

Masaüstü kullanımını sınırlayıcı hale getirmek

Doğru Cevap: A

Soru 8

Masaüstü öncelikli tasarımın hangi avantajı, geniş bant genişliği ve güçlü işlem kapasitesiyle ilişkilidir?

A

Daha hızlı internet bağlantısı sunar.

B

E-posta yönetimini kolaylaştırır.

C

Video ve animasyon gibi medya öğelerinin akıcı oynatılmasını sağlar.

D

Mobil cihazların şarj ömrünü uzatır.

E

Daha güvenli veri depolama sağlar.

Doğru Cevap: C

Soru 9

Masaüstü öncelikli tasarımın mobil cihazlarda karşılaşabileceği hangi dezavantaj SEO performansını etkileyebilir?

A

Daha hızlı yükleme süreleri

B

Mobil cihazlarda yavaş yüklenme ve navigasyon sorunları

C

Fazla optimize edilmiş içerik

D

Yetersiz grafik ve animasyon kullanımı

E

Kullanıcıların siteye olan bağlılığının artması

Doğru Cevap: B

Soru 10

Mobil öncelikli ve masaüstü öncelikli tasarım kararları alırken hangi faktör projenin yönünü en çok etkiler?

A

Renk şeması ve font seçimi.

B

Renk şeması ve font seçimi.(A seçeneği ile aynı değişecek)

C

Hedef kitle analizi ve cihaz kullanım istatistikleri.

D

Sitenin yükleme hızı ve barındırma maliyeti.

E

Tasarımcının kişisel tercihi ve deneyimi.

Doğru Cevap: C

Soru 11

Aşağıdakilerden hangisi mobil öncelikli tasarımdaki adımlardan biri değildir?

A

Web sitesinde yalnızca kullanıcılar için en önemli olan bilgi ve fonksiyonları sergileme

B

Ana sayfa ve menülerde çok fazla detaya yer verme

C

Mobil sitenin dokunmatik elemanlarını, kullanıcıların kolaylıkla tıklayıp etkileşimde bulunabilecekleri şekilde büyük ve rahat kullanılabilir yapma

D

Tasarımı farklı ekran boyutları ve cihazlarda sorunsuz bir şekilde çalışacak biçimde oluşturma

E

Görselleri ve diğer medya dosyalarını hafifletme ve böylece sayfaların hızla yüklenmesini sağlama

Doğru Cevap: B

Soru 12

Mobil cihazların ekran boyutları genellikle kaç inç arasında değişir?

A

5-7 inç

B

11-17 inç

C

21-27 inç

D

7-17 inç

E

30 inç ve üstü

Doğru Cevap: A

Soru 13

Masaüstü öncelikli web tasarımının hangi dezavantajı SEO açısından olumsuz etkiler yaratabilir?

A

Yüksek grafik ve multimedya içerik gereksinimi

B

İnteraktif ögelerin karmaşıklığı

C

Mobil uyumluluğun düşük olması

D

Geniş bant genişliği ihtiyacı

E

Detaylı animasyonların zorluğu

Doğru Cevap: C

Ünite 6

Soru 1

Bir flex kapsayıcının temel özelliği nedir?

A

Sıralı ögeleri düzenleme yeteneği

B

Kenar boşluğu ekleyebilme yeteneği

C

Font boyutunu ayarlayabilme yeteneği

D

Renk paletini değiştirme yeteneği

E

Esnek düzenleme yeteneği

Doğru Cevap: E

Soru 2

Soldan sağa hizalı bir flex ögesinin çocuklarını dikey olarak yerleştirmek için kullanılan özellik hangisidir?

A

justify-content

B

align-flex

C

flex-direction

D

flex-wrap

E

align-items

Doğru Cevap: E

Soru 3

Soldan sağa hizalı bir flex öğesini yatay ve dikey olarak ortalamak için hangi özellikler kullanılır?

A

align-items ve justify-content

B

flex-direction ve flex-wrap

C

align-content ve justify-items

D

flex-align ve flex-justify

E

center-items ve align-center

Doğru Cevap: A

Soru 4

Flexbox'ta bir öğenin diğer öğelerden daha fazla genişlemesini sağlamak için kullanılan özellik nedir?

A

flex-shrink

B

flex-grow

C

flex-basis

D

flex-fill

E

expand-factor

Doğru Cevap: B

Soru 5

Bir flex öğesinin içeriğini yatay yönde ortalayan ve aralarındaki boşlukları eşit dağıtan özellik aşağıdakilerden hangisidir?

A

align-items:flex-start

B

flex-wrap : wrap

C

flex: 1

D

flex-justify

E

justify-content:space-around

Doğru Cevap: E

Soru 6

Bir flex öğesinin içeriğini belli bir oranda büyütmek veya küçültmek için hangi özellik kullanılır?

A

flex-factor

B

flex-grow

C

flex-shrink

D

flex-scale

E

size-adjust

Doğru Cevap: B

Soru 7

display: flex; özelliği sayesinde bir kapsayıcıya uygulanan temel esnek yerleşim özelliği aşağıdakilerden hangisidir?

A

Çocuk nesneleri dikeyde sıralar.

B

Çocuk nesneleri yatay veya dikeyde esnek bir şekilde yerleştirir.

C

Kapsayıcının arka plan rengini belirler.

D

Font boyutunu kontrol eder.

E

Çocuk nesneleri alt satıra düşürür.

Doğru Cevap: B

Soru 8

Soldan sağa hizalanmış (flex-direction: row) bir kapsayıcıya uygulanan justify-content özelliği hangi durumu kontrol eder?

A

Çocuk nesneleri dikeyde hizalar.

B

Çocuk nesnelerin genişliklerini belirler.

C

Sayfanın genişliğini sınırlar.

D

Çocuk nesneleri yatayda esnek bir şekilde hizalar.

E

Kapsayıcının arka plan rengini kontrol eder.

Doğru Cevap: D

Soru 9

Order özelliği bir çocuk nesnenin hangi özelliğini değiştirir?

A

Genişlik

B

Yatayda hizalama

C

Dikeyde hizalama

D

Sıralanma düzeni

E

Font tipi belirleme

Doğru Cevap: D

Soru 10

Ekranın genişliği 600 piksel veya daha küçük olduğunda geçerli olan bir CSS kuralını tanımlamak için aşağıdaki kod bloklarından hangisi kullanılmalıdır?

A

@media screen and (min-width: 600px) { ... }

B

@media screen and (max-width: 600px) { ... }

C

@media only screen and (min-width: 600px) { ... }

D

@media only screen and (max-width: 600px) { ... }

E

@media screen (width <= 600px) { ... }

Doğru Cevap: B

Soru 11

Çocuk nesnelerin aralarındaki boşlukları eşit olacak şekilde ayarlayan ve çocukların kenarlara olan boşluklarını sıfırlayan CSS kodu verilmiştir. Buna göre aşağıdaki CSS kodundaki boşluğu hangi komutlarla doldurmalıdır?
.hizalama { display: flex; justify-content: ...............;
}

A

center

B

space-between

C

space-around

D

flex-start

E

flex-end

Doğru Cevap: B

Soru 12

Çocuk nesnelerin genişliklerini eşit oranda büyüten ve dikeyde ortaya hizalayan CSS kodu verilmiştir. Buna göre aşağıdaki CSS kodundaki boşluklar sırasıyla hangi komutlarla doldurulmalıdır?
.kapsayici { display: flex; align-items:............;
}
.cocuk { flex: .................;
}

A

center, 1 0 100%

B

stretch, 1

C

flex-start, 0

D

center, 1

E

baseline, 0 0 0%

Doğru Cevap: A

Soru 13

Bir flex konteynerindeki ögelerin sıralamasını değiştirmek için hangi CSS özelliği kullanılır?

A

flex-order

B

order-flex

C

flex-wrap

D

order

E

flex-direction

Doğru Cevap: D

Ünite 7

Soru 1

Grid-template-rows özelliğinde "auto" değeri ne işe yarar?

A

Satırları otomatik olarak oluşturur ve genişliklerini belirli aralıklarla sınırlar.

B

Satırları belirli bir piksel yüksekliğinde oluşturur.

C

Satırları belirli bir yüzde yüksekliğinde oluşturur.

D

Satırları otomatik olarak oluşturur ve içeriklerine göre yüksekliklerini ayarlar.

E

Sadece sabit yükseklikli satırlar oluşturur.

Doğru Cevap: D

Soru 2

Grid-template-columns özelliğinde kullanılan "fr" değeri ne anlama gelir?

A

Sütunları otomatik olarak oluşturur ve genişliklerini belirli aralıklarla sınırlar.

B

Sütunları belirli bir piksel genişliğinde oluşturur.

C

Sütunları belirli bir yüzde genişliğinde oluşturur.

D

Grid kapsayıcısının kullanılabilir boş alanını fraksiyonel değerlere göre paylaştırır.

E

Sadece sabit genişlikli sütunlar oluşturur.

Doğru Cevap: A

Soru 3

Aşağıdakilerden hangisi CSS Grid Layout'un ölçüleri belirlemede kullanılan komutlarından biri değildir?

A

Gap

B

Minmax

C

Flexbox

D

Grid-template

E

Repeat

Doğru Cevap: C

Soru 4

Grid ögeleri arasındaki boşlukları belirlemek için hangi CSS özelliği kullanılır?

A

Gap

B

Margin

C

Padding

D

Space-between

E

Grid-space

Doğru Cevap: A

Soru 5

CSS Grid Layout'ta gap özelliği ile hangisi belirlenebilir?

A

Font boyutu

B

Renk tonu

C

Border kalınlığı

D

Grid öğeleri arasındaki boşluk

E

Sayfa genişliği

Doğru Cevap: D

Soru 6

Grid özelliğinde "repeat" komutu hangi durumu ifade eder?

A

Sütun genişliklerini belirler.

B

Sütunları tekrar eden bir desende oluşturur.

C

Sütun başlangıç ve bitiş konumlarını belirler.

D

Sütunları otomatik genişlikte oluşturur.

E

Sütun arasındaki boşluğu belirler.

Doğru Cevap: B

Soru 7

Grid-template-columns ve grid-template-rows özelliklerini tek bir özellik içinde birleştiren komut aşağıdakilerden hangisidir?

A

Grid-gap

B

Grid-template

C

Grid-template-areas

D

Grid-template-repeat

E

Grid-template-columns-rows

Doğru Cevap: B

Soru 8

Grid-template özelliğinde, nokta "." simgesinin kullanımı neyi ifade eder?

A

Sütun genişliği

B

Satır genişliği

C

Grid öğeleri arasındaki boşluk

D

Belirli bir hücrenin genişliği

E

Boş bir hücreyi temsil eder

Doğru Cevap: E

Soru 9

Grid-template özelliğinin yazım biçimi aşağıdakilerden hangisidir?

A

grid-areas: rows bilgileri / columns bilgileri

B

grid: rows bilgileri / columns bilgileri

C

grid-template: rows bilgileri / columns bilgileri

D

grid-template: columns bilgileri / rows bilgileri

E

grid-layout: rows bilgileri / columns bilgileri

Doğru Cevap: C

Soru 10

Grid özelliklerini incelemek için hangi DevTools aracını kullanabilirsiniz?

A

Network

B

Console

C

Elements

D

Sources

E

Layout

Doğru Cevap: E

Soru 11

Grid Layout'un temel özelliklerinden biri aşağıdakilerden hangisidir?

A

Yalnızca eski tarayıcılarda çalışır.

B

Daha fazla tasarım özgürlüğü ve kontrol sağlar.

C

Sadece responsive tasarımlar için uygundur.

D

Sadece tek bir sütun genişliği belirleme özelliğine sahiptir.

E

Yalnızca Flexbox ile uyumludur.

Doğru Cevap: B

Soru 12

Grid-column-start ve grid-column-end özellikleri ne işe yarar?

A

Satır başlangıç ve bitiş konumlarını belirler.

B

Sütun başlangıç ve bitiş konumlarını belirler.

C

Grid ögeleri arasındaki boşluğu belirler.

D

Sütun genişliklerini belirler.

E

Grid içindeki hücreleri tekrarlar.

Doğru Cevap: B

Soru 13

Aşağıdaki komutlardan hangisi grid layout ile alakalı bir özellik değildir?

A

repeat

B

row-reverse

C

minmax

D

grid-area

E

grid-teamplate

Doğru Cevap: B

Ünite 8

Soru 1

Duyarlı metin tasarımı için aşağıdaki CSS tekniklerinden hangisi kullanılarak yazı tipi boyutu ekran genişliğine göre dinamik olarak ayarlanabilir?

A

text-align

B

font-size

C

letter-spacing

D

line-height

E

width

Doğru Cevap: B

Soru 2

Duyarlı web tasarımında duyarlı metin nedir?

A

Sadece büyük puntolu metin

B

Farklı cihazlarda ve ekran boyutlarında uyumlu metin içeriği

C

Yalnızca belirli bir tarayıcıda görünen metin

D

Yavaş yüklenen metin

E

Sadece mobil cihazlarda gösterilen metin

Doğru Cevap: B

Soru 3

Duyarlı video tasarımında kullanılan HTML5 elementi nedir?

A

B

<vid>

C

<video>

D

<play>

E

<responsive-video>

Doğru Cevap: C

Soru 4

Tablo genişliğini dinamik olarak ayarlamak için kullanılan CSS özelliği aşağıdakilerden hangisidir?

A

overflow-x

B

width

C

height

D

display

E

padding

Doğru Cevap: B

Soru 5

Duyarlı web tasarımında duyarlı resim nedir?

A

Sadece belirli bir tarayıcıda görünen resim

B

Farklı cihazlarda ve ekran boyutlarında uyumlu resim içeriği

C

Hareketli resim

D

Sadece mobil cihazlarda gösterilen resim

E

Sadece masaüstü bilgisayarlarla uyumlu resim

Doğru Cevap: B

Soru 6

"Picture" etiketi ne işe yarar?

A

Yalnızca belirli bir coğrafi konumda çalışan resimleri tanımlar

B

Farklı cihazlar için farklı resim biçimlerini destekler

C

Sadece mobil cihazlarda gösterilen resimleri tanımlar

D

Sadece belirli bir dilde resim içeriği sunar

E

Resimler arasında geçiş efektleri sağlar

Doğru Cevap: B

Soru 7

"img sizes" özelliği aşağıdakilerden hangisini kontrol eder?

A

Resim boyutunu

B

Resim efektlerini

C

Resim renk paletini

D

Resimlerin sıralamasını

E

Resimlerin dilini

Doğru Cevap: A

Soru 8

"Picture" elementi kullanıldığında, hangi etiket içinde resim biçimleri belirtilir?

A

B

C

D

<sizes>

E

Doğru Cevap: A

Soru 9

Duyarlı video tasarımında kullanılan bir CSS tekniği nedir?

A

Resim konumunu dinamik olarak ayarlama

B

Video oranını dinamik olarak ayarlama

C

Sayfa yüklemelerini geciktirme

D

Metin hizalamasını ayarlama

E

Yazı tipi boyutunu dinamik olarak ayarlama

Doğru Cevap: B

Soru 10

Aşağıdaki durumların hangisinde farklı resim biçimleri kullanımı sayesinde hızlı yükleme sağlanabilir?

A

Yüksek çözünürlüklü resimler kullanıldığında

B

Resimlerin sayısı çok olduğunda

C

Sadece mobil cihazlarda görünen resimlerde

D

Farklı cihazlarda ve ekran boyutlarında uyumlu resimlerde

E

Yalnızca belirli bir dilde içerik sunulduğunda

Doğru Cevap: D

Soru 11

Duyarlı web tasarımında duyarlı tablo aşağıdakilerden hangisidir?

A

Sadece belirli bir tarayıcıda görünen tablo

B

Farklı cihazlarda ve ekran boyutlarında uyumlu tablo içeriği

C

Yalnızca mobil cihazlarda gösterilen tablo

D

Hareketli tablo

E

Sadece masaüstü bilgisayarlarla uyumlu tablo

Doğru Cevap: B

Soru 12

"img srcset" özelliği ne işe yarar?

A

Resim boyutunu sabit tutar.

B

Farklı cihazlar için farklı resim biçimlerini belirler.

C

Resimlere efekt ekler.

D

Sadece belirli bir tarayıcıda test etmeyi sağlar.

E

Yüksek maliyetli resimleri tanımlar.

Doğru Cevap: B

Soru 13

Duyarlı web tasarımında hangi durumda "img sizes" özelliği kullanılabilir?

A

Yalnızca mobil cihazlarda

B

Yalnızca masaüstü bilgisayarlarla uyumlu olma durumunda

C

Farklı ekran boyutlarına uyum sağlama durumunda

D

Sadece belirli bir tarayıcıda çalışma durumunda

E

Yüksek maliyetli resimler kullanıldığında

Doğru Cevap: C

Ünite 9

Soru 1

Görünüm penceresi meta etiketi hangi HTML bölümünde yer almalıdır?

A

head

B

body

C

footer

D

div

E

style

Doğru Cevap: A

Soru 2

HTML meta viewport etiketi için hangi öznitelik, web sayfasının genişliğini ayarlar?

A

width

B

height

C

initial-scale

D

minimum-scale

E

maximum-scale

Doğru Cevap: A

Soru 3

HTML meta viewport etiketi için hangi öznitelik, web sayfasının ilk yüklendiğindeki yakınlaştırma seviyesini ayarlar?

A

width

B

height

C

initial-scale

D

minimum-scale

E

maximum-scale

Doğru Cevap: C

Soru 4

Dynamic Viewport Units (dvh, dvw) nedir?

A

Ekran boyutlarına bağlı bir CSS birimi

B

HTML etiketleri için bir özellik

C

JavaScript kütüphanesi

D

Bir resim formatı

E

Bir renk paleti

Doğru Cevap: A

Soru 5

HTML meta viewport etiketi için hangi değer, web sayfasının genişliğini cihazın ekran genişliğine eşitler?

A

width=device-width

B

width=device-height

C

height=100vw

D

width=100vh

E

width=100%

Doğru Cevap: B

Soru 6

Görsel Görünüm Penceresi'nin boyutu ne zaman Yerleşim Görünüm Penceresi'nden daha küçük hale gelir?

A

"position: fixed" özelliği kullanıldığında

B

Ekran boyutu büyüdüğünde

C

Yakınlaştırma düzeyi arttığında

D

Sayfa içeriği az olduğunda

E

Tarayıcı penceresi küçüldüğünde

Doğru Cevap: C

Soru 7

Yerleşim Görünüm Penceresi aşağıdakilerden hangisidir?

A

Bir web sitesindeki tüm içeriği gösteren pencere

B

Tarayıcıda sayfa içeriğine erişim sağlayan bir mekanizma

C

Görsel Görünüm Penceresi'nin alternatifi

D

Web sayfasının tamamını görüntüleyen bir pencere

E

Ekran boyutunu ayarlamak için kullanılan bir pencere

Doğru Cevap: D

Soru 8

Görsel Görünüm Penceresi'nin görevi nedir?

A

Sayfanın tamamını göstermek.

B

"position: fixed" öğelerin konumlandığı pencereyi temsil etmek.

C

Tarayıcı penceresini tam ekran yapmak.

D

Yakınlaştırma düzeyine bağlı olarak sayfa içeriğini göstermek.

E

Sabit konumlu öğeleri hareket ettirmek.

Doğru Cevap: D

Soru 9

Parmakla yakınlaştırma sırasında ne olur?

A

Görsel Görünüm Penceresi genişler.

B

Yerleşim Görünüm Penceresi büyür.

C

Görsel Görünüm Penceresi küçülür.

D

"position: fixed" kullanılan öğeler hareket eder.

E

Görsel Görünüm Penceresi'nin boyutu sabit kalır.

Doğru Cevap: B

Soru 10

vh, vw neyi ifade eder?

A

Pixel ve Point

B

Kilogram ve Metre

C

Görünüm penceresi genişliği, Görünüm penceresi yüksekliği

D

Görünüm penceresi yüksekliği, Görünüm penceresi genişliği

E

RGB ve HEX

Doğru Cevap: A

Soru 11

Görünüm penceresi özellikleri meta etiketinin hangi özelliğine yazılmalıdır?

A

name

B

content

C

charset

D

http-equiv

E

lang

Doğru Cevap: B

Soru 12

HTML meta viewport etiketi için hangi değer, web sayfasının yüksekliğini cihazın ekran yüksekliğine eşitler?

A

width=device-width

B

height=device-height

C

height=100vw

D

width=100vh

E

width=100%

Doğru Cevap: B

Ünite 10

Soru 1

Bootstrap mobil uyumlu hangi çerçevedir?

A

Back -end

B

Programlama

C

Tasarım

D

Front -end

E

Geliştirme

Doğru Cevap: D

Soru 2

Boootstrapta kullanılan çerçeve kavramı aşağıdakilerden hangisidir?

A

Server

B

Client

C

Framework

D

CSS

E

Node.js

Doğru Cevap: C

Soru 3

Bootstrap aşağıdaki kütüphanelerin hangisini içerir?

A

PHP

B

Angular

C

.Net

D

C++

E

CSS

Doğru Cevap: E

Soru 4

Bootstrap hangi tasarım ilkelerini göz önünde bulundurarak geliştirilmiştir?

A

Izgara

B

Class

C

HTML

D

Responsive

E

XML

Doğru Cevap: D

Soru 5

Bootstrap’ta sayfayı sütunlara yerleştirmek için hangi yapı kullanılır?

A

Izgara

B

Tipografi

C

Geliştirme

D

Yerleşim

E

Form Alanları

Doğru Cevap: A

Soru 6

Bootstrap hangi yıl ve hangi uygulamada tasarlanmıştır?

A

2011 - Facebook

B

2011 - Twitter

C

2010 - Gitgub

D

2006 - Twitter

E

2008 - Github

Doğru Cevap: B

Soru 7

Web sayfalarının görünümünü değiştiren stil aşağıdakilerden hangisidir?

A

Fornt- End

B

Back-End

C

Jquary

D

Framework

E

CSS

Doğru Cevap: E

Soru 8

Birlikte kullanılarak web sayfaları ve uygulamaları oluşturmak için kullanılan teknolojiler aşağıdakilerden hangisidir?

A

CSS - JavaScript

B

HTML- XML

C

CSS - HTML

D

JavaScript- HTML

E

XML - CSS

Doğru Cevap: A

Soru 9

Bootstrap ve Framework arasında aşağıdaki ilişkilerden hangisi yer almaz?

A

Bootstrap bir Front-end framework’tur.

B

Framework’ler temel ve özelleştirilemezler.

C

Framework'ler genel ve özelleştirilebilirdir.

D

Framework'ler temel işlevleri sağlar.

E

Bootstrap, tasarımı standartlaştırır.

Doğru Cevap: B

Soru 10

HTML içerik hazırlanmasında Bootstrap’ın hangi mantığı kullanılır?

A

Denetleme

B

Birleştirme

C

Sınıflandırma

D

Ayrıştırma

E

İşaretleme

Doğru Cevap: C

Soru 11

Bootstrap 4’te CSS öncesi işlemci olan LESS’ten sonra aşağıdakilerden hangisine geçilmiştir?

A

SASS

B

REM

C

PX

D

Card

E

Class

Doğru Cevap: A

Ünite 11

Soru 1

Grid yapısı aşağıdaki düzenlerden hangisine dayanmaktadır?

A

Dikey ve Yatay

B

Dikey ve Satır

C

Satır ve Sütun

D

Kolon ve Sütun

E

Kenar ve Boşluk

Doğru Cevap: C

Soru 2

Grid yapısı kaç sütundan oluşur?

A

4

B

10

C

8

D

12

E

3

Doğru Cevap: D

Soru 3

Grid yapısında her ızgara hangi araçla sarılır?

A

<class>

B

<li>

C

<body>

D

E

<div>

Doğru Cevap: E

Soru 4

Grid yapısı Bootstrap’ın hangi sürümünde geliştirilmiştir?

A

Bootstrap 4

B

Bootstrap 5

C

Bootstrap 3

D

Bootstrap 2

E

Bootstrap 1

Doğru Cevap: C

Soru 5

Aşağıdakilerden hangisi Bootstrap Grid değişkenlerinden birisidir?

A

Grid-Degisken

B

Grid-Tipografi

C

Grid-Renk

D

Grid-Colums

E

Grid-Class

Doğru Cevap: D

Soru 6

Grid yapısının çalışma mantığında bulunan sütunlar arası boşlukları aşağıdakilerden hangisi kullanılarak yapılır?

A

Colums

B

Padding

C

Gutter

D

Float

E

Template

Doğru Cevap: B

Soru 7

Tekrar eden sütun ve satırlar hangi fonksiyon ile gösterilir?

A

Fr

B

Auto-Fit

C

Minmax

D

Repeat

E

Span

Doğru Cevap: D

Soru 8

Aşağıdakilerden hangisi Bootstrap metin hizalama sınıflarından biridir?

A

Text-Left

B

Text-Right

C

Text-Container

D

Text-Center

E

Text-Nowrap

Doğru Cevap: C

Soru 9

Aşağıdakilerden hangisi Bootstrap Container sınıflarından biri değildir?

A

Container- ml

B

Container-sm

C

Container-md

D

Container-lg

E

Container-xl

Doğru Cevap: A

Soru 10

Bootstrap Grid Sistemi Terminolojisinde bulunan Grid Gap nedir?

A

Satır ve sütun arasındaki boşluktur.

B

Satır başlangıç konumunu belirler.

C

Sütunlar üzerindeki bitiş konumunu belirler.

D

Yatay ve dikey çizgiler arasında bulunur.

E

Satırlar üzerindeki bitiş konumunu belirler.

Doğru Cevap: A

Soru 11

Bootstrap Grid değişkenlerinden hangisi sütunlar arasındaki dikey boşlukları belirler?

A

Grid-Colums

B

Grid-Rows

C

Grid-Float

D

Grid-Breakpoint

E

Grid-Gutter-Width

Doğru Cevap: E

Soru 12

CSS Grid Layout'da, sütun veya satırların ne kadar uzun olacağını belirlemek için hangi terim kullanılır?

A

Length

B

Max Lenght

C

Leng

D

Span

E

Large

Doğru Cevap: D

Soru 13

Aşağıdakilerden hangisi Grid sisteminde hata ayıklama tekniklerinden biri değildir?

A

Listeleme

B

Ağ Sorunları

C

Performans Takip

D

Test

E

Loglama

Doğru Cevap: A

Ünite 12

Soru 1

Bootstrap içerik araçları, içeriğin farklı ekran boyutlarına ve cihazlara uyumlu olması hangi araçla sağlanır?

A

Framework

B

Grid

C

Responsive

D

Customize

E

Class

Doğru Cevap: C

Soru 2

Duyarlı tasarım aşağıdakilerden hangisini sağlar?

A

Liste halinde görünmesi

B

Sadece mobil uyumluluk sağlar

C

Estetik görünüm sağlar

D

Tüm cihazlarda uyumlu olmasını sağlar

E

Kullanıcı deneyimi sağlar

Doğru Cevap: D

Soru 3

Aşağıdakilerden hangisi Bootstrap içerik araçlarından biri değildir?

A

Metin

B

Başlık

C

Buton

D

Resim

E

Onay Kutusu

Doğru Cevap: E

Soru 4

Web sayfalarının daha fazla kullanıcıya hitap etmesi için hangi CSS özelliği kullanılmalıdır?

A

Font-Area

B

Font-Style

C

Font-Family

D

Font-Variant

E

Font-List

Doğru Cevap: C

Soru 5

Başlık boyutlarında en büyük başlık hangi etiketle gösterilir?

A

<h5>

B

<h4>

C

<h3>

D

<h1>

E

<h6>

Doğru Cevap: D

Soru 6

Bootstrap’ın temel metin sınıflarından olan Text-Muted sınıfı ne için kullanılır?

A

Uzun karakterleri kısaltmak için

B

Metni soluklaştırmak için

C

Metni kalın hâle getirmek için

D

Metinde vurgu yapmak için

E

Metni tek satıra sığdırmak için

Doğru Cevap: B

Soru 7

Metin rengi için kullanılan sınıflardan hangisi metinleri kırmızı renkte gösterir?

A

Text-secondary

B

Text-info

C

Text-Succes

D

Text-Warning

E

Text-Danger

Doğru Cevap: D

Soru 8

Bootstrap’ta dış çerçeveli butonlar oluşturmak için hangi sınıf kullanılır?

A

Btn-outline-primary

B

Btn-lg

C

Btn-outline

D

Btn-outline-vertical

E

Btn-outline-block

Doğru Cevap: C

Soru 9

Kullanıcıların birden fazla seçenekten sadece birini seçmelerine izin veren form bileşeni aşağıdakilerden hangisidir?

A

Radyo Düğmeleri

B

Onay Kutuları

C

Metin Alanları

D

Metin Girişi

E

Şifre Girişi

Doğru Cevap: A

Soru 10

Kullanıcılara bir listeden bir seçenek seçme imkânı veren form bileşeni aşağıdakilerden hangisidir?

A

Açılır Liste

B

Liste

C

Onay Kutuları

D

Dikey Form

E

Düğme

Doğru Cevap: A

Soru 11

Tarayıcının varsayılan kök yazı tipi boyutu kaçtır?

A

16px

B

10px

C

12px

D

14px

E

18px

Doğru Cevap: A

Soru 12

…….. tarafı doğrulama ise bir kullanıcının formu doldurup gönderdikten sonra sunucu tarafından onaylanmasıdır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi gelmelidir?

A

İstemci

B

Client

C

Sunucu

D

Dashboard

E

Arayüz

Doğru Cevap: C

Ünite 13

Soru 1

Bootstrap’ın bir parçası olarak kullanılan ikon ve sembol koleksiyonu olan bileşen aşağıdakilerden hangisidir?

A

Icon

B

Buton

C

Buton Group

D

Glyphicons

E

Alerts

Doğru Cevap: D

Soru 2

Nav Tabs ……. bir menü oluşturmak için kullanılır. Boş bırakılan yere aşağıdakilerden hangisi gelmelidir?

A

Sekmeli

B

Bölmeli

C

Ayırmalı

D

Açılır

E

Dropdown

Doğru Cevap: A

Soru 3

Bootstrap’ta sekme tabanlı bir arayüz oluşturmak veya sayfa üzerinde gezinmek için kullanılan bileşen aşağıdakilerden hangisidir?

A

Navs

B

Nav Tabs

C

Nav Fill

D

Fustify

E

Navs Pills

Doğru Cevap: E

Soru 4

Açılır menülerde (Dropdown) ögelerin düzgün konumlanmasını sağlamak için aşağıdakilerden hangisi eklenmelidir?

A

JavaScript

B

CSS

C

Popper.min.js

D

Popper.js

E

Toggle.js

Doğru Cevap: C

Soru 5

Navbar bileşeninde logo ve başlıklar hangi sınıf içerisinde bulunur?

A

Navbar-light

B

Navbar-brand

C

Navbar-toggler

D

Navbar-nav

E

Navbar-primary

Doğru Cevap: B

Soru 6

Breadcrumbs bileşeninde varsayılan ayırıcı işaret aşağıdakilerden hangisidir?

A

-

B

*

C

_

D

/

E

\

Doğru Cevap: D

Soru 7

Jumbotron bileşeninde sayfanın tam genişlikte kaplanması için hangi sınıf kullanılır?

A

Jumbotron-Fluid

B

Jumbotron-Class(E seçeneği ile aynı güncellenecek)

C

Jumbotron-Center

D

Jumbotron-İtem

E

Jumbotron-Class

Doğru Cevap: A

Soru 8

Alerts bileşeninde sarı renkli bir uyarı yapmak için aşağıdakilerden hangisi kullanılır?

A

Info

B

Succes

C

Warning

D

Danger

E

Primary

Doğru Cevap: C

Soru 9

Çizgili bir ilerleme çubuğu eklemek için hangi sınıf kullanılır?

A

Progress-bar-striped

B

Progress-bar-Animated

C

Progress-bar-Dark

D

Progress-bar-slipted

E

Progress-bar-Media

Doğru Cevap: A

Soru 10

Bootstrap 4’te Wells bileşenin yerini hangi bileşen almıştır?

A

Panels

B

Cards

C

Thumbnails

D

Modals

E

Tipografi

Doğru Cevap: B

Soru 11

Nav Tabs ve Pills arasındaki temel fark …....... ve …........ amacıdır.
Cümledeki boşluklara aşağıdakilerden hangisi getirilmelidir?

A

Listeleme / Denetim

B

Denetim / Kullanım

C

Kullanım / Tasarım

D

Görünüm / Tasarım

E

Görünüm / Kullanım

Doğru Cevap: E

Soru 12

Nav Pills bileşeninde her bir sekme için hangi sınıf kullanılır?

A

Nav-item

B

Menü-item

C

Nav-active

D

Nav-href

E

Nav-Rows

Doğru Cevap: A

Soru 13

Navbar bileşeninde gezinme çubuğunu sayfanın altına ya da üstüne sabitlemek için hangi sınıf kullanılır?

A

Navbar-Fixed

B

Navbar-Light

C

Navbar-Toggler

D

Navbar-Brand

E

Navbar-Nav

Doğru Cevap: A

Soru 14

Alert bileşeninde ekranda çıkan uyarıyı kapatmak için hangi sınıf kullanılır?

A

Alert-Link

B

Alert-Dannger

C

Alert-Warning

D

Alert-Primary

E

Alert-Dismissible

Doğru Cevap: E

Soru 15

Aşağıdaki bileşenlerden hangisi Bootstrap’ta web sayfalarında kullanıcı ekranı kaydırdıkça belirli nesnelerin vurgulandığı ya da öne çıktığı bir çerçeve özelliğidir?

A

Modals

B

ScrollSpy

C

Panels

D

Badge

E

Navbar

Doğru Cevap: B

Ünite 14

Soru 1

Slider ve kayan yazı oluşturmak için aşağıdaki Bootstrap bileşenlerinden hangisi kullanılır?

A

Card

B

Slider

C

Carousel

D

ScrollSpy

E

Media Object

Doğru Cevap: C

Soru 2

…….. bir tasarım yapmak için eklenilen görsellerin boyutları ayarlanmalıdır.
Cümlede boş bırakılan yere aşağıdakilerden hangisi getirilmelidir?

A

İç içe

B

Konumlanmış

C

Doğru

D

Biçimlendirilmiş

E

Duyarlı

Doğru Cevap: E

Soru 3

Aşağıdaki kütüphanelerden hangisi Carousel özelliğini kullanmak için gerekli olan kütüphanelerden biri değildir?

A

HTML

B

JS

C

CSS

D

jQuery

E

Popper.js

Doğru Cevap: B

Soru 4

Caraousel bileşenini kullanmak için aşağıdaki Bootstrap bağlantılarından hangisi eklenmelidir?

A

CSS

B

CND

C

Container

D

JavaScript

E

Class

Doğru Cevap: B

Soru 5

Carousel içindeki slaytlar aşağıdaki div sınıflarının hangisinde yer alır?

A

B

C

D

E

Doğru Cevap: E

Soru 6

…… düğmeleri sınıfı, kullanıcıya bir işlemin devam ettiğini göstermek için bir düğmenin içinde dönen bir animasyon gösterir.
Boşluğa aşağıdakilerden hangisi yerleştirilmelidir?

A

Loading

B

Button

C

Grid

D

Spinner

E

Gap

Doğru Cevap: D

Soru 7

Butonları işlemlerde devre dışı bırakmak için aşağıdaki sınıflardan hangisi kullanılır?

A

Disable

B

False

C

Active

D

Unactive

E

Reset

Doğru Cevap: A

Soru 8

Formu göndermek için oluşturulan buton türünde "type" aşağıdakilerden hangisi olarak belirlenmelidir?

A

Button

B

Submit

C

Reset

D

Input

E

Link

Doğru Cevap: B

Soru 9

Kırmızı renkli bir buton oluşturmak için bağlamsal renk sınıflarından hangisi kullanılmalıdır?

A

Primary

B

Secondary

C

Succes

D

Warning

E

Danger

Doğru Cevap: E

Soru 10

Akordeon bileşeninde yuvarlatılmış kenar ve köşeleri kaldırmak için aşağıdaki sınıflardan hangisi kullanılır?

A

Accordion-fade

B

Accordion-true

C

Accordion-flush

D

Accordion-ride

E

Acoordion-dispose

Doğru Cevap: C

Soru 11

Buton gruplarıyla açılır menüler oluşturmak için hangi bileşen kullanılır?

A

Dropdown

B

Carousel

C

Button

D

List Group

E

Progress

Doğru Cevap: A

Duyarlı Web Tasarımı - Tüm Sorular

Ünite 1

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 2

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 3

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 4

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 5

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Seçenekler

Ünite 6

Seçenekler

Seçenekler

Seçenekler

Seçenekler