Öğrenme yolu

Web tasarımı

Web tasarımı, tek bir ad taşıyan iki ayrı iştir: çalışan bir şey kurmak ve doğru görünen bir şey kurmak. Bu yol çalışan kısımdan başlar, çünkü bozuk bir yapının üstüne oturan görünüm sonradan kurtarılamaz.

  • 12 ders
  • Ücretsiz, kayıt yok

Hiçten gerçek bir siteye, basamak basamak

  1. 1

    Bir sitenin nasıl çalıştığını anlamak

    Alan adı, sunucu, tarayıcı ve aralarındaki gidiş dönüş.

  2. 2

    HTML ile sayfa kurmak

    Anlamsal iskelet ve her etiketin tarayıcıya ve ekran okuyucuya ne söylediği.

  3. 3

    Görünüm ve davranış: CSS ve JavaScript

    Yerleşim, duyarlılık ve gerçekten gereken kadar JavaScript.

  4. 4

    Tasarım kararları: arayüz, deneyim, erişilebilirlik

    Zevkin bittiği ve kuralların başladığı yer.

  5. 5

    Gerçek, yayımlanmış bir site

    WordPress ya da bir kurucu, artı yayından önce geçilmesi gereken kontrol listesi.

Hiçbir basamak sabit bir hafta sürmez. Tırmanma hızınız, kaç video izlediğinize değil, bir şeyi kaç kez kurup bozduğunuza bağlıdır.

Yol, adım adım

Dersler her biri bir öncekinin üzerine kurulacak şekilde sıralandı. İstediğiniz yerden de başlayabilirsiniz.

  1. 1Bir web sitesi nasıl çalışırBir site adresi yazdığınızda tarayıcınız önce alan adını sayısal bir adrese çevirir, arkasında oturan bilgisayara bağlanır, bir HTML metni alır ve sayfayı o metinden kurar. Web sitesi bu kısa gidiş dönüştür ve gördüğünüz her sorun bu zincirin bir halkasında olmuştur.Başlangıç
  2. 2Sıfırdan HTML öğreninHTML bir programlama dili değil, sayfa yapısının dilidir: onunla bu bir başlık, bu bir paragraf, bu bir liste, bu bir bağlantı dersiniz. Başlamak için yalnızca html uzantılı bir metin dosyası ve bir tarayıcı gerekir; ilk sayfanız ilk on dakikada kurulur.Başlangıç
  3. 3Sıfırdan CSS öğreninCSS, HTML'in kurduğu şeyin nasıl görüneceğine karar verir: renk, boşluk, boyut ve her öğenin yeri. Her kuralın üç parçası vardır: hangi öğe diyen bir seçici, neyi diyen bir özellik ve bir değer.Başlangıç
  4. 4Yeni başlayanlar için JavaScriptJavaScript sayfaya davranış katar: ziyaretçinin yaptığına tepki vermek, sayfayı yenilemeden içeriği değiştirmek ve sunucudan veri almak. Sayfanın iskeleti HTML'in, görünümü CSS'in işidir; JavaScript yalnızca sayfanın bir şey yapması gerektiğinde gerekir.Başlangıç
  5. 5Duyarlı tasarım nedirDuyarlı tasarım; mobil ve masaüstü için ayrı sürümler yerine, tek bir sayfanın, tek bir adresin ve tek bir içeriğin yerleşimini ekran genişliğine göre değiştirmesi demektir. Yerleşimin değiştiği genişlikler bir cihaz listesinden gelmez; kendi yerleşiminizin kırıldığı yerlerden gelir.Başlangıç
  6. 6Kullanıcı arayüzü tasarımının ilkeleriİyi bir kullanıcı arayüzü, kullanıcının bir sonraki adımı düşünmeden anladığı arayüzdür ve bunu dört şey kurar: hiyerarşi, kontrast, boşluk ve tutarlılık. İlk üçü ölçülebilir; dördüncüsü ise satış amaçlı bir sayfada yaratıcılıktan daha çok iş görür.Başlangıç
  7. 7Kullanıcı deneyimi nedirKullanıcı deneyimi, bir kişinin hedefine ulaşmak için kat ettiği yolun tamamıdır; adınızı duyduğu andan işi bitirdiği ya da bıraktığı ana kadar. Kullanıcı arayüzü o yolun yalnızca yüzeyidir; deneyim ise yolun kendisidir, içindeki gereksiz, belirsiz ya da yorucu her adımla birlikte.Başlangıç
  8. 8Yeni başlayanlar için WordPressWordPress bir içerik yönetim sistemidir: her sayfayı kodlamak yerine içeriği bir panele yazarsınız, WordPress de onu sayfaya çevirir. Başlamak için üç şey gerekir: bir alan adı, barındırma ve yaklaşık yarım saat; yolun geri kalanı ise bu dersin sıraya koyduğu bir dizi karardır.Başlangıç
  9. 9Site kurucusu mu, özel tasarım mıSite kurucusu ile özel yapım, iki farklı sorunun iki doğru yanıtıdır: biri ilk sürüme ulaşma hızını satın alır, diğeri denetimi ve sahipliği. Sitenin tam olarak ne yapması gerektiğinden henüz emin değilseniz kurucu daha iyi bir seçimdir; ihtiyacınız netse ve hazır özellik listesinin dışına düşüyorsa özel yapıma gidin.Başlangıç
  10. 10Web erişilebilirliği nedirWeb erişilebilirliği; klavyeyle, ekran okuyucuyla ve renkleri farklı gören bir gözle de kullanılabilen bir sayfa kurmak demektir. Çoğu zor değildir: doğru HTML, yeterli kontrast, görülebilen bir odak durumu ve alternatif metin taşıyan görseller.Orta
  11. 11Yayına almadan önce site kontrol listesiYayın kontrol listesi iyi uygulamaların listesi değildir; yayından sonra pahalılaşan ya da hiç geri gelmeyen şeylerin listesidir. Dört sütunu vardır: teknik, içerik, hukuk ve ölçüm; en önemli maddesi de deneme sürümünden kalan yedi harflik bir etikettir.Orta
  12. 12Web tasarımında yapay zekaYapay zeka bugün bir sayfanın taslağını dakikalar içinde kurar ve orada durur: size verdiği şey bin başka sayfaya benzer, çünkü onlardan öğrendi. Konumumuz basit: taslağı modelle, yayını insan hükmüyle; işin zor kısmı da tam olarak o hüküm.Orta
Sıfırdan web tasarımı: ücretsiz ve sıralı bir yol

Derslerin sırası basit bir gözlemden geliyor: önce HTML öğrenip sonra site kurucusuna geçen biri ne yaptığını anlar; tersinden başlayan biriyse karşılaştığı ilk gerçek sorunu anlamak için elinde hiçbir araç bulamaz. Bu yüzden önce bir site açıldığında ne olduğuna, sonra sayfa yapısının diline, ardından görünüm ve davranışa, en sonda da WordPress ve yayına bakıyoruz.

Bu yol sizi programcı yapmaz, böyle bir iddiası da yok. Amacı şu: gerçek bir sayfa kurabilmeniz, başkasının kodunu okuyup anlayabilmeniz ve bir şey bozulduğunda nereye bakacağınızı bilmeniz. Kendi sitesini isteyen çoğu kişi için bu üçü yeterlidir.

Yüksek sesle pek söylenmeyen bir şey: pek çok işletme için site kurucusu doğru yanıttır ve kimsenin özel bir yapıya ihtiyacı yoktur. Bu soruya ayrılmış ders, yanıtı önceden bilmek yerine, kurucunun nerede doğru seçim olduğunu ve nerede olmadığını söylüyor.

Gerçek devam soruları

Site kurmak için mutlaka kod bilmek gerekir mi?

Kurmak için hayır, anlamak için evet. WordPress ya da bir kurucu, tek satır kod olmadan siteyi ayağa kaldırır. HTML ve CSS okumuş biriyle okumamış biri arasındaki fark, bir tema bozulduğu ya da sayfa yavaşladığı gün ortaya çıkar.

Site kurucusuyla mı başlamalıyım yoksa kod yazarak mı?

Amacınız kendi sitenizi ayağa kaldırmaksa bir kurucuyla ya da WordPress ile başlayın ve yanında HTML okuyun; çalışan bir şeyi daha erken görürsünüz. Amacınız tasarımcı olarak çalışmaksa koddan başlayın, çünkü müşteri tam olarak kurucunun yetmediği yerde size ihtiyaç duyar.

Web tasarımı öğrenmek ne kadar sürer?

Kendi kurduğunuz ilk sayfa ilk gün kurulur. O sayfayla, ödeme yapan bir müşteri için gerçekten çalışan bir site arasındaki mesafeyi dolduran şey, izlediğiniz video saatleri değil, bozduğunuz proje sayısıdır. Size kesin bir sayı veren biri kurs satıyordur.

Bu yol, kendi kurmak ya da anlamak isteyen biri için yazıldı. Vaktiniz yoksa ve işi devretmeyi tercih ediyorsanız, web tasarımı hizmet sayfasına bakın