Modern dünyada, giderek daha fazla insan nasıl programlanacağını öğrenmek istiyor, ancak nereden başlayacaklarını bilmiyorlar, ancak aynı zamanda BT endüstrisi, web programcısı olmak artık moda olduğu için hayal ettikleri şey. Birçok insan için, web geliştiricileri veya küçük ön uç geliştiriciler, temel ön uç geliştirme gibi bu harika dünyaya ilk adımı konumlandırıyor. Ancak hayalinizdeki işi bulabilmeniz için önce bir yerden başlamanız gerekiyor. İşte bazı cevaplar almanız için bir başlangıç bilgi kitabı: Ön uç geliştiriciler için ücretsiz bir kurs var mı? Kendi başınıza çevrimiçi nasıl öğrenirsiniz, HTML, CSS ve JavaScript'te ustalaşmak için öğrenme materyallerini nerede bulabilirsiniz. HTML ve CSS biliyorsanız, web düzeni tasarımcısı pozisyonuna zaten başvurabilirsiniz.
Ön uç geliştirmenin temelleri nelerdir?
Web programlama dünyasına girmek, yepyeni insanlar için zor olabilir. Pek çok kavram kulağa tuhaf geliyor ve yazma aşamasında sorunlu hale geliyor. Nasıl yazılır: yazılım geliştirici mi yoksa ön uç geliştirici mi? Belki bir ön uç geliştirici veya daha doğrusu bir ön uç yazılım mühendisi? Ancak, en yaygın olanı kısa çizgi girişidir. Ön uç geliştirici—uygulamanın görsel kısmından sorumlu kişi (gördüğümüz, biz = sitenin kullanıcıları).
Genellikle, ön uç geliştirici, grafik tasarımı sağlayan bir grafik tasarımcı (web tasarımcısı) ile çalışır. Çoğu zaman, ön uç geliştiriciler, web sitelerinde gerçekleşecek etkileşimlerin bir prototipini öneren ve oluşturan bir UX tasarımcısı ile çalışma fırsatına sahiptir. Ön uç geliştiricilerin rolü, hepsini bir araya getirmektir. Popüler bir şekilde, bir ön uç geliştiricinin bir grafik tasarımı kesmekle, tasarımı daha küçük parçalara bölmekle ve (HTML ve CSS) kullanıcıların nihai olarak kullandığı web sitelerine kodlamakla görevlendirildiği söylenir.
Ardından JavaScript kullanılarak daha önce bahsedilen etkileşimler eklendi. HTML ve CSS3, yumuşak geçişler ve temel animasyonlar oluşturmamıza izin verirken, JavaScript tüm gelişmiş sayfa-kullanıcı etkileşimlerini sunar. JavaScript kullanarak, bir açılır menü, sayfada bir kaydırıcı, form doğrulama, alt sayfalar veya gelişmiş animasyonlar arasındaki geçişler ve 3D oyunlar (örn. Babylon-JavaScript kullanarak) ekleyeceğiz. Uygulamanın arka ucundan JavaScript'te mantık verileri, dolayısıyla ön uç işbirliği — arka uç geliştirici.
Ön uç geliştirici pozisyonları büyük ölçüde değişecektir. Etkileşimli ve yaratıcı bir ajansta bir ön uç geliştiricinin, bir yazılım geliştirme şirketi şirketinde bir ön uç geliştiricinin çalışması, bir girişimin ön uç geliştirmesi üzerinde çalışan bir kişi için farklı ve farklı bir iş görünecektir. .
Grafik projelerini kesen bir ön uç geliştirici, JavaScript Developers'a doğru gelişebilir - esas olarak uygulama mantığı ve gelişmiş JavaScript işlemleri yazmakla ilgilenen bir web programcısı. Ek olarak, bir ön uç geliştiricinin (ve bir arka uç geliştiricinin) genellikle uygulamanın JavaScript mimarisini planlaması ve proje için bilinçli olarak çerçeveleri ve kitaplıkları seçmesi gerekir.
Ön Uç Geliştirme Kolay mı?
- Etkisini hızlı bir şekilde görebilirsiniz; Web geliştirme/arka uç geliştirmeyi öğrenmenin aksine, saf HTML'de bile kod parçaları oluşturmak bize hemen görsel efektler verir ve bu da bizi çalışmaya devam etmeye motive eder.
- Düşük giriş eşiği—en başında staj veya genç pozisyonunda profesyonel bir kariyere başlamak için nispeten az sayıda ön uç becerisi gerekir.
- Gençler için çok sayıda iş teklifi - özellikle tatiller yaklaşırken ve çok sayıda yaz stajı olduğunda.
- Bağımsızlık—kendimiz için web siteleri oluşturmaya özen gösterebilir ve ardından serbest çalışan olarak siparişleri alabiliriz. Sonuçta temel kapsamda A'dan Z'ye basit web siteleri kurabilmeliyiz.
Ön uç geliştirme için neye ihtiyacımız var?
İşte başarının tarifi. Bir web sitesi oluşturmak için şunlara ihtiyacınız vardır:
HTML + CSS
Bunlar bir web sitesi oluşturmak için temel bileşenlerdir. HTML, web sitelerinin yapısını - açıklanan öğeler sağlar ve CSS, tarayıcıya bu öğelerin nasıl görünmesi gerektiğini söyler. HTML ve CSS'de uzmanlaştıktan sonra, herhangi bir (grafik) tasarımı yeniden oluşturabilir ve bir web sitesine dönüştürebilirsiniz.
JavaScript
Web siteleri oluşturmak için bir web programlama ön uç geliştirme dili. JavaScript sayesinde web sitenize etkileşim eklersiniz, yani kullanıcı eylemlerine yanıt veren web siteleri geliştirirsiniz. Hatta oyunlar da kurabilirsiniz. Dilin nasıl çalıştığını veya web programlama dili mantığını anlamak için en azından temel JavaScript koduna hakim olmanızı öneririz. Ardından jQuery'ye gidebilirsiniz.
jQuery
Teknik olarak, bu bir dil değil, bir JavaScript kitaplığıdır. JavaScript'i daha kolay ve daha hızlı yazmanıza izin veren bir aracı gibi. jQuery kodunu girersiniz; kütüphane sizin için endişelenir ve biraz karmaşık JavaScript'in anlamını tarayıcıya iletmek için çevirmenle oynar. Bugün jQuery "biraz eski" olmasına rağmen, "istek üzerine" öğrenmenizi öneririz, web programlama mantığını ve Bootstrap'i (kullanılan CSS çerçevesi) öğrenmeyi kolaylaştırır ve iş tekliflerinde görünmeye devam eder.
çerçeveler
Görevleri, en yaygın sorunlara hazır çözümler sunarak web siteleri ve uygulamalar oluşturma sürecini basitleştirmektir. Ek olarak, kodunuzu düzenli bir şekilde nasıl geliştireceğinize dair bir model sağlarlar. Yeni başlayanlar için, örneğin Bootstrap (diğer seçenekler: Foundation, Pure, YAML CSS) gibi bir CSS çerçevesi seçmenizi ve ardından şu anda popüler olan JavaScript çerçevelerinden birini eklemenizi öneririz: Angular 4, ReactJS, Vue.js, Ember.js, Meteor.js.
Git
Bu, doğrudan web kodlaması ile ilgili değildir, anladığımız kadarıyla genellikle sonuna kadar ertelenir. Hatalı bir şekilde, sürüm kontrol sistemi olan Git'i ne kadar erken kullanmaya başlarsanız o kadar iyidir. Önerdiğimiz sıralama budur. Tabii ki, bunu tamamen farklı bir şekilde yapabilirsiniz: jQuery'yi atlayın ve HTML ve CSS'nin temellerine hakim olduktan hemen sonra Bootstrap'ı öğrenin; bununla birlikte, basitleştirmede fazla ileri gitmemenizi ve elle yazılmış çözümleri aramaktan ve bir çerçeveden kullanılmayan prefabrikleri aramaktan kendinizi kesmemenizi veya salt JavaScript'te zar zor bir satır elde edebilen JavaScript çerçevelerini öğrenmemenizi tavsiye ederiz.
Ön uç geliştirmeye nereden başlamalıyım?
Düzenli olarak öğrenin ve her yeni beceriyi pratikte, hatta küçük kod parçalarında bile tek bir amaçla uygulamaya çalışın - az önce nelerde ustalaştığınızı göstermek için. Onları web'de paylaşın. Facebook'taki motivasyon gruplarınızı sınırlayın. Sadece 3 saat motive edici hikayeler okuduktan sonra, genellikle 3 kat daha fazla motive olmuyorsunuz. Çalışmanız için genellikle 3 saatiniz daha azdır.
Piyasayı izleyin ve iş tekliflerindeki gereksinimleri okuyun. Değişiyorlar! Bu yazıyı bugün yazıyoruz ve muhtemelen teknoloji değiştikçe bir yıl içinde güncellememiz gerekecek. Temel bilgileri kavradıktan sonra: HTML CSS JavaScript, trend olacak yeni bir şey olacaktır - "öğrenilecekler" listenizi güncelleyin. Ücretsiz atölye çalışmaları (akıl hocalarından öğrenmek ve aynı anda ilginç bağlantılar kurmak için) ve mümkün olan en kısa sürede bir endüstri stajı arayın. İş en iyi öğretmen olacak.
Ön uç geliştirme örneği nedir?
HTML + CSS
Üçü muhtemelen etkileşimli web ön uç geliştirme kurslarına sahip en ünlü sitelerdir. Ücretsiz, iyi organize edilmiş, bilgiyi yeni başlayanlara çok kolay aktarıyorlar. Tarayıcıda etkileşimli kurslar düzenlerler. Evde herhangi bir kurulum yapmamıza gerek yok, sadece kursu yapıyoruz ve ilerlememiz anında ölçülüyor.
Khan Academy, Codecademy ve Evde Eğitim
Khan Academy tamamen ücretsiz materyallere sahiptir ve ayrıca diğer web dillerini kullanma seçeneğine de sahiptir. Bu sadece web geliştirme ile ilgili olmayan bir eğitim platformudur. HTML ve CSS dahil olmak üzere temel öğelerden daha gelişmiş JavaScript komut dosyalarına kadar çeşitli görevleri gerçekleştirebilirsiniz.
Codecademy'de çok sayıda ücretsiz malzeme ve yalnızca profesyonel kullanıcılar tarafından kullanılabilen, önceden oluşturulmuş ilginç ön uç geliştirme yolları bulunur.
Kod Okulu - bizce en organize kurs. Videolardan + ön uç geliştirme görevleriyle etkileşimli bir bölümden oluşurlar. Her kursun ilk seviyesi ücretsizdir, ancak ne yazık ki geri kalanı için ödeme yapmanız gerekir. Ancak, ücretsiz bölümler bile (genellikle yaklaşık 1 saat) bir göz atmaya değer.
Alınacak bir kurs nasıl seçilir?
Üç web platformunu da görün. Konular örtüşüyor, ancak yinelenen bazı konuları gözden geçirmeye değer. Birincisi, tekrarlama bilgiyi pekiştirir ve ikincisi, her ön uç platformun öğretime biraz farklı bir yaklaşımı vardır. Seçim senin. Her şey parmaklarının ucunda ücretsiz olduğu için pek çok insan aylık bir Bootcamp veya web geliştirme kursu için ödeme yapmak istiyor. Alışılmadık bir şey yok.
En kötüsü, birçok materyalimiz var ve ihtiyacımız olan her şeyi kontrol etmeden veya seçmeden hızlıca öğrenmek istiyoruz - her şeyi tepsiye alın ve temel malzemelerin bir adım ötesine geçin. Bu nedenle, tüm ön uç kursları için zamanınız yoksa ve karar verme sizin beceriniz değilse, Khan Academy: HTML CSS'ye Giriş—Web Geliştirme'ye göz atın.
JavaScript
JavaScript kullanmadan ön uç geliştirme kursumuz ne olurdu? Yukarıdaki etkileşimli siteler harika. Bizim için JavaScript kursları var - güzel, basit, ne yazık ki çok kapsamlı değil, ama ısınmak için iyi. Zaten HTML ve CSS'nin temellerine sahipseniz, önceki önerilerle başlamanıza gerek yoktur.
Giriş bölümündeki 9 kısa geliştirme alıştırmasıyla başlamak için: JavaScript ile, Udacity'deki aynı konuları geliştirebilirsiniz: JavaScript Giriş, ardından (veya hemen) daha büyük bir görev grubuna geçebilirsiniz: HTML / JavaScript: Etkileşimli Web Oluşturma Sayfalar.
jQuery
Ön uç yolumuzda bir adım daha, ancak son derece isteğe bağlı. Şu anda, bir ön uç geliştirme kursu jQuery olmadan da yapılabilir. Özellikle günümüzde ön uç geliştiriciler için birçok heyecan verici yeni seçenek olduğundan, iş tekliflerine baktık ve yine de stokta bulunmaya değer.
Evet, Khan Academy ve Codecademy'de jQuery kursları var. Ancak, bu durumda, bir saatlik ve tamamen ücretsiz bir jQuery Pluralsight (eski Kod Okulu) ön uç geliştirme kursunu denemenizi tavsiye etmek istiyorum.
Öğrenme çerçeveleri
Bu aşamada ön uç materyalleri kendiniz seçebilir ve bilginize uygunluğunu değerlendirebilirsiniz. Bootstrap çerçevesi söz konusu olduğunda, bir web sitesi oluşturmak 12 sütunlu bir ızgaraya dayanır ve bu bilgi pratikte gerisini anlamak için esastır. Bootstrap, hızlı bir şekilde yanıt veren web siteleri (RWD) oluşturmanıza olanak tanır; yani, mobil cihazlar için uyarlanmıştır. Öğretici şeklinde öğrenmeyi tercih ediyorsanız: Önyükleme kursu Code akademisinde mevcuttur ve Daily Web ile ilk önyükleme kaydırıcınızı 30 dakika içinde oluşturacaksınız.
Çerçeveler JavaScript
Şu anda, iyi bir ön uç geliştirme kursu kesinlikle şu anda kullanılan JavaScript çerçevelerini tanıtmalı ve en azından birini öğretmelidir. 14 gün boyunca ücretsiz olan Pluralsight'ta (eski adıyla Code School) çerçevelerle etkileşimli kurslar bulabilirsiniz. scotch.io'da çok zengin bir ücretsiz malzeme koleksiyonu bulabilirsiniz. Öte yandan, her çerçeve için ücretsiz ön uç geliştirme kursları bulacağınız yerin aboneliğini iptal etmek ayrı bir yazının konusudur.
Bunlardan çok var. Seçim zor ve hepsini tanımak imkansız. Hangisiyle başlamayı seçerseniz seçin, ona sadık kalın. Çiçekten çiçeğe atlamayın çünkü web geliştirmeyi öğrendikten bir hafta sonra; biri size diğerinin daha iyi olduğunu söyleyecektir. İlkini öğrenin ve üzerine basit bir web uygulaması yazın. Genellikle yeni başlayanlar için planlayıcılar, yapılacaklar listeleri ve sıralama haberleri gibi uygulamalar önerilir. Tek ihtiyacınız olan çerçevenin adı ve oluşturmak istediğiniz web uygulamasının adıdır.
Ücretsiz kurs örnekleri:
- AngularJS
- Angular 2+ (şu anda 6—ancak 4/5 yalnızca başka bir ön uç geliştirme sürümüdür)
- ReactJS
- Vue.js
- Ember.js
Bu son mu? Değil! Bu, Junior Front-End Developer için mükemmel bir başlangıç ve sağlam bir temeldir.
Bu kurslardan sonra sırada ne var?
Web projeleriniz üzerinde çalışarak başlayın. Başta yazdığımız gibi, çalışmanızı ilk ön uç geliştirme adımlarından belgeleyin ve ideal olmaktan uzak olsa bile kodu GitHub'a koyun.
Kendini test etmek ister misin?
Öğrendiklerinizi pekiştirmenin en iyi yolu pratik yapmaktır. Ön uç kursu geçmek bir şeydir, ancak yalnızca web projeleriniz üzerinde çalışmak size kodlamayı, sorunları kendiniz çözmeyi öğretir. Sayfanın yazarına e-posta gönderebileceğiniz bir form (açılış sayfası) oluşturun.
Kartvizit web sitenizi oluşturun - portföy - tabloyu bir Fibonacci dizisi, kaydırıcınız veya sıfırdan basit bir oyunla doldurmak için JavaScript kullanmayı düşünün. Zaten kodlama becerileriniz olduğunu, ancak grafik becerileriniz olmadığını düşünüyorsunuz, bu nedenle yaptığınız geliştirme "çirkin" mi? Rica ederim! Hazır bir grafik tasarım seçin, örneğin Weekly Dev Challenge'dan ve onu yaratmaya çalışın.
Temel bilgileri öğrenmek ne kadar sürer?
O size bağlı. Disiplin en önemlisidir. Çoğu insan bir web programlama dili öğrenmeyi, ancak hiçbir maliyeti olmayan kurslara zaman ayırmayı daha zor buluyor. İlk web sitenizi kurmak için temel bilgilere hakim olmak, ön uç geliştirmede ne kadar iddialı olduğunuza bağlı olarak yaklaşık 1-3 ay sürebilir.
JavaScript'te ustalaşmak için 3 aylık bir zor öğrenme daha eklerdim. Çalıştığınızı varsayıyorum, bu yüzden haftada yaklaşık 5-10 saatinizi öğrenmeye, yani günde en az 1 saat ayıracaksınız. Altı ay içinde ön uç uzmanı olmayacaksınız, ancak bu, daha fazla öğrenim için bir temel oluşturmak için yeterli zaman.
Çevrimiçi yardım arayın
Öğrenirken birden fazla sorun yaşarsınız: Bir öğe nasıl ortalanır? Bu komut dosyası neden çalışmıyor? HTML ve CSS, Chrome'da Firefox'tan farklı görünür. Front-end geliştirmede nasıl profesyonel olunur?
Bu normaldir ama soran yanılmaz.
- Google — tercihen İngilizce olarak Google Amca'ya sorun.
- Yığın Taşması —Muhtemelen Yığın Taşması'ndan gelen yanıtları ilk açan kişi olacaktır. Kullanıcıların web programlama diliyle ilgili sorular gönderdiği ve diğerlerinin (genellikle daha deneyimli web programcıları) size ön uç geliştirme hakkında bir yanıt vermeye çalıştığı bir web geliştirici portalıdır. Eski en iyi çözümler puanlardır ve sorunun yazarı, sorununu çözen bir yorumu işaretleyebilir. Bazen birkaç veya bir düzine çözüm vardır, bu yüzden hepsini okumaya ve yerinde kontrol etmeye değer. Çözümlerden herhangi biri size yardımcı olduysa, oy verin - yukarı ok verin.
- Facebook — yeni başlayanlar için FB'deki ön uç geliştirme grupları, özellikle sorununuzu nasıl soracağınızı bilmiyorsanız size çok yardımcı olabilir. Bir ekran ve kodunuzu yükleyin. Birinin sizin için yazmasını beklemeyin, ancak yorumlar sizi mutlaka doğru yola yönlendirecektir. Ne yazık ki, önemsiz derecede basit sorularla insanlar her zaman hoş olmayan şeyler yazacaklar - bu zor, sabırlı olun. Web grubunu öneriyoruz - başlangıç desteği, yeni başlayanlarla ilgili sorular için en iyisidir ve moderatörler nefret olmadığından emin olurlar.
- CanIUse — Sorununuz CSS'nin tarayıcılarınızdan birinde çalışmamasıyla ilgiliyse, kullandığınız şeyin kontrol ettiğiniz sürüm için desteklendiğinden emin olun. Bu şekilde, hayalet ön uç sorunları için uzun ve sıkıcı aramalardan kaçınacaksınız.
Çözüm
Bu makalede, BT dünyası hakkında daha fazla şey öğrendiniz ve size yön konusunda yardımcı olabilirsek mutlu oluruz. Ön uç dünyası muazzamdır ve yeni başlayanlar için içinde kaybolması kolay olabilir, ancak biz insanların doğru yola girmesine yardımcı olmaya odaklanıyoruz. Ancak, geleneksel web dillerine ek olarak, kodsuz bir web programlama dili olduğunu da unutmayın. Kodsuz araçlar yaygın olarak kullanılana kadar, web uygulaması geliştirme yalnızca web programcıları tarafından yapıldı.
Neyse ki, zaman azalıyor ve artık materyali bilen herhangi bir öğrenci web uygulamasını veya açılış sayfasını oluşturabilir. Temel bilgileri, bilgi, HTML ve CSS düzeyinde bile öğrendikten sonra, hayalinizdeki işi zaten bulabilirsiniz. Birçok bilim insanı, web programlama dilinin insan yeteneklerini geliştirdiğini ve yumuşak becerilerin geliştirilmesine katkıda bulunduğunu belirtti. Sonunda, bu sizin finansal bağımsızlığınızdır. Başlangıçlarını başlatan ve gezegenimizin iyiliği için gerekli şeyleri yapan ön uç dünyadan farklı adamlar tanıyoruz.
Ve elbette, böyle bir yaklaşımın avantajları vardır:
- Kullanım kolaylığı ve büyük güç.
- Harika şablon kitaplığı.
- Çeşitli parametrelerin ayarlanmasını destekleyin.
Kodsuz veya görsel programlama dili, sıfırdan kod yazmak zorunda olmadığınız yeni bir yaklaşımdır. Web geliştirmenin geleceği olan grafik arayüzlü araçları kullanmanızı öneririz. Geleneksel ön uç web uygulamaları harika şeylerdir, ancak yenilik yapmanız gerektiğini düşünüyoruz, bu nedenle ürünümüz sizin için yararlı olabilir. Bir programcının mesleğinde ustalaşmak için doğru yolu bulmayı içtenlikle diliyoruz. Bu yol çetrefilli ama ustalaşırsan bu zamanda geçirmiş olduğun tüm hayatın boyunca seni tatmin edecek.
