Web geliştirmeyi öğrenmekle ilgileniyorum ve birkaç yıl önce W3Schools'tan HTML ve CSS ile ilgili bazı temel bilgiler edinmiştim, ancak günümüz standartlarına uygun web siteleri geliştirmeyi asla öğrenmedim, yani tabloları kullanmadan serbest akan siteler Sitenin tasarımını yönetmek.

Başlayabileceğim bazı iyi kaynaklar nelerdir?

CSS Zen Bahçesi

CSS Zen Garden'a göz atın ve çeşitli sonuçları gözden geçirin. Çok yönlüdürler ve aynı kaynak kod üzerinde çok fazla fark sağlarlar. Modern CSS teknikleri hakkında çok şey öğreneceksiniz. Bunları tamamen parçalamıyor olsanız bile, normal erişilebilir HTML'ye karşı en azından çok fazla ilham ve CSS yeteneği bulacaksınız. CSS Zen Garden ile ilgili en güzel şey stile karşı anlambilim. İçerik hiçbir şekilde stil değildir. Stilleri gördüğünüz her şey, yalnızca doğru yapmanın yolu olan CSS ile yapılır, çünkü veriler birçok farklı müşteri tarafından tüketilebilir ve stil yalnızca görselleştirenler tarafından tüketilebilir.

Kitaplar

Kitaplardan öğrenme söz konusu olduğunda, bu çok iyi bir başlangıç CSS: The Missing Manual'a benziyor .

Internet

İnternette pek çok örnek ve yaklaşım sağlayan Smashing Magazine'i okudum . Makaleleri tasarım işinden web tasarımında ve benzerlerinde büyük yaklaşımlara yaymaktadır.

Web siteleri ve uygulamaları nasıl oluşturacağınızı öğrenmenin en iyi yolu aslında bunu yapmak , yani projeler oluşturmanız ve her zaman yapmanız gerektiğidir. Bu kısa video yeni gelenlerin duygularını aktarıyor ve konuyla ilgili iyi tavsiyeler veriyor.

Ben de yazdım diğer bazı öneriler Başlamadan önce bir okuma vermek gerektiğini web geliştirme öğrenme ilgilenen kişiler için.

Ancak, herhangi bir kelime bilmediğiniz dilleri konuşamadığınız gibi, yararlı bir proje yapmadan önce temelleri iyi anlamanız gerekir. İşte size keşfetmenizi sağlayan bazı temel bilgileri ve siteleri seçmeniz için bazı kaynaklar.

Web geliştirmenin temellerini ücretsiz olarak öğrenebileceğiniz harika yerler var. Buradan başlayın, ancak doğrudan öğretmedikleri şeylerle oynamaları için dallanın. Birkaçını geçtikten sonra, baştan başa başka siteler / projeler yapmaya çalışın. Bunu yapmak kavramları güçlendirir, uygulama detaylarını öğretir ve muhtemelen size ilave şeyler de öğretir. Sadece okuyarak iyi bir geliştirici veya tasarımcı olamazsınız , oluşturmanız gerekir !

Web geliştirmeyi öğrenen tasarımcılara çarpışma kursu verdim

Bunu kontrol et! Tasarım temelli bir izleyici kitlesi için uyarlandılar ancak öğrenen herkes için geçerli. Slaytlardaki / post / videodaki temelleri öğretiyorlar, ardından gerçek dünyadaki ön uç gelişimini öğretmek için her birine küçük bir proje veriyorlar.

• Ders 1 - Web geliştirmenin sebepleri ve nedenleri
• Ders 2 - HTML ve CSS'yi Başlatma
• Ders 3 - JavaScript'i Başlatma (JS)

Diğer iyi öğretici web siteleri

• CodeAcademy - Birkaç dilin genel bilgi temelleri.
• Mozilla'nın "Web'i Öğrenme" serisi - Bu başlangıç ​​seviyesinde başlar ve sizi daha karmaşık konulara yönlendirebilir. Harika bir kaynak, kesinlikle tavsiye ederim.
• Udacity - Genel web geliştirme sınıfı.
• Tuts + - Daha spesifik konular üzerine dersler .
• KhanAcademy - Kişisel olarak kullanmadım, ama her geçen gün daha iyi görünüyor.

W3Schools kullanmayın , genellikle eski ve çok hata eğilimli. Bunun yerine, belirli bir şeyi ararken aşağıdaki belgelerden birini öğrenmek ve kullanmak için yukarıdakiler gibi bir eğitim sitesi kullanın.

belgeleme

Özellikler, kütüphaneler ve benzerleri için dokümantasyona bakmak iyi bir web geliştiricisi olmak için çok önemlidir. Aşağıdakiler, kullanabileceğiniz en iyi dokümanlar arasındadır:

• W3.org - Web tarayıcıları tarafından uygulanan çoğu şey için resmi belgeler. Bu dokümanları okumayı öğrenmek çok önemli! Bu herhangi bir şekilde W3Schools ile bağlantılı değildir .
• Mozilla Docs - Güncel kalmaya devam eden FireFox'un yaratıcılarından çok güvenilir bir 3. parti kaynak.
• WHATWG.org - W3'e bir tür açık kaynaklı rakip; bazı tarayıcılar zaman zaman W3 üzerinden buradan bazı önerilerde bulunur.
• DevDocs - Resmi değil, ancak bir sitede çok sayıda dil belgesi var. Oldukça uygun.

Yararlı yayınlar

• WebPlatformDaily - Günlük güncellenen her şeyle ilgili haber bültenlerinin listesi (hafta sonları hariç).
• SitePoint - Çeşitli konularda gerçekten faydalı makaleler.
• WebDesignerDepot - Spam tarafında olabilir, ancak gerçek makalelerinin çoğu iyi.
• Smashing Magazine - Daha gelişmiş konular, ama çoğunlukla hepsi iyi okuyor.
• A List Apart - Blog formunda biraz daha gelişmiş bilgi.

Editörler

Küçük projeler / kodla oynama

• JSFiddle - Küçük projeler yapın ve takip edin.
• CodePen - Başkalarının kod doodlesine bakın ve başkalarının görmesi için kendi kodunuzu gönderin.

Tam metin editörleri

• Yüce metin
• atom

Diğer faydalı web siteleri

• Kaynaklar sayfam - Bir girişten duyarlı tasarıma, bir web tarayıcısında canlandırmanın farklı yollarının analizine kadar, derlediğim kaynakların bir listesi.
• Ön uç geliştirici el kitabı - Çok çeşitli ön uç konularını kapsayan daha çeşitli, ancak faydalı bir yazı koleksiyonu.
• WebFieldManual - Yararlı kaynaklardan oluşan geniş bir koleksiyon.
• StackOverflow - Programlamaya ilişkin belirli bir sorunuz varsa, size yardımcı olması için StackOverflow benzersizdir.
• LearnLayout - CSS’de mizanpaj yapmanın temellerini öğrenin.
• Web tasarımında konumlandırma - Belki de en faydalı olan kaza kursumun bir parçası.
• Bilmeniz gereken 30 CSS seçici - Onları tanıyın ve daha sonra zaman kazanın. CSS seçici bilginizi sınamak için serin bir oyun da var .
• Codrops CSS Reference - Kısa ve yardımcı bir referans sayfası.
• CodeMentor and Thinkful - 1'de 1'e danışmanlık yapmak için ödeme yapabileceğiniz siteler.

Beğendiğiniz web geliştiricisinin ve tasarımcının kişisel bloglarını arayın. Genellikle harika, harika içeriğe sahiptirler.

Ayrıca UI tasarımına çok yararlı olabilecek bir giriş yazdım . İçinde bazı ek kaynaklar buldum.

Yeterince stres alamıyorum, öğrenmenin en iyi yolu sınırlarını zorlayan şeyler inşa etmek ve sürekli olarak bunu yapmak .

Yararlı web siteleri ile ilgili daha büyük (ve belki de ezici) bir liste için WebDesignRepo !

Web tasarımı hakkında bilgi edinmek için en iyi yerler (yerleşim çözümleri, kullanılabilirlik, grafikler ve teknik çözümler):

bu web sitelerinde makale yazan kişilerin tüm web sitesine bakın:

24ways.org dışında bir liste

Ya da liste tasarımı hakkında daha teknik bir şey ve yüzen http://css.maxdesign.com.au/index.htm

Web standartlarının ne olduğunu bilmek zorundasınız. Resmi kaynak şudur: World Wide Web Consortium (w3c) Oradan öğrenmek biraz zor çünkü çok teknik, ancak web’de işlerin nasıl yürüdüğünü ve neden işlerin nasıl yapıldığını bilmek istediğinizde bunu kontrol etmek iyi standartlar hakkında. En kullanışlı şey , HTML kodunuzun Validator'ıdır .

En iyi yollarından biri, iyi web sitelerinin kaynak koduna ve doğal olarak püf noktalarını öğrenmek için ayarlanmış olan şeylerin oranına iyi bakmaktır: http://www.cssbeauty.com/

Ve iyi web tasarımcılarının web sitesine bakın ve ne yaptıklarını:

Jason Santa Maria
Dustin Curtis,
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
vb. ...

ve Delicious yer imlerim (çeşitli şeyler var, onları kazmak ve ihtiyacınız olmayan şeyleri gözden geçirmek zorundasınız) http://www.delicious.com/Littlemad/webdesign

Tüm bu çerçeveleri öğrenmeye başlamadan önce ...

Dikkatinizi web tasarımın tasarım kısmına yönlendirmek istiyorum .

Tabii ki, kolayca Bootstrap veya başka bir çerçeve ile bir web sitesi oluşturabilirsiniz. Ama bu tasarlamıyor. Bir çerçeve bir temel olabilir, ancak kendi sıkıntınızı atmazsanız, temelde orada bulunan diğer tüm web sitelerine benzeyen bir web sitesi elde edersiniz .

Bu yüzden size tasarımın temellerini öğrenmenizi ve bunları kendi başınıza uygulamaya çalışmanızı öneririm.

(Güzel) web sitelerini nasıl kendi başınıza yaparsınız?

Şimdi bu bir kitaba değecek bir soru, ancak işte birkaç işaretçi:

1. Tasarımın temel prensiplerini okuyun . Bu 7 adım web tasarımındaki astar, başlamanıza yardımcı olacaktır. Ayrıca, Smashing Dergisi'nde bu yazı dizisi .
2. Diğer insanların tasarımlarına dikkat edin . Temel ilkeler nelerdi ve nasıl kullandılar? Ama sadece gözlemleme, gözlemlerine dikkat et .
3. Akılda iş hedefi ile tasarlayın . Bir işletmenin amacını gerçekleştirmesine yardımcı olmak ve kullanıcının kendi hedefine ulaşmasına yardımcı olmak için bir web tasarımı vardır . 2 gol yaklaştığında, herkes mutludur. Bu nedenle, bu amaç her zaman sizin başlangıç ​​noktanız olmalıdır. Yazı tipi seçimleri, renk seçenekleri, sayfa düzeni vb. Bu hedefe verdiğiniz her tasarım kararını vermelisiniz.
4. Tasarımınız boyunca uyum olduğundan emin olun . Genel olarak bu, göndermek istediğiniz mesaj, renkler, yazı tipleri, web sitesinin havası ve marka arasındaki uyum anlamına gelir. Boyutlandırma kararlarınızı yönlendirmek için modüler bir ölçek kullanarak tasarımlarınıza uyum katmaya başlayın. Bu mini seri uyum ve modüler ölçek kullanımı hakkında daha fazla açıklıyor.
5. Tipografiye bu muhteşem girişi okuyun : Butterick'in Pratik Tipografisi veya en azından bu özetini

Sıfırdan tasarlamaya çalışın

Şimdi, tüm bunları okumayı bitirdiğinizde ve HTML ve CSS'yi bildiğinizde, kendi basit tasarımınızı yapabileceksiniz.

Siyah beyaz bir metinle tek bir sayfa tasarlamaya çalışın .

Neden sadece metin? Çünkü metin web üzerinde bir mesaj iletmek için en çok kullanılan araç. Bu nedenle, bir web tasarımcısı olarak, metnin iyi görünmesini sağlamak ve okumaktan zevk alabilmek sizin için esastır.

Neden siyah beyaz? Çünkü renkleri seçmek başka bir canavar. Küçük adımlar atmanız, ilerlemeniz konusunda sizi mutlu edecek ve daha hızlı öğrenmenize yardımcı olacaktır.

Öğrendiğiniz temel tasarım ilkelerini uygulayın + başkalarının tasarımlarının gözlemlerini kullanın + o sayfanın amacını düşünün + metni modüler bir ölçek kullanarak boyutlandırın.

Öğrenmenin en iyi yolu işleri yapmaktır, bu yüzden kendinizi bir web sitesi yapın.

Standartları oku , alistapart , tutsplus .

Bir kitaba ihtiyacınız varsa, SitePoint'in - HTML Ütopyası'na bakın: CSS Kullanarak Tablolar Olmadan Tasarım .

Csszengarden ve W3Schools hakkında bazı düşünceler .

Açıkçası, WordPress sitelerinin nasıl geliştirileceğini öğrenerek başlardım. Evet, HTML, CSS, PHP kullanarak bir siteyi kodlayabilirim ... ama bir WordPress sitesini daha hızlı bir şekilde bir araya getirebilir ve sonra istediğim gibi özelleştirebilirim.

Sadece bugünün standartlarını öğrenmekle başlamak istiyorsanız, http://nettuts.com/ adresini tavsiye ederim . Ayrıca premium üyeliği almak ve bazı harika derslere erişmek de faydalı olacaktır. PSD'den HTML'ye gitmek ilgilendiğiniz bir şeyse, bunu kapsarlar.

Fındık, Envato'nun bir parçasıdır. Envato, web geliştirme, wordpress, vektörler, fotoğraf ve video düzenleme ve çok daha fazlasını kapsayan birçok öğretici siteye sahiptir. Başlamak için harika bir yer.

Sadece 2 sentim.

Photoshop web tasarımına yeni başlayanlar için bu siteyi tavsiye ederim http://psdvibe.com/

Tonlarca öğretici web sitesi vardır. Ancak, web tasarımı öğrenmek için en iyi platform http://teamtreehouse.com/ ' dır . Umarım yardımcı olur! nik