Responsive Tasarım

Bugünkü görevde geçtiğimiz görevde yaptığınız portfolyo websitesini farklı genişlikteki tarayıcılarla uyumlu hale getireceksiniz.

Kullanıcı Arayüzü ve Git

Responsive Tasarım

Hedefler

• fixed, fluid, adaptive, and responsive kavramlarını anlamak ve tanımlamak
• bir projeye medya sorguları eklemek.
• yazı tipi boyutları için ölçeklenebilir birimleri kullanmanın erişilebilirliği nasıl etkilediğini ve erişilebilir web sayfaları tasarlamanın neden önemli olduğunu açıklayın

Giriş

Bu çalışmanın profesyonel bir Web Geliştiricisi için neden gerekli olduğunu söylemeye gerek yok. Telefonunuzda bir mağazanın web sayfasını ziyaret etmeye çalıştığınızı ve ürünlerin adlarını bile okuyamadığınızı hayal edin! Bu durum, bu çağda kabul edilemez bir şey olurdu. Aynı şey bir web geliştiricisinin portföy sitesi için de geçerlidir.

Bu görevde, responsive(duyarlı) hale getirmek için kişisel portföy websitenizin kodunu yeniden düzenleyeceksiniz. HTML, CSS ve responsive medya sorguları yazma becerisine sahipsiniz. Ayrıca, responsive(duyarlı) birimleri nasıl tanımlayacağınızı ve yazacağınızı da biliyorsunuz. Bu bilgiyi eyleme geçirme zamanı!

Giriş

Görev 1: Projeyi Yükleyin

Aşağıdaki adımları takip edin.:

• REPOSITORY'yi forklamayın ve KLONLAMAYIN. DÜNKÜ ÇALIŞMADAN DEVAM EDECEĞİZ.
• konsoldan repo klasörünüze girin ve VS Code'u açmak için code . girin.
• ad-soyad-responsive adında bir branch oluşturun.
• VS Code'un sol tarafındaki Eklentiler bölümünden Live Server eklentisini indirin. Eklenti yüklendikten sonra sağ altta bulunan "Go Live" butonuna basarak HTML dosyanızı çalıştırabilirsiniz.
• Çalışmanızı tamamladıktan sonra ad-soyad-responsive branch'ına pushlayın.

Görev 2: Minimum Uygulanabilir Ürün

Bugün işinize rehberlik etmesi için aşağıdaki listesiyi kullanın. Nihai ürününüz mobil, tablet ve masaüstü ekran genişliklerinde rahatça izlenilebilir olmalıdır.

• Bu html attributeleriyle(öznitelikleriyle) projenin başlığına bir görünüm meta etiketi ekleyin: content="width=device-width, initial-scale=1"
• max-width medya sorgunuzda 800px and 500px piksellerini eşik olarak kabul edin
• Web sayfanıza erişilebilirlik özellikleri ekleyin
• Tasarımınız hemen hemen mobil çerçeveler 'de verilen bir tasarıma yakın olmalıdır.

Görev 3: Ek Görevler

Minimum uygulanabilir projeyi bitirdikten sonra, aşağıdaki kapsamlı hedeflerden herhangi biri üzerinde çalışın:

• Website'nizi çeşitli ekran boyutları için test edin. Bazı boyutlar aşağıda verilmiştir:
  • iPhone: 360×640
  • Laptop: 1366×768
  • Geniş ekran: 1920×1080

SSS

Son yaptığım site henüz işim bitmediyse ne olacak?

*Sorun değil, 2 görevi tek bir projede yapmaya devam edebilirsin.

Sitem mobilde çalışıyor - bu responsive sayılır mı?

Mobil websayfası ile Responsive websayfası aynı şey değildir. Responsive websayfaları tablet, mobil, büyük ekran vs gibi tüm ekranlarda tam okunulabilirdir.