Web Tasarım Öğrenmek için 30 Ücretsiz Video Öğreticiler
Web tasarımına başlamak oldukça zor olabilir. Okuyucular için, çevrimiçi tonlarca harika ücretsiz öğretici var. Bununla birlikte, bazı insanlar görsel talimatların öğrenme stilleri için daha etkili olduğunu düşünmektedir.
Eğitici videolar inanılmaz derecede zengin bir öğrenme aracıdır ve nihayetinde web geliştirmeyi düzgün bir şekilde öğrenmek için ihtiyacınız olan şey olabilir. Bir dizi web teknolojisi ve disiplinde yeni başlayanlar için 30'dan fazla mükemmel ekran görüntüsünü derledik.
Tasarım Kaynaklarını Keşfedin
Nettuts
NetTuts, web tasarımı öğrenmeyle ilgili ücretsiz içerik için en iyi sağlayıcılardan biridir. Her seviyedeki öğrenciler için çok sayıda makale ve video eğitimi var. İşte HTML5, CSS3 ve JavaScript'te yeni başlayanlar için birkaç tane.
Bir Tasarım Oluşturma ve HTML ve CSS'ye Dönüştürme için Nihai Kılavuz
“Bu ekran görüntüsü, kurgusal bir işletme için nasıl güzel bir ana sayfa oluşturulacağını gösteren TUTS siteleri genelinde çok bölümlü bir dizinin son girişi olacak. Vectortuts + üzerinde tel kafes oluşturmayı öğrendik; Psdtuts + 'a renk, doku ve efektler ekledik; şimdi tamamladığımız PSD'yi alıp güzel kodlanmış bir HTML ve CSS web sitesine dönüştüreceğiz. ”
Tüm Tarayıcıların HTML5 İşaretlemesini Doğru Şekilde Oluşturma: Ekran Kaydı
“HTML 5, okunabilir, anlamsal olarak anlamlı düzenleri kodlamak isteyen web tasarımcıları için bazı yeni harika özellikler sunuyor. Ancak, HTML 5 desteği hala gelişmektedir ve en son Internet Explorer destek eklenmektedir. Bu öğreticide, HTML 5'in yeni semantik öğelerinden bazılarını kullanarak ortak bir düzen oluşturacağız, ardından tasarımımızı Internet Explorer ile geriye dönük uyumlu hale getirmek için JavaScript ve CSS kullanacağız. Evet, IE 6 bile. ”
Lav Lambası Stili Gezinme Menüsü Nasıl Oluşturulur
“Okuyucularımızdan biri lav lambası tarzı bir menünün nasıl oluşturulacağı konusunda bir eğitim istedi. Neyse ki, özellikle bir JavaScript kütüphanesi kullanırken oldukça basit bir görev. Bugün sıfırdan bir tane inşa edeceğiz. ”
JavaScript'ten Null: Video Serisi
“Bu screencast serisi sadece JavaScript'e odaklanıyor ve sizi ilk“ Merhaba, Dünya ”uyarısından daha gelişmiş konulara götürecek.”
PSD'yi XHTML'ye Dönüştürme
“Collis'in“ Sıfırdan Şık Bir Portföy Sitesi Oluşturun ”eğitiminin ne kadar başarılı olduğuna hayran kalmaya devam ediyorum. Aylar geçti, yine de her hafta güçlü rakamlar yayınlıyor. Bu gerçeği göz önünde bulundurarak, size bir PSD'yi mükemmel XHTML / CSS'ye nasıl dönüştüreceğinizi gösteren bir ekran görüntüsü oluşturmaya karar verdim. ”
Dilim ve zar PSD
“Bugünün video eğitiminde, bir PSD'yi dilimleyeceğiz, web için doğrayıp sıcak bir tabağa servis edeceğiz. Tasarımımız temiz bir “Web 2.0” hissi veriyor ve ThemeForest.net'ten Joefrey'in izniyle geliyor. Şansınız varsa profilini ziyaret ettiğinizden emin olun. ”
Doctype TV
Doctype'deki adamlar, web tasarım spektrumunda değişen konularda sıkça ekran görüntüsü verdi. Aşağıda, Ajax, ızgara tabanlı tasarım, CSS3 sütunları ve ilk jQuery eklentinizi oluşturmaya başlamak için videolar bulacaksınız.
Izgara Tabanlı Tasarım ve AJAX 101
“Nick, ızgara tabanlı tasarıma genel bir bakış sunuyor ve Jim, AJAX'ın temellerini yıkıyor.”
CSS3 Sütunları ve jQuery Eklentileri
“Nick, CSS çok sütunlu yerleşimleri çözer ve Jim size kendi jQuery eklentinizi nasıl oluşturacağınızı adım adım gösterir.”
TutVid
TutVid ücretsiz öğretim videoları sunan bir web tasarım öğretici sitesidir. İlişkili proje dosyalarıyla birlikte daha yüksek çözünürlüklü indirilebilir bir sürüm almak için belirli bir video da satın alabilirsiniz. Aşağıda mevcut Dreamweaver öğreticilerinden birkaçına bakacağız.
Dreamweaver CS4: Etiketleri CSS ile Stil Oluşturma
“Stil etiketleri ve Dreamweaver'da CSS kodunun nasıl yazılacağı hakkında her şeyi öğrenin. Bu eğitimin sonunda, CSS'nin nasıl yazılacağı, CSS'nin nasıl çalıştığı ve CSS kodunuzu Dreamweaver'da nasıl yazabileceğiniz konusunda iyi bir anlayışa sahip olacaksınız. ”
14 Adım: Div'ler Nasıl Kullanılır
“Div'leri kullanmaya başlarken bilmek istediğiniz her şeye bir göz atacağız. Div'leri yerleştirme ve kullanma, Dreamweaver'da CSS ile şekillendirme hakkında her şeyi öğrenin! ”
Temel XML Belgesi Oluşturma
“Bu videoda hızlı bir şekilde XML, ne olduğu ve ne için kullanıldığı üzerinde çalışacağız. Daha sonra oturup altı XML'den oluşan basit bir liste olan ilk XML belgemizi yazacağız. Dreamweaver'ı kullanacağız, ancak gerçekten herhangi bir metin editörü iyi. Gerçek dili yazmayı, öznitelikleri eklemeyi ve kendi etiketlerimizi nasıl oluşturduğumuzu ve kendi XML belgenizi yazmaya devam etmenizi sağlayacak bazı temel konuları ele alacağız. ”
Tam CSS Web Sitesi Oluşturma
“Bu videoda bir görüntü klasörü ile başlayacağız ve yaklaşık 30 dakika içinde sayfamızı şekillendirmek için CSS kullanarak çok basit bir 2 sütun düzeni oluşturacağız! Div'leri kullanma, CSS kuralları oluşturma, div'ları hedefleme, arka plan oluşturma ve çok daha fazlası hakkında her şeyi öğreneceğiz! Bugün web sayfalarınızı oluşturmak, düzenlemek ve şekillendirmek için Basamaklı Stil Sayfalarının ham gücünü kullanmayı öğrenmeye başlayın! ”
ThemeForest
Themeforest, çeşitli türlerde (HTML, WordPress, Joomla vb.) Web sitesi şablonları satan bir Envato pazar alanıdır. Sitede ayrıca zaman zaman gerçekten yararlı bazı içerikler yayınlayan bir blog var. Aşağıdaki PHP ve jQuery ekranlarına göz atın.
PHP Video Serisine Dalış (11 Parça)
“Bugün, size tam olarak PHP'ye nasıl başlayacağınızı gösteren yepyeni bir dizinin başlangıcını işaret ediyor. Tıpkı “Mutlak Yeni Başlayanlar için jQuery” serisinde olduğu gibi, sıfırdan başlayıp daha ileri konulara kadar yavaş yavaş ilerleyeceğiz. ”
Mutlak Yeni Başlayanlar için jQuery
“Bugünden itibaren, jQuery kütüphanesini kendi projelerinizde nasıl kullanacağınızı KESİNLİKLE size öğretecek günlük bir video serisi başlatıyorum. Çerçeveyi indirerek, ilk fonksiyonumuzu oluşturarak, sözdizimini inceleyerek ve daha fazlasını yaparak başlayacağız. Her gün, daha önce öğrendiklerinizi genişleten beş dakikalık bir “eğitim rejimi” göndereceğim. Yani artık onunla savaşmak için bir sebep yok! Bu tehlikeli şeyi öğrenin ve yeni bulunan becerilerinizle ThemeForest.net'te daha fazla para kazanmaya başlayın. ”
CSS Hileleri
CSS Tricks'teki Chris Coyier, inanılmaz derecede eğitici video eğiticilerinden oluşan düzenli bir akış sunuyor. Sitesinde şu anda çeşitli HTML, CSS ve JavaScript tekniklerini ve ipuçlarını kapsayan 84 ücretsiz ekran görüntüsü bulunmaktadır. Aşağıda yeni başlayanlar için yardımcı olması gereken altı taneye bakacağız.
Photoshop Maketi Dönüştürme (bölüm 1/3)
“Bu ilk video podcast'te, bir web sitesinin Adobe Photoshop modelinin gerçek bir canlı CSS tabanlı web sitesine dönüşüm sürecine başlıyorum. Bu oldukça kaba millet, eminim bunlar zamanla daha fazla odaklanacak. ”
CSS Biçimlendirme
“Düzenli olmak ve CSS dosyalarınızda iyi biçimlendirme kullanmak, geliştirme süreciniz sırasında ve özellikle sorun giderme sırasında size çok fazla zaman ve hayal kırıklığı kazandırabilir. Çok satırlı biçim, niteliklere göz atmayı kolaylaştırır, ancak dosyanızı dikey olarak çok uzun hale getirir. Tek satırlı biçim, dosyanızı seçicilere göz atmak için güzel olan dikey olarak kısa tutar, ancak özelliklere göz atmak daha zordur. Ayrıca CSS ifadelerinizi nasıl gruplandırmak istediğinizi de seçebilirsiniz. ”
Photoshop Maketi Dönüştürme: İkinci Bölüm, Birinci Bölüm
“Photoshop Mockup'u HTML / CSS'ye Dönüştürmenin ilk serisinde çok fazla geri bildirim yapıldı. Hadi tekrar yapalım! Her web sitesi farklıdır, farklı dönüşüm teknikleri gerektirecektir, bu nedenle bu sefer öğrenilecek çok şey olacak, bu da son zamandan farklı olacak. ”
WordPress için Tasarım: Birinci Bölüm
Birinci bölümde, WordPress'i indirip kuracağız. Ardından, yeni tasarımımız için tamamen yeni bir sayfa ile başlamak için Elliot Jay Stocks'in “Starkers” temasını yükleyeceğiz. Varsayılan tema ile başlamak mantıklı değil, değerinden daha fazla sorun! İkinci bölümde, WordPress için tasarımın arkasındaki teoriyi ve bunun nasıl "modüler olarak çalışmak" gibi olduğunu ele alacağız ve aslında tasarım yapmaya başlayacağız. Üçüncü bölümde, tasarımı tamamlayacağız ve daha gelişmiş işlevlerle başlayacağız. ”
HTML ve CSS - ÇOK Temel Bilgiler
“Bu video, yeni başlayanlar için HTML ve CSS'nin ne olduğu ÇOK temel bilgilerdir. HTML ve CSS dosyaları, kelimenin tam anlamıyla sadece metin dosyalarıdır. Güzel bir kod editörü yardımcı olsa da, bunları oluşturmak için herhangi bir özel yazılıma ihtiyacınız yoktur. Bu dosyaları herhangi bir bilgisayarda oluşturabilir ve geliştirme sırasında web tarayıcınızı önizlemek için kullanabilirsiniz. HTML'yi web sitenizin içeriği olarak düşünebilirsiniz: bir grup metin ve etiketlere sarılmış görüntülere referanslar. CSS, web sitenizin tasarımıdır. HTML'nize yazdığınız etiketleri hedefler ve stili uygular. Bu iki şeyi ayrı tutmak kaliteli web tasarımının anahtarıdır. ”
Web Sitesi Oluşturma: HTML / CSS Dönüşümü
“Bu serinin 2. bölümünde, birinci bölümde oluşturduğumuz Photoshop maketinin HTML / CSS dönüşümüne başlıyoruz. Çok iskeletsel bir proje çerçevesi ile başlıyoruz. Sonra Photoshop dosya katmanı organizasyonuna bir göz atıyoruz. Sonra aşağıdan başlayarak, Photoshop dosyasından ihtiyacımız olan parçaları yaratıyoruz ve işi yapmak için ihtiyacımız olan HTML ve CSS'yi yazıyoruz. İşin çoğu aslında Photoshop dosyasını “dilimlemek” değil, ona yakından bakmak ve orada doğru işaretleme ve CSS teknikleri ile neler yapıldığını taklit etmeye çalışmak. ”
Victoria Web
Victoria web şu anda beta sürümünde olan bir tür çevrimiçi web okuludur. Web geliştiricileri için küçük bir avuç ücretsiz video dersleri var.
PHP'ye Başlarken
“PHP uygulamaları öğrenmeye ve oluşturmaya başlamak mı istiyorsunuz? Bu video, endüstri profesyonellerinin uygulamalarını hızlı ve etkili bir şekilde çalıştırmak ve çalıştırmak için kullandıkları araçları gösteriyor. ”
jQuery Giriş
“JQuery JavaScript çerçevesine giriş. DOM nesnelerini değiştirmek, onları görünüme ve dışına kaydırmak, solmak ve özel animasyonlar oluşturmak için CSS seçicilerini nasıl kullanacağınızı öğreneceksiniz. ”
Tüm Web Tasarımı
“Bu bayilik web sitesini baştan sona oluşturmayı öğrenin. Katman maskeleri, kırpma maskeleri, yansımalar, gölgeleme ve daha fazlası gibi çeşitli teknikleri kapsar. ”
ShowMeDo
ShowMeDo, açık kaynaklı teknoloji ve yazılımlarla çalışma hakkındaki eğitici videolar için bir kaynaktır.
Javascript'in temelleri
“Bu videoda Javascript'in temellerini gösteriyorum. Etiket, etiket arasında başlar. Etiket arasında da olabilir. Bu nedenle, tag (onload) özelliğindeki message () işlevini çağırırız (yani, sayfa yüklendiğinde). Html sayfasında ve uyarı kutularında basit metin çıktısı almak, bir işlev ve bir if / else deyimi tanımlamak, bize Javascript'in ne olduğu hakkında anında ve genel bir fikir verir. ”
Sıfırdan Python
“Bu video serisi, yeni başlayanlar için python programlamaya çok temel bir yaklaşım. İzleyicilerin, bilgisayar grafikleri hakkında önceden bilgi sahibi olmadan basit 2D oyunların nasıl yapılacağını gösterecek pygame eğiticilerine kadar ayarlanmış kalacağı umuduyla. ”
Diğer kaynaklar
Aşağıdaki videolar web'deki dağınık kaynaklardan alınmıştır. Kapsamlı bir eğitim aldığınızdan emin olmak için mümkün olduğunca çok ayrı kaynaktan öğrenmek her zaman iyidir.
WordPress Şablonu Oluşturma - Bölüm 1/3
“İlk WordPress temanızı oluşturmak için üç bölümden oluşan derin bir inceleme.”
WordPress Temasını Değiştirin - Video Eğitimi
“Bu, Advanced WordPress Video Tutorials'ın 3. videosudur. Bu video eğitimi, bazı WordPress tema kodlarıyla nasıl çalışılacağını, yani blog kenar çubuğuna otomatik yanıtlayıcı kodunun nasıl ekleneceğini, tek bir gönderiye ve benzer şeylere nasıl afiş konulacağını gösteriyor. ”
Wordpress eklentisi nasıl yapılır
"Bir wordpress eklentisi nasıl hazırlanacağına dair kısa bir video eğitimi."
Web Sitesi Oluşturma: Başlangıçtan Bitişe
HTML ve CSS kodlama yoluyla Photoshop'ta bir web sitesi tasarlamanıza olanak tanıyan üç bölümlük bir seri.
John Resig tarafından jQuery Online Film Eğitimi
“JQuery javascript kütüphanesinin yaratıcısı John Resig, jQuery kullanarak akordeon tarzı menüsünün nasıl yapılacağı hakkında çevrimiçi bir video yayınladı. Oldukça basit şeyler… ama bu konuda yeniyseniz jQuery'ye iyi bir giriş. ”
Sonuç
Yukarıdaki tüm ücretsiz kaynaklarla, siteleri elle kodlayamadığınız için mazeretiniz bittiğini umuyoruz. Ayaklarınızı ıslatmak için zıplama zamanı. Sadece yukarıdaki videolarla birlikte takip size yükleri öğretecek ve tam teşekküllü bir web geliştiricisi olma yolunda size yol gösterecektir.
Daha fazla ücretsiz video eğitimi biliyor musunuz? Aşağıdaki yorumlarda bir bağlantı bırakın.
