Konu Başlıkları Gizle
- 1 Önce bir Kafanı Topla: Ne Yapmak İstiyorsun?
- 2 Adım 1: HTML - Her Şeyin Temeli
- 3 Adım 2: CSS - Güzellik Zamanı (Makyaj)
- 4 Adım 3: JavaScript - İşler Ciddiye Biniyor
- 5 Adım 4: Araçları Tanı (Alet Çantası)
- 6 Adım 5: Bir Framework Seç
- 7 Adım 6: Responsive Tasarım ve Cross-Browser Uyumluluk
- 8 Adım 7: Back-End'e Göz At (Opsiyonel Ama Tavsiye)
- 9 Tavsiyeler (Kulağınıza Küpe Olsun)
- 10 Öğrenme Yol Haritası (Özetle)
- 11 Son Söz
- 12 Kaynak Ve Kanal Önerileri:
- 13 TÜM REHBERLERİM:
Selam arkadaşlar,
Önce ki konuda bahsetmiştim, ilgi alanım Web. Kendi öğrenme sürecimi ve tecrübeleri sizinle paylaşayım dedim. Biliyorum, aranızda web işine girmek isteyip de "bra nereden başlayacağım ben?" diye kafası allak bullak olan bir sürü arkadaş var. Vallahi zamanında ben de o dönemlerden geçtim, o yüzden halinizden çok iyi anlıyorum. Bu konuyu bir seri haline getirmek istiyorum ilgi gelirse, gene rehber olarak veya blog üzerinden yayınlarım müsait oldukça. Foruma sadece makale paylaşmak için giriyorum zayen. Her neyse hazırsanız başlayalım demeden önce şu konumu okuyun:
Selamünaleyküm arkadaşlar,
Oturdum düşündüm, "ulan zamanında bana şunları anlatan bir abim/arkadaşım olsaydı işim ne kadar kolaylaşırdı" dedim. O yüzden üşenmedim, oturdum size bu rehberi hazırladım. Bu rehber tamamen kendi tecrübelerime ve edindiğim bilgilere dayanmaktadır. Eğer üşenmeyip sonuba kadar okursanız, bu yazıdan sonra kendi yolunuzu çizebileceksiniz. Neyse kısa kesip konuya geçelim.
Giriş: Yazılım Neyin Nesi, Neden Bulaşayım?
Baştan anlaşalım, bu iş öyle "2 ay kursa gittim hadi paraları kazanayım" işi değil. Yazılım bir maraton arkadaşlar, 100...
Önce bir Kafanı Topla: Ne Yapmak İstiyorsun?
Şimdi hemen sazan gibi atlayıp "HTML öğren, sonra CSS'e geç" demeden önce bir durun soluklanın. Web programlama dediğimiz olay çok geniş bir alan arkadaşlar. Kabaca üçe ayırabiliriz mevzuyu daha önce de bahsetmiştim:Front-End (Ön Yüz): Kullanıcının gördüğü her şey abi. Butonlar, renkler, animasyonlar, menüler... Yani bir siteye girdiğinde gözünün gördüğü o janjanlı kısımlar.
Back-End (Arka Yüz): Kullanıcının görmediği ama sitenin çalışması için dönen dolaplar. Veritabanları, sunucu işlemleri, güvenlik falan fistan... Mesela siteye login olurken şifrenin kontrol edilmesi back-endçilerin işi.
Full-Stack: "Ben ikisini de hallederim" diyen cengaverler. Hem ön yüzü tasarlıyor hem arka planda sunucuyla boğuşuyor.
Benim size şahsi tavsiyem, yolun başındaysanız Front-End ile başlayın. Neden mi? Çünkü yaptığın şeyi anında görüyorsun hocam. Bir kod yazıyon, tarayıcıya F5 atıyon, hop karşında sonuç. Bu motivasyon açısından acayip önemli, inan bana ilk başlarda o anlık geri bildirim seni ayakta tutuyor yoksa sıkılıp bırakırsın.
Adım 1: HTML - Her Şeyin Temeli
HTML (HyperText Markup Language) ile başlıyoruz mecburen. Bu bir programlama dili değil aslında, işaretleme dili. Web sayfalarının iskeletini bununla çakıyorsun.Şöyle düşün bir ev yapacaksın, HTML o evin tuğlası, duvarı, kapısı penceresi. Henüz boyası badanası yok, dekorasyon sıfır ama yapı ortada.
Kod:
<html>
<head>
<title>Benim İlk Sayfam</title>
</head>
<body>
<h1>Merhaba Techolay!</h1>
<p>Web programlamaya ilk adımımı attım hadi bismillah.</p>
</body>
</html>Olay bu kadar basit işte. Bunu bir .html dosyası olarak masaüstüne kaydet, tarayıcıda aç çalışır. İlk başta bu his müthiş bir şey, o anı asla unutmuyosun "lan ben yaptım" diyosun.
Ne kadar süre ayırmalı? Vallahi 1-2 hafta şöyle sağlam kassalar HTML'in temellerini kaparsın. Tüm etiketleri ezberlemeye çalışmayın sakın kafayı yersiniz, en çok kullanılanları öğrenin, gerisini lazım oldukça Googlelarsınız.
Adım 2: CSS - Güzellik Zamanı (Makyaj)
HTML ile iskeleti diktik, şimdi CSS (Cascading Style Sheets) ile bu iskeleti süslüyoruz. Renkler, fontlar, boyutlar, yerleşimler... Hepsi CSS'in marifeti.
Kod:
body {
background-color: #1a1a2e;
color: white;
font-family: Arial, sans-serif;
}
h1 {
color: #e94560;
text-align: center;
}CSS öğrenirken sizi en çok kanser edecek konu muhtemelen Flexbox ve Grid olacak. Elemanları sayfada istediğin yere koymak başta çok sinir bozucu gelebilir. "Ulan bu kutu niye sağa gitmiyor" diye çıldırabilirsiniz. Ama bir kere mantığı kavradın mı, artık her şeyi yapabilirsin.
Bir de şu responsive tasarım mevzusu var. Artık millet sitelere telefondan, tabletten, bilgisayardan giriyor. Senin sitenin her ekran boyutunda düzgün görünmesi lazım yoksa kimse girmez. Bunu da CSS ile yapıyoruz, Media query denen bir şey var onunla.
Tavsiyem: CSS öğrenirken bol bol pratik yapın. Bir site gör beğen, aynısını taklit etmeye çalış. Başaramazsan dert etme, o süreçte öğreniyorsun zaten.
Adım 3: JavaScript - İşler Ciddiye Biniyor
HTML ve CSS statik şeyler. Yani sayfa bir kere yükleniyor ve öyle mal gibi kalıyor. Ama JavaScript ile sayfana can veriyorsun. Butonlara tıklanınca bir şeyler oluyor, formlar kontrol ediliyor, animasyonlar akıyor...
Kod:
document.getElementById("buton").addEventListener("click", function() {
alert("Butona tıkladın reyiz!");
});Bakın JavaScript gerçek bir programlama dili. Değişkenler, döngüler, fonksiyonlar, koşullar... Programlamanın asıl o baba konularını burada öğreniyorsun. O yüzden biraz daha sabır lazım.
Başta çok karışık gelebilir, "Ben bunu asla anlayamam bu ne karmaşık iş" diyebilirsin. Bende o yoldan geçtim. Ama bir sabah uyanıyorsun ve bir bakıyorsun ki kafanda şak diye oturmuş her şey. O an gelene kadar sabret.
Kritik konular şunlar:
-DOM manipülasyonu (sayfadaki elemanları JavaScript ile kontrol etmek, oynamak)
-Event handling (olayları yakalamak - tıklama, klavye basma vs.)
-Asenkron programlama (APIlerden veri çekmek için lazım olacak, burası önemli)
-ES6+ özellikleri (modern JavaScript yazımı, eski usulle uğraşmayın)
Adım 4: Araçları Tanı (Alet Çantası)
Artık temel üçlüyü öğrendin sayalım. Şimdi işleri kolaylaştıran araçlara bakalım.-Versiyon Kontrol - Git: Kodlarını yönetmek için Git öğrenmek şart oğlu şart. GitHub veya GitLab kullanarak projelerini saklayabilir, başkalarıyla paylaşabilirsin. Ayrıca iş başvurularında GitHub profilin senin diploman gibi bir şey, bunu sakın atlama bomboş gitme mülakata.
-Kod Editörü: Visual Studio Code kullanın, başka bir şey deneme bile. Bedava, hafif ve eklenti desteği muhteşem. Ben dahil herkes bunu kullanıyor bir sebebi var yani.
-Tarayıcı Geliştirici Araçları: Chrome veya Firefox'un geliştirici araçlarını öğrenin. F12ye basıp açılan o paneli kullanmayı bilmek çok önemli. Hataları orada yakalıyorsun, CS'si orada test ediyorsun.
-CSS Ön İşleyiciler: SASS veya LESS gibi araçlar CSS yazmayı daha kolay hale getiriyor. Değişken tanımlayabiliyorsun, iç içe yazabiliyorsun. İleride mutlaka bakın buna.
Adım 5: Bir Framework Seç
Vanilla JavaScript (saf JavaScript) ile her şeyi yapabilirsin ama büyük projelerde işler Arap saçına döner. O yüzden Framework'ler var.-React: Facebook'un geliştirdiği, şu an en popüler olanı. İş ilanlarının çoğu React istiyor.component bazlı çalışıyor, öğrenmesi başta biraz zor gelebilir ama öğrenince çok güçlü alet.
-Vue.js: Daha kolay öğrenilen, özellikle başlangıç için güzel bir seçenek. Dokümantasyonu harika.
-Angular: Google'ın geliştirdiği, daha kurumsal büyük projelerde kullanılıyor genelde. Öğrenme eğrisi en dik olan bu, biraz zorlar.
Hangisini seçeceğim diye kafayı yiyorsan React ile başla derim. Piyasada en çok aranan bu şu an.
Adım 6: Responsive Tasarım ve Cross-Browser Uyumluluk
Bunu ayrı bir başlık olarak açmak istedim çünkü harbiden çok önemli.Artık insanların çoğu telefondan internete giriyor. Senin sitenin mobilde de cillop gibi görünmesi lazım. Buna responsive tasarım diyoruz.
CSS'te Media query kullanarak farklı ekran boyutları için farklı stiller tanımlıyorsun. Ayrıca Tailwind CSS veya Bootstrap gibi Framework'ler bu işi bayağı kolaylaştırıyor (Tailwind candır).
Cross-browser uyumluluk da ayrı bir dert. Yazdığın kod Chrome'da çalışıyor ama Safari'de patlıyor olabilir. Bunu test etmen ve gerekirse düzeltmen gerekiyor. Can sıkıcı ama gerçek hayat bu, yapacak bir şey yok.
Adım 7: Back-End'e Göz At (Opsiyonel Ama Tavsiye)
Front-End'i hallettikten sonra Back-End'e de şöyle bir göz ucuyla bakmak iyi olur. Full-stack olmak zorunda değilsin ama en azından arka tarafın nasıl çalıştığını bilmek seni daha iyi bir Front-End developer yapar.-Node.js: JavaScript ile Back-End yazabiliyorsun. Zaten JavaScript biliyorsan geçiş çok kolay olur.
-PHP: Hâlâ çok yaygın, millet öldü diyor ama WordPress dünyasında kral hala. Öğrenmesi nispeten kolay.
-Python: Django veya Flask frameworkleriyle web uygulamaları yapabilirsin. Python zaten çok popüler bir dil, her yola gelir.
Tavsiyeler (Kulağınıza Küpe Olsun)
-Proje yap, proje yap, proje yap!"Tutorial cehennemine" düşmeyin. Videolarda "evet evet anlıyorum çok mantıklı" deyip hiçbir şey yapmamak en büyük hata. Her öğrendiğin konudan sonra küçük de olsa bir proje yap. Bir hesap makinesi, bir yapılacaklar listesi, bir hava durumu uygulaması... Ne olursa artık.-Hata yapmaktan korkma.Kodun çalışmayacak, ekrana kırmızı kırmızı hatalar düşecek. Bu çok normal. Hatalar sana işi öğretiyor. Her hatanın bir sebebi var ve o sebebi bulmak seni geliştiriyor zaten.
-dokümantasyon okumayı öğren.MDN Web Docs senin en iyi kankan olacak. Her şeyi videodan öğrenmeye çalışma, dokümantasyon okumayı da alışkanlık edin.
-Topluluk içinde ol.Discord sunucuları, Reddit, Twitter, bizim gibi yerli forum siteleri... Sorular sor, başkalarının sorularına cevap vermeye çalış. Öğrenmenin en iyi yollarından biri başkasına öğretmeye çalışmaktır, ciddiyim.
-İngilizce öğren.Türkçe kaynaklar güzel ama bir yere kadar. Gerçek derinlik İngilizce kaynaklarda. Dokümantasyonların çoğu İngilizce, hata mesajlarını Googleladığında çıkan sonuçlar İngilizce. Bu işi ciddi düşünüyorsan İngilizce şart.
-Sabırlı ol.Bu iş bir gecede olmuyor. Aylar, belki yıllar alıyor. Bazen motivasyon yerlerde sürünecek, bazen "ben bu işi yapamıyorum galiba" diyeceksin. Normal. Herkes bunu yaşıyor. Önemli olan inat edip devam etmek.
Öğrenme Yol Haritası (Özetle)
Kabaca bir zaman çizelgesi (kişiden kişiye değişir tabii):-1-2. Ay: HTML ve CSS temelleri, basit statik sayfalar yapma
-3-4. Ay: JavaScript temelleri, DOM manipülasyonu, küçük interaktif projeler
-5-6. Ay: Git/GitHub, responsive tasarım, CSS frameworkleri (Bootstrap veya Tailwind)
-7-9. Ay: Bir JavaScript Framework'ü (React öneririm), API kullanımı
-10-12. Ay: Portföy oluşturma, gerçek projeler yapma, sağa sola iş başvuruları
Dediğim gibi bu süreçler kişiden kişiye değişir. Günde 2 saat çalışan adamla günde 8 saat gömen adamın ilerlemesi aynı olmaz. Önemli olan düzenli olmak, kopmamak.
Son Söz
Başta her şey çok zor ve karmaşık görünecek. "Bunları nasıl öğreneceğim ya?" diyeceksin. Ama adım adım ilerlediğinde bir bakacaksın ki ciddi şeyler yapabiliyorsun. Saygılar iyi Sosyaller.Kaynak Ve Kanal Önerileri:
MDN Web Docs (Mozilla Developer Network): arkadaşlar burası bu işin Kutsal Kitabı'dır. Google'da bir şey aratınca sonuna "MDN" yazın. En doğru, en teknik bilgi buradadır. İngilizcedir ama Translate ile de olsa burayı okumaya alışın.
W3Schools: Başlangıç için güzel, basit. "Şu kod nasıl yazılıyordu ya?" diye hızlıca bakmak için birebir. Ama derinlemesine öğrenmek için MDN daha iyidir, bu biraz yüzeysel kalabilir.
FreeCodeCamp: Burası efsane. Hem bedava hem de tarayıcı üzerinden kod yazarak öğretiyor. Bölümleri bitirince sertifika da veriyor (LinkedIn'e koyarsınız).
The Odin Project: Eğer "Beni sıfırdan al, Full-stack developer yap, eti senin kemiği benim" diyorsanız buraya bakın. Biraz zordur, çok okuma yaptırır ama bitiren adam harbiden yazılımcı olur.
2. YouTube Kanalları (Türkçe Kaynaklar):
Prototürk (Tayfun Erbilen): TR'de web dendi mi aklıma ilk bu adam gelir. Üslubu çok rahattır, "lan niye çalışmadı bu" diye doğal tepkiler verir. PHP ve CSS konusunda pirdir.
Kablosuz Kedi (Gökhan Kandemir): Hocamız bayağı detaylı anlatır. Özellikle Vue.js, React falan girecekseniz bu kanalı yalayıp yutun.
Arin Yazılım: Özellikle JavaScript mantığını kavramak için çok temiz anlatıyor. Yeni başlayanlar için ideal.
3. YouTube Kanalları (Yabancı Kaynaklar - İngilizcesi Olanlara):
Traversy Media (Brad Traversy): Bu adam tam bir halk kahramanı. "Crash Course" videoları meşhurdur. Bir teknolojiyi 1 saatte özetler. Sesi de çok tok, insanı baymıyor dinlerken
The Net Ninja: İngiliz aksanıyla tane tane anlatır. Playlist'leri efsane düzenlidir.
Kevin Powell: Bakın CSS konusunda bu adam bir ilah. "CSS çok zor ya" diyorsanız bu adamı izleyin, CSS'e aşık olursunuz. Sadece CSS anlatıyor adam, manyak bir seviye.
4. "Hangi Yoldan Gideyim?" Diyenlere:
W3Schools: Başlangıç için güzel, basit. "Şu kod nasıl yazılıyordu ya?" diye hızlıca bakmak için birebir. Ama derinlemesine öğrenmek için MDN daha iyidir, bu biraz yüzeysel kalabilir.
FreeCodeCamp: Burası efsane. Hem bedava hem de tarayıcı üzerinden kod yazarak öğretiyor. Bölümleri bitirince sertifika da veriyor (LinkedIn'e koyarsınız).
The Odin Project: Eğer "Beni sıfırdan al, Full-stack developer yap, eti senin kemiği benim" diyorsanız buraya bakın. Biraz zordur, çok okuma yaptırır ama bitiren adam harbiden yazılımcı olur.
2. YouTube Kanalları (Türkçe Kaynaklar):
Prototürk (Tayfun Erbilen): TR'de web dendi mi aklıma ilk bu adam gelir. Üslubu çok rahattır, "lan niye çalışmadı bu" diye doğal tepkiler verir. PHP ve CSS konusunda pirdir.
Kablosuz Kedi (Gökhan Kandemir): Hocamız bayağı detaylı anlatır. Özellikle Vue.js, React falan girecekseniz bu kanalı yalayıp yutun.
Arin Yazılım: Özellikle JavaScript mantığını kavramak için çok temiz anlatıyor. Yeni başlayanlar için ideal.
3. YouTube Kanalları (Yabancı Kaynaklar - İngilizcesi Olanlara):
Traversy Media (Brad Traversy): Bu adam tam bir halk kahramanı. "Crash Course" videoları meşhurdur. Bir teknolojiyi 1 saatte özetler. Sesi de çok tok, insanı baymıyor dinlerken
The Net Ninja: İngiliz aksanıyla tane tane anlatır. Playlist'leri efsane düzenlidir.
Kevin Powell: Bakın CSS konusunda bu adam bir ilah. "CSS çok zor ya" diyorsanız bu adamı izleyin, CSS'e aşık olursunuz. Sadece CSS anlatıyor adam, manyak bir seviye.
4. "Hangi Yoldan Gideyim?" Diyenlere:
- Roadmap. Sh: Burası muazzam. Siteye giriyorsun "Frontend"e tıklıyorsun, sana sırasıyla ne öğrenmen gerektiğini harita gibi gösteriyor. Kaybolursan aç bak, pusula niyetine.
TÜM REHBERLERİM:
Selamlar arkadaşlar,
Şöyle gireyim konuya, ben kendimi bildim bileli Windows kullanıcısıyım. Yani çoğumuz gibi bilgisayar dediğin Windows'tur kafasındaydım. Oyunlar, programlar, elimizin alıştığı her şey orada sonuçta. Ama ne oldu da bir gün "Yeter be, burama kadar geldi" dedim?
Bu rehberimde size yaşadıklarımı, neden geçtiğimi, neler çektiğimi, şu an durum ne... vs kendi deneyimlerimi aktarmaya çalışacağım.
Bölüm 1: Windows
Güncelleme BelasıAcil bir işin vardır, laptopu bi açarsın ve bam, "Windows güncelleniyor, kapatmayın." %15'te takılır kalır. 20...
Selam arkadaşlar, bu soruyu o kadar çok duydum ki artık gülüyorum. Ne zaman birine "Linux kullanıyorum" desem şaşırıyor, üstüne bir de "Antivirüs falan kullanmıyorum" deyince gözleri fal taşı gibi açılıyor.
– "Oğlum hacklenirsin!"
– "Virüs kaparsın, yapma etme!"
– "Çok riskli lan!"
Anlatıyorum ama inanmıyor millet. Neden? Çünkü yıllarca Windows'ta Kaspersky'dı, Avast'Ti, Norton'du derken beynimize kazınmış. "bilgisayar varsa antivirüs de olmalı" diye kodlanmışız. Peki harbi öyle mi?
Bu yazıda size Linux'un güvenlik mantığını anlatacağım. Neden antivirüs kullanmıyorum, bu...
Selamlar arkadaşlar,
Geçen gece tam uykuya dalmışım, telefon zır zır çalıyor. “Hayırdır inşallah” dedim, baktım sunucu alarm veriyor. Kalktım PC’nin başına, bir baktım sisteme binlerce başarısız giriş denemesi var. Biri kafayı takmış, brute force ile şifreleri kırmaya çalışıyor. Peki ben bunu nasıl şak diye anladım? Tabii ki loglar sayesinde. O gece harbiden anladım ki bu loglar hayat kurtarıyor, arkadaşlar.
Bayağıdır aklımdaydı aslında böyle bir konu açmak. Tecrübelerimi aktarayım istedim. Hatalarımdan ders çıkarın ki siz de aynı çukura düşmeyin.
...
Son düzenleyen: Moderatör:
