Rehber Başlangıç için Frontend rehberi

Selam arkadaşlar :)

Bir süredir Web Programlama ile uğraşıyorum ve bu forumda sürekli olarak yazılımla alakalı konu açılıyor. Web Programlama ile ilgilenenler var ise bu rehberi onlara da atabilirsiniz.
Öncelikle bu rehber ilk rehberim ve saat 02:48 yazmaya başlarken onun için hatalar veya eksik kısımlar olabilir.

Tavsiyelerim:​


Hata yapmaktan korkmayın. Arkadaşlar hata yapmadığımız sürece doğrusunu öğrenemeyiz. Yazılım da hata yapmak en normal ve sizi en çok geliştiren şeydir. Tabii ki bile bile hata yapın demiyorum :) sadece hata yapmaktan korkmayın ve hata yaparsanız bir anda projeyi silip yeniden açmayın.

Proje bazlı çalışın. Proje yapmadığınız sürece hiçbir şey öğrenemezsiniz. Emin olun bunu ben yaşadım çok uzun süre sadece teorik olarak öğrendim ama en basit bir şeyi gördüğümde bile korkuyordum. Bunu sadece hata ve proje yaparak aşabilirsiniz.

Disiplin kazanın. Yazılım ne zor ne de basit bir şey. Kendi kendimize öğrendiğimiz için bir süre gerçekten motivasyon kaybedebilirsiniz ama arkadaşlar o kayıplar öyle bir geçiyor ve yerini güzel şeylere kaptırıyor ki... Sadece zaman verin. Önemli olan gerçekten istemeniz. 1 hafta bakıp bırakacaksanız hiç başlamayın kendinize zaman kaybettirmeyin.

Bir sonra ki bölüm biz nereden öğreneceğiz?


İlk olarak web geliştirici için HTML-CSS-JavaScript zorunludur. Bu 3 dili öğrenmemiz gerekiyor. Not olarak da söyleyeyim attığım kurslarda her şeyi tamamiyle öğrenmeyeceksiniz çünkü her geçen gün yeni bir şey çıkabiliyor. Zaten bir süre sonrasında kendiniz keşfedeceksiniz.

Gerçekten öğrenmek istiyorsanız öğrendiğiniz her şeyi 1 projeye sığdırın. Video ile aynı gitmeyin. Mesela açın Technopat.net'i oradan öğrendiğiniz şeyler ile bu siteyi yapmaya çalışın, sizin için daha yararlı olacaktır.

Arkadaşlar gerçekten isteyen bir insana o kadar ücretsiz ve iyi kaynaklar var ki inanamazsınız. Çok fazla Türkçe olarak izlemediğim için iyi Türkçe kaynakları veremeyebilirim ama İngilizce olarak çok iyi kaynaklarım var. Bu bölüm 2'ye ayrılacaktır. İngilizce ve Türkçe kurslar olarak. Eğer ki videonun %60-65'ini anlıyorsanız İngilizce kursdan devam edin.

Text Editor​

Tabii ki bu kurslara başlamadan önce bir text Editor'e ihtiyacımız olacaktır. Ben VS Code kullanıyorum ve öneririm başka bir text editor yok zaten bu kadar iyi olan. Webstom ürünleri var onlar da ücretli gerek yok.
VS Code'u indirmek için Visual Studio Code - Code Editing. Redefined
VS Code'da güzel eklentiler var birazcık gezinmenizi öneririm ben bunları kullanıyorum.

1674259861694.png


Kütüphaneler


Birçoğumuz CSS için Bootstrap öğreniyor ilk olarak. Eğer ki izlediğiniz kurs size Bootstrap öğretiyor ise o kısımları geçin. Size verdiğim Tailwind videosunu izleyin.
Bootstrap öğrenmeyin dememin sebebi zaten Tailwind ile mantık olarak aynılar. Tailwind öğrenmeniz size daha yararlı olur. Zaten zor bir şey değil 2-3 saat'de anlarsınız her şeyi.

Ücretsiz Türkçe HTML-CSS kurslar:


Yazılım bilimi ve Sadık turan'ın farklı HTML-CSS kursları var. Yazılım Bilimini öneriyorum çünkü Sadık Turan yaklaşık 4 saatlik HTML kursu yapmış ve bence 4 saat HTML için aşırı fazla bir süre. 2 saat bile yeterli ki Yazılım Bilimin'de yaklaşık 2 saat. Kaynakları bırakıyorum seçebilirsiniz :)

Yazılım Bilimi kanalında ki kurs. (önerdiğim)
Sadık Turan'ın kanalında ki kurs.

Ücretsiz Türkçe JavaScript kurs:


Arkadaşlar JavaScript için kesinlikle prototurk kanalını öneririm. 30 günde JavaScript diye olan bir Repo'yu bizlere Türkçe olarak anlatıyor gerçekten iyi bir kaynak.

Prototurk'un kanalında ki kurs.

Ücretsiz İngilizce HTML-CSS kurslar:


Freecodecamp'in gerçekten ücretsiz olarak çok iyi kursları var hepsine bakabilirsiniz gerçekten. 2 adet HTML-CSS kursu bulunmakta güncel olarak. İlk attığım en günceli, 2. attığım ise 2019'da çekilmiş yani hiç bir şey kaybetmezsiniz. Ben olsam 2.kursdan başlardım çünkü o videoyu yapan John Smilga o adamın kursları çok iyi oluyor. Hatta ücretli kurslarda ilk onu önerdim.

FreeCodeCamp'de ki güncel olan kurs
FreeCodeCamp'de ki güncel olmayan kurs (önerdiğim)

Ücretsiz İngilizce JavaScript kurslar:


Freecodecamp ve Bro Code'un kursları bulunmakta iyi olarak ama sanırsam freecodecamp'in yaptığı kurs başlangıç için değil onu araştırmanızı öneririm.

BroCode'un kursu
FreeCodeCamp'in kursu

Ücretli İngilizce HTML-CSS-JavaScript kursları:​

Arkadaşlar bu kısım da Udemy'ye giriyoruz ve orada gerçekten ücretli ve İngilizce olup çok iyi olan kurslar var. Dipnot: Eğer ki kurslar indirimde değil normal fiyatta ise yeni bir hesap açın kurslar anında indirime girecektir ve sizin bu başarımları 50TL-60TL gibi komik rakamlara kazanmanız bence bedava gibi bir şey. Eğer ki yeni hesap açınca indirim gelmez ise başka tarayıcı deneyin.

Benim size şiddetle önerdiğim John Smilga'nın kursları olur. Bu adam diğer öğretmenler gibi sürekli konuşmuyor. Size gösteriyor ve uygulatıyor. Bütün kurslarını alabilirsiniz kesinlikle öneriyorum.

Ama yok ben teorik olarak ilerlmek istiyorum dinlerim sıkılmam diyorsanız Jonas Schmedtmann'ın kurslarına bakın. Bu abimiz de gayet başarılı ama ben sıkılıyorum izlerken.

Colt Steele abimizin de kursları iyidir bu abimizi de öneririm. The web developer Bootcamp 2023 kursunda HTML-CSS-JavaScript-Bootstrap öğreneceksiniz.

Buradan sonra zaten belli bir seviyeye gelmiş oluyorsunuz. Bir sonra ki adımınız JavaScript için Framework yani kütüphane seçmeniz gerekiyor bunları da YouTube'dan izleyerek farklarını öğrenebilirsiniz.

Rehberimi okuduğunuz için teşekkürler. 1 kişiye bile yardımcı olabilirsem ne mutlu bana.
 
Son düzenleme:
Web Development demiyor mu? O da Web Geliştirme demek. Senin ısrarın bitmiyor asıl.
Hocam web geliştirmek, full-stack ile eşdeğer bir kavramdır. Siz front-end rehberi yapmışsınız ki benim mesajımı beğenip ısrar etmeniz biraz saçma olmuş. Beğendiğiniz mesajda bile anlatınızın front-end üzerine olduğu anlatılmış.
 
Hocam web geliştirmek, full-stack ile eşdeğer bir kavramdır. Siz front-end rehberi yapmışsınız ki benim mesajımı beğenip ısrar etmeniz biraz saçma olmuş. Beğendiğiniz mesajda bile anlatınızın front-end üzerine olduğu anlatılmış.
Tamamdır mesaj atayım değiştirsinler.
 
Selam arkadaşlar :)

Bir süredir Web Programlama ile uğraşıyorum ve bu forumda sürekli olarak yazılımla alakalı konu açılıyor. Web Programlama ile ilgilenenler var ise bu rehberi onlara da atabilirsiniz.
Öncelikle bu rehber ilk rehberim ve saat 02:48 yazmaya başlarken onun için hatalar veya eksik kısımlar olabilir.

Tavsiyelerim:​


Hata yapmaktan korkmayın. Arkadaşlar hata yapmadığımız sürece doğrusunu öğrenemeyiz. Yazılım da hata yapmak en normal ve sizi en çok geliştiren şeydir. Tabii ki bile bile hata yapın demiyorum :) sadece hata yapmaktan korkmayın ve hata yaparsanız bir anda projeyi silip yeniden açmayın.

Proje bazlı çalışın. Proje yapmadığınız sürece hiçbir şey öğrenemezsiniz. Emin olun bunu ben yaşadım çok uzun süre sadece teorik olarak öğrendim ama en basit bir şeyi gördüğümde bile korkuyordum. Bunu sadece hata ve proje yaparak aşabilirsiniz.

Disiplin kazanın. Yazılım ne zor ne de basit bir şey. Kendi kendimize öğrendiğimiz için bir süre gerçekten motivasyon kaybedebilirsiniz ama arkadaşlar o kayıplar öyle bir geçiyor ve yerini güzel şeylere kaptırıyor ki... Sadece zaman verin. Önemli olan gerçekten istemeniz. 1 hafta bakıp bırakacaksanız hiç başlamayın kendinize zaman kaybettirmeyin.

Bir sonra ki bölüm biz nereden öğreneceğiz?


İlk olarak web geliştirici için HTML-CSS-JavaScript zorunludur. Bu 3 dili öğrenmemiz gerekiyor. Not olarak da söyleyeyim attığım kurslarda her şeyi tamamiyle öğrenmeyeceksiniz çünkü her geçen gün yeni bir şey çıkabiliyor. Zaten bir süre sonrasında kendiniz keşfedeceksiniz.

Gerçekten öğrenmek istiyorsanız öğrendiğiniz her şeyi 1 projeye sığdırın. Video ile aynı gitmeyin. Mesela açın Technopat.net'i oradan öğrendiğiniz şeyler ile bu siteyi yapmaya çalışın, sizin için daha yararlı olacaktır.

Arkadaşlar gerçekten isteyen bir insana o kadar ücretsiz ve iyi kaynaklar var ki inanamazsınız. Çok fazla Türkçe olarak izlemediğim için iyi Türkçe kaynakları veremeyebilirim ama İngilizce olarak çok iyi kaynaklarım var. Bu bölüm 2'ye ayrılacaktır. İngilizce ve Türkçe kurslar olarak. Eğer ki videonun %60-65'ini anlıyorsanız İngilizce kursdan devam edin.

Text Editor​

Tabii ki bu kurslara başlamadan önce bir text Editor'e ihtiyacımız olacaktır. Ben VS Code kullanıyorum ve öneririm başka bir text editor yok zaten bu kadar iyi olan. Webstom ürünleri var onlar da ücretli gerek yok.
VS Code'u indirmek için Visual Studio Code - Code Editing. Redefined
VS Code'da güzel eklentiler var birazcık gezinmenizi öneririm ben bunları kullanıyorum.

Eki Görüntüle 1639689

Kütüphaneler


Birçoğumuz CSS için Bootstrap öğreniyor ilk olarak. Eğer ki izlediğiniz kurs size Bootstrap öğretiyor ise o kısımları geçin. Size verdiğim Tailwind videosunu izleyin.
Bootstrap öğrenmeyin dememin sebebi zaten Tailwind ile mantık olarak aynılar. Tailwind öğrenmeniz size daha yararlı olur. Zaten zor bir şey değil 2-3 saat'de anlarsınız her şeyi.

Ücretsiz Türkçe HTML-CSS kurslar:


Yazılım bilimi ve Sadık turan'ın farklı HTML-CSS kursları var. Yazılım Bilimini öneriyorum çünkü Sadık Turan yaklaşık 4 saatlik HTML kursu yapmış ve bence 4 saat HTML için aşırı fazla bir süre. 2 saat bile yeterli ki Yazılım Bilimin'de yaklaşık 2 saat. Kaynakları bırakıyorum seçebilirsiniz :)

Yazılım Bilimi kanalında ki kurs. (önerdiğim)
Sadık Turan'ın kanalında ki kurs.

Ücretsiz Türkçe JavaScript kurs:


Arkadaşlar JavaScript için kesinlikle prototurk kanalını öneririm. 30 günde JavaScript diye olan bir Repo'yu bizlere Türkçe olarak anlatıyor gerçekten iyi bir kaynak.

Prototurk'un kanalında ki kurs.

Ücretsiz İngilizce HTML-CSS kurslar:


Freecodecamp'in gerçekten ücretsiz olarak çok iyi kursları var hepsine bakabilirsiniz gerçekten. 2 adet HTML-CSS kursu bulunmakta güncel olarak. İlk attığım en günceli, 2. attığım ise 2019'da çekilmiş yani hiç bir şey kaybetmezsiniz. Ben olsam 2.kursdan başlardım çünkü o videoyu yapan John Smilga o adamın kursları çok iyi oluyor. Hatta ücretli kurslarda ilk onu önerdim.

FreeCodeCamp'de ki güncel olan kurs
FreeCodeCamp'de ki güncel olmayan kurs (önerdiğim)

Ücretsiz İngilizce JavaScript kurslar:


Freecodecamp ve Bro Code'un kursları bulunmakta iyi olarak ama sanırsam freecodecamp'in yaptığı kurs başlangıç için değil onu araştırmanızı öneririm.

BroCode'un kursu
FreeCodeCamp'in kursu

Ücretli İngilizce HTML-CSS-JavaScript kursları:​

Arkadaşlar bu kısım da Udemy'ye giriyoruz ve orada gerçekten ücretli ve İngilizce olup çok iyi olan kurslar var. Dipnot: Eğer ki kurslar indirimde değil normal fiyatta ise yeni bir hesap açın kurslar anında indirime girecektir ve sizin bu başarımları 50TL-60TL gibi komik rakamlara kazanmanız bence bedava gibi bir şey. Eğer ki yeni hesap açınca indirim gelmez ise başka tarayıcı deneyin.

Benim size şiddetle önerdiğim John Smilga'nın kursları olur. Bu adam diğer öğretmenler gibi sürekli konuşmuyor. Size gösteriyor ve uygulatıyor. Bütün kurslarını alabilirsiniz kesinlikle öneriyorum.

Ama yok ben teorik olarak ilerlmek istiyorum dinlerim sıkılmam diyorsanız Jonas Schmedtmann'ın kurslarına bakın. Bu abimiz de gayet başarılı ama ben sıkılıyorum izlerken.

Colt Steele abimizin de kursları iyidir bu abimizi de öneririm. The web developer Bootcamp 2023 kursunda HTML-CSS-JavaScript-Bootstrap öğreneceksiniz.

Buradan sonra zaten belli bir seviyeye gelmiş oluyorsunuz. Bir sonra ki adımınız JavaScript için Framework yani kütüphane seçmeniz gerekiyor bunları da YouTube'dan izleyerek farklarını öğrenebilirsiniz.

Rehberimi okuduğunuz için teşekkürler. 1 kişiye bile yardımcı olabilirsem ne mutlu bana.
Hocam bende css ile ilgili birkaç ingilizce kanal eklemek istiyorum

Ayrıca CSS-Tricks sitesi de çok güzel anlatımlara sahip
Ayriyetten şunu belirtmek de istiyorum tutorial izlemek her ne kadar faydalıysa bir o kadar zararı da var bir süre sonra özgünlüğünüzü kaybedersiniz dikkatli olmak lazım.

Tarayıcı olarak da kesinlikle Firefox öneriyorum.
Artı olarak bir sitede gezinirken merak ettiğiniz şeyleri devtools dan bakıp öğrenmek inanın çok faydalı.

Güzel rehber olmuş elinize sağlık.
 
Hocam bende css ile ilgili birkaç ingilizce kanal eklemek istiyorum

Ayrıca CSS-Tricks sitesi de çok güzel anlatımlara sahip
Ayriyetten şunu belirtmek de istiyorum tutorial izlemek her ne kadar faydalıysa bir o kadar zararı da var bir süre sonra özgünlüğünüzü kaybedersiniz dikkatli olmak lazım.

Tarayıcı olarak da kesinlikle Firefox öneriyorum.
Artı olarak bir sitede gezinirken merak ettiğiniz şeyleri devtools dan bakıp öğrenmek inanın çok faydalı.

Güzel rehber olmuş elinize sağlık.
Verdiğiniz tavsiyeler çok iyi kutlarım sizi. Elinize sağlık.

Bilerek o tarz kanallar vermedim artık biraz da kendi araştırmalarına kalsın çünkü yazılım için önemli bir şey.
 
Son düzenleme:
HTML, CSS ve Bootstrap'de bayağı ilerledim. Şuan da da Javascript öğreniyorum ama nedense iş bulamayacağım korkusu var. Çünkü çok fazla öğrenci yetiştiriyor kurslar. Artık elini sallasan Full-Stack Web Developer'a denk geliyorsun gibi bir şey oldu yani.
 
HTML, CSS ve Bootstrap'de bayağı ilerledim. Şuan da da Javascript öğreniyorum ama nedense iş bulamayacağım korkusu var. Çünkü çok fazla öğrenci yetiştiriyor kurslar. Artık elini sallasan Full-Stack Web Developer'a denk geliyorsun gibi bir şey oldu yani.
Hocam bazen o bana da oluyor. Veya her şeyin bir anda olmasını istiyorum. Aslında olay "düşündüğümüz" gibi değil. Benim açımdam her şey bir anda olmayacak. Ben bir programlama diline uzun bir zaman vermeliyim ki onu rahatça anlayayım. Sizin sorununuza gelirsek herkes kod yazabilir. Önemli olan iyi yazabilmek. Her Full-Stack olan iyi bir yazılımcı değil işin sonunda. Önemli olan kendimizi geliştirmek.
 

Geri
Yukarı