Yaz\u0131l\u0131m d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkesin akl\u0131nda benzer sorular yank\u0131lan\u0131r: “Nereden ba\u015flamal\u0131y\u0131m?”, “Hangi teknolojileri \u00f6\u011frenmeliyim?”, “Bu karma\u015f\u0131k d\u00fcnyaya nas\u0131l adapte olabilirim?”. \u0130\u015fte tam da bu noktada, HNG13 gibi deneyimler devreye girer. HNG13, kodlama ser\u00fcveninize ba\u015flamak veya mevcut becerilerinizi peki\u015ftirmek i\u00e7in e\u015fsiz bir f\u0131rsat sunar. Bu makale, HNG13’\u00fcn derinliklerine inerek, yaz\u0131l\u0131ma ilk ad\u0131mlar\u0131n\u0131z\u0131 sa\u011flam bir \u015fekilde atman\u0131z i\u00e7in size rehberlik edecek.<\/p>\n
Yaz\u0131l\u0131m geli\u015ftirme, g\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131n\u0131n en h\u0131zl\u0131 b\u00fcy\u00fcyen ve en dinamik sekt\u00f6rlerinden biridir. Bu dinamizmin i\u00e7inde yer almak isteyen ancak yol haritas\u0131 \u00e7izmekte zorlanan pek \u00e7ok ki\u015fi i\u00e7in HNG13, adeta bir \u0131\u015f\u0131k feneri g\u00f6revi \u00fcstlenir. Peki, HNG13 tam olarak nedir ve bu s\u00fcre\u00e7 yaz\u0131l\u0131ma ilk ad\u0131mlar\u0131n\u0131 atanlar i\u00e7in neden bu kadar hayati bir \u00f6neme sahiptir? HNG13, genellikle belirli bir s\u00fcreye yay\u0131lan, yo\u011fun ve pratik odakl\u0131 bir yaz\u0131l\u0131m geli\u015ftirme program\u0131 veya bir t\u00fcr staj\/bootcamp olarak tan\u0131mlanabilir. Bu programlar, kat\u0131l\u0131mc\u0131lar\u0131n ger\u00e7ek d\u00fcnya projeleri \u00fczerinde \u00e7al\u0131\u015farak teorik bilgilerini prati\u011fe d\u00f6kme, ekip i\u00e7inde i\u015f birli\u011fi yapma ve sekt\u00f6r standartlar\u0131na uygun beceriler geli\u015ftirme f\u0131rsat\u0131 bulmalar\u0131n\u0131 sa\u011flar. HNG13’\u00fcn temel amac\u0131, kat\u0131l\u0131mc\u0131lar\u0131 sadece kod yazmaya de\u011fil, ayn\u0131 zamanda problem \u00e7\u00f6zme, hata ay\u0131klama (debugging), s\u00fcr\u00fcm kontrol\u00fc (version control) ve etkili ileti\u015fim gibi modern yaz\u0131l\u0131m geli\u015ftirme s\u00fcre\u00e7lerinin olmazsa olmaz\u0131 olan yeteneklerle donatmakt\u0131r.<\/p>\n
Bu platformlar\u0131n \u00f6nemi, sadece teknik beceri kazand\u0131rmakla s\u0131n\u0131rl\u0131 de\u011fildir. Asl\u0131nda, HNG13 gibi programlar, kat\u0131l\u0131mc\u0131lar\u0131n bir “geli\u015ftirici zihniyeti” edinmelerine yard\u0131mc\u0131 olur. Bu zihniyet, s\u00fcrekli \u00f6\u011frenmeyi, kar\u015f\u0131la\u015f\u0131lan zorluklara yarat\u0131c\u0131 \u00e7\u00f6z\u00fcmler bulmay\u0131 ve en \u00f6nemlisi, bir toplulu\u011fun par\u00e7as\u0131 olarak birlikte \u00e7al\u0131\u015fmay\u0131 kapsar. Dolay\u0131s\u0131yla, HNG13’e kat\u0131lanlar, tek ba\u015f\u0131na \u00f6\u011frenme s\u00fcrecinde kar\u015f\u0131la\u015fabilecekleri motivasyon eksikli\u011fi veya y\u00f6n belirsizli\u011fi gibi sorunlar\u0131n \u00fcstesinden gelme \u015fans\u0131 bulurlar. Programlar genellikle mentorluk deste\u011fi, canl\u0131 oturumlar ve ger\u00e7ek zamanl\u0131 geri bildirimlerle zenginle\u015ftirilir. Bu interaktif ortam, \u00f6\u011frenme s\u00fcrecini \u00e7ok daha verimli ve keyifli hale getirir. Kat\u0131l\u0131mc\u0131lar, sadece kendileri gibi d\u00fc\u015f\u00fcnen insanlarla tan\u0131\u015fmakla kalmaz, ayn\u0131 zamanda deneyimli profesyonellerden de\u011ferli bilgiler edinirler. Bu t\u00fcr programlar, genellikle belirli bir s\u00fcre sonunda tamamlanacak bir proje ile sonu\u00e7lan\u0131r. Bu projeler, kat\u0131l\u0131mc\u0131lar\u0131n portf\u00f6ylerini zenginle\u015ftirmeleri ve i\u015f ba\u015fvurular\u0131nda potansiyel i\u015fverenlere g\u00f6sterebilecekleri somut \u00e7\u0131kt\u0131lar sunmalar\u0131 a\u00e7\u0131s\u0131ndan kritik bir role sahiptir. HNG13 gibi platformlar, yaz\u0131l\u0131m d\u00fcnyas\u0131n\u0131n kap\u0131lar\u0131n\u0131 aralayan ve kariyer yolculu\u011funuzda sa\u011flam bir ba\u015flang\u0131\u00e7 yapman\u0131z\u0131 sa\u011flayan k\u00f6pr\u00fclerdir. Bu nedenle, yaz\u0131l\u0131ma merak salm\u0131\u015f herkesin bu t\u00fcr programlar\u0131 dikkatle incelemesi ve m\u00fcmk\u00fcnse dahil olmas\u0131 \u015fiddetle tavsiye edilir.<\/p>\n
\n Uzman \u0130pucu: HNG13 gibi programlara kat\u0131l\u0131rken sadece kod yazmaya odaklanmay\u0131n. A\u011f kurma (networking) f\u0131rsatlar\u0131n\u0131 de\u011ferlendirin, mentorlar\u0131n\u0131zla aktif ileti\u015fimde kal\u0131n ve di\u011fer kat\u0131l\u0131mc\u0131lardan \u00f6\u011frenmeye a\u00e7\u0131k olun. Bu, kariyeriniz i\u00e7in en az teknik bilgi kadar \u00f6nemlidir.\n <\/div>\n
HNG13 Yolculu\u011funuza Ba\u015flamadan \u00d6nce Bilmeniz Gereken Temel Ta\u015flar Nelerdir?<\/h2>\n
HNG13 maceras\u0131na at\u0131lmadan \u00f6nce sa\u011flam bir temel olu\u015fturmak, bu yo\u011fun \u00f6\u011frenme s\u00fcrecinden maksimum verim alman\u0131z\u0131 sa\u011flayacakt\u0131r. Yaz\u0131l\u0131m geli\u015ftirmenin temelinde yatan baz\u0131 kavram ve ara\u00e7lar\u0131 \u00f6nceden bilmek, sizi rakiplerinizden ay\u0131racak ve program\u0131n ilerleyen a\u015famalar\u0131nda kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z zorluklarla daha rahat ba\u015fa \u00e7\u0131kman\u0131z\u0131 sa\u011flayacakt\u0131r. Bu temel ta\u015flar, genellikle web geli\u015ftirme odakl\u0131 programlarda kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z HTML, CSS, JavaScript gibi dillerden, s\u00fcr\u00fcm kontrol sistemlerine ve komut sat\u0131r\u0131 aray\u00fcz\u00fcne (CLI) kadar geni\u015f bir yelpazeyi kapsar. Bu kavramlara h\u00e2kim olmak, sadece HNG13 s\u00fcrecini kolayla\u015ft\u0131rmakla kalmaz, ayn\u0131 zamanda genel yaz\u0131l\u0131m geli\u015ftirme kariyerinizin de sa\u011fl\u0131kl\u0131 bir \u015fekilde ilerlemesine yard\u0131mc\u0131 olur.<\/p>\n
Web Geli\u015ftirmenin Temel Dilleri: HTML, CSS ve JavaScript<\/h3>\n
Her web sayfas\u0131n\u0131n iskeletini HTML (HyperText Markup Language) olu\u015fturur. Bir binan\u0131n temelini ve duvarlar\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn; HTML de metin, resim, ba\u011flant\u0131 gibi i\u00e7erikleri organize eder ve yap\u0131sal bir \u00e7er\u00e7eve sunar. Kullan\u0131m\u0131 son derece basittir ve etiklerle \u00e7al\u0131\u015f\u0131r. \u00d6rne\u011fin, bir paragraf i\u00e7in <\/p>\n<\/code> etiketi kullan\u0131l\u0131r. Bu etiketlerin do\u011fru kullan\u0131m\u0131, web sayfan\u0131z\u0131n taray\u0131c\u0131lar taraf\u0131ndan do\u011fru bir \u015fekilde yorumlanmas\u0131 i\u00e7in kritiktir. HTML ile i\u00e7eri\u011fi olu\u015fturduktan sonra, s\u0131ra bu i\u00e7eri\u011fi g\u00f6rsel olarak \u00e7ekici hale getirmeye gelir. \u0130\u015fte burada CSS (Cascading Style Sheets) devreye girer. CSS, web sayfalar\u0131n\u0131z\u0131n renklerini, fontlar\u0131n\u0131, d\u00fczenini ve genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirleyen stil dilidir. T\u0131pk\u0131 bir binan\u0131n i\u00e7 ve d\u0131\u015f tasar\u0131m\u0131n\u0131, renklerini ve mobilya yerle\u015fimini belirleyen mimar gibi, CSS de web sayfan\u0131za estetik bir dokunu\u015f katar. Modern web geli\u015ftirmede, CSS’in sundu\u011fu esneklik ve g\u00fc\u00e7, sayfa tasar\u0131m\u0131nda s\u0131n\u0131r tan\u0131maman\u0131z\u0131 sa\u011flar. Son olarak, bir web sayfas\u0131n\u0131 interaktif hale getiren, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren dil JavaScript’tir. JavaScript, bir web sayfas\u0131n\u0131n “beyni” gibidir; t\u0131klama olaylar\u0131na yan\u0131t vermek, form do\u011frulamas\u0131 yapmak, dinamik i\u00e7erik y\u00fcklemek gibi i\u015flevsellikleri sa\u011flar. Bu \u00fc\u00e7 dilin birle\u015fimi, g\u00fcn\u00fcm\u00fczdeki modern ve dinamik web uygulamalar\u0131n\u0131n temelini olu\u015fturur. HNG13 s\u00fcrecinde bu \u00fc\u00e7l\u00fcy\u00fc etkin bir \u015fekilde kullanmay\u0131 \u00f6\u011frenmek, sizi bir\u00e7ok projede avantajl\u0131 konuma getirecektir. Bu dillerin her birine giri\u015f d\u00fczeyinde h\u00e2kim olmak, HNG13 program\u0131n\u0131n ilk a\u015famalar\u0131nda size b\u00fcy\u00fck bir rahatl\u0131k sa\u011flayacak ve daha karma\u015f\u0131k konulara ge\u00e7i\u015finizi h\u0131zland\u0131racakt\u0131r. \u00d6rne\u011fin, basit bir butona t\u0131klama olay\u0131 ile \u00e7al\u0131\u015fan bir JavaScript fonksiyonu yazmak bile, bu dillerin birle\u015fim g\u00fcc\u00fcn\u00fc anlaman\u0131za yard\u0131mc\u0131 olur. \u00d6zellikle mobil cihazlarda kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in bu \u00fc\u00e7 teknolojinin uyumlu \u00e7al\u0131\u015fmas\u0131 \u015fartt\u0131r.<\/p>\n
S\u00fcr\u00fcm Kontrol\u00fc ve \u0130\u015f Birli\u011fi: Git ve GitHub<\/h3>\n
Yaz\u0131l\u0131m geli\u015ftirme, nadiren tek ba\u015f\u0131na yap\u0131lan bir i\u015ftir. \u00c7o\u011fu zaman ekipler halinde \u00e7al\u0131\u015f\u0131l\u0131r ve birden fazla ki\u015fi ayn\u0131 kod taban\u0131 \u00fczerinde de\u011fi\u015fiklikler yapar. Bu noktada, de\u011fi\u015fiklikleri takip etmek, farkl\u0131 versiyonlar\u0131 y\u00f6netmek ve ekip \u00fcyelerinin \u00e7al\u0131\u015fmalar\u0131n\u0131 birle\u015ftirmek i\u00e7in bir s\u00fcr\u00fcm kontrol sistemine ihtiya\u00e7 duyulur. Git, bu alanda end\u00fcstri standard\u0131 haline gelmi\u015f da\u011f\u0131t\u0131k bir s\u00fcr\u00fcm kontrol sistemidir. Git ile yapt\u0131\u011f\u0131n\u0131z her de\u011fi\u015fikli\u011fi kaydedebilir, projenin eski versiyonlar\u0131na geri d\u00f6nebilir ve farkl\u0131 \u00f6zellikler \u00fczerinde paralel olarak \u00e7al\u0131\u015fabilirsiniz. Git’in komutlar\u0131n\u0131 \u00f6\u011frenmek, projenizin y\u00f6netiminde size b\u00fcy\u00fck esneklik sa\u011flayacakt\u0131r. \u00d6rne\u011fin, git clone<\/code>, git add<\/code>, git commit<\/code>, git push<\/code> gibi temel komutlar, g\u00fcnl\u00fck geli\u015ftirme ak\u0131\u015f\u0131n\u0131z\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelecektir.<\/p>\nGitHub ise, Git depolar\u0131n\u0131 (repository) bar\u0131nd\u0131ran web tabanl\u0131 bir platformdur. GitHub, projelerinizi depolaman\u0131n yan\u0131 s\u0131ra, a\u00e7\u0131k kaynak projelere katk\u0131da bulunman\u0131z\u0131, di\u011fer geli\u015ftiricilerle i\u015f birli\u011fi yapman\u0131z\u0131 ve projelerinizin versiyonlar\u0131n\u0131 kolayca y\u00f6netmenizi sa\u011flar. Bir projede ekip olarak \u00e7al\u0131\u015f\u0131rken, her bir \u00fcyenin kendi yerel makinesinde kod geli\u015ftirmesi ve ard\u0131ndan bu de\u011fi\u015fiklikleri GitHub \u00fczerindeki ana depoya g\u00f6ndermesi yayg\u0131n bir senaryodur. Bu sayede, herkesin yapt\u0131\u011f\u0131 de\u011fi\u015fiklikler merkezi bir yerde birle\u015fir ve olas\u0131 \u00e7ak\u0131\u015fmalar (conflict) y\u00f6netilebilir. HNG13 gibi bir programda, Git ve GitHub kullan\u0131m\u0131 ka\u00e7\u0131n\u0131lmazd\u0131r. Projelerinizin ilerleyi\u015fini takip etmek, mentorlar\u0131n\u0131zdan geri bildirim almak ve di\u011fer kat\u0131l\u0131mc\u0131larla kod payla\u015fmak i\u00e7in bu platformlar\u0131 aktif olarak kullanman\u0131z gerekecektir. Dolay\u0131s\u0131yla, programa ba\u015flamadan \u00f6nce Git’in temel komutlar\u0131na ve GitHub aray\u00fcz\u00fcne a\u015fina olmak, HNG13 deneyiminizin \u00e7ok daha sorunsuz ge\u00e7mesini sa\u011flayacakt\u0131r. Bu ara\u00e7lar, sadece kod y\u00f6netimi i\u00e7in de\u011fil, ayn\u0131 zamanda profesyonel bir geli\u015ftirici portf\u00f6y\u00fc olu\u015fturmak i\u00e7in de hayati \u00f6neme sahiptir.<\/p>\n
\n# Git ile basit bir proje ak\u0131\u015f\u0131\ngit clone [repository_url] \/\/ Depoyu yerel makinenize kopyalama\ncd [proje_klasoru] \/\/ Proje klas\u00f6r\u00fcne gitme\ngit add . \/\/ T\u00fcm de\u011fi\u015fiklikleri sahneleme alan\u0131na ekleme\ngit commit -m \"\u0130lk commit: HTML ve CSS yap\u0131s\u0131 olu\u015fturuldu\" \/\/ De\u011fi\u015fiklikleri kaydetme\ngit push origin main \/\/ De\u011fi\u015fiklikleri GitHub'a g\u00f6nderme\n <\/pre>\n<\/code><\/p>\n
Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc (CLI) Kullan\u0131m\u0131<\/h3>\n
Modern yaz\u0131l\u0131m geli\u015ftirmenin ayr\u0131lmaz bir par\u00e7as\u0131 da komut sat\u0131r\u0131 aray\u00fcz\u00fcn\u00fc etkin bir \u015fekilde kullanabilmektir. CLI, dosya ve klas\u00f6rleri y\u00f6netmekten, programlar\u0131 \u00e7al\u0131\u015ft\u0131rmaya, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemeye kadar pek \u00e7ok g\u00f6revi grafik aray\u00fcz\u00fcne ihtiya\u00e7 duymadan ger\u00e7ekle\u015ftirmenizi sa\u011flar. \u00d6\u011frenme e\u011frisi biraz dik olsa da, bir kez al\u0131\u015ft\u0131ktan sonra geli\u015ftirme s\u00fcre\u00e7lerinizi inan\u0131lmaz derecede h\u0131zland\u0131racakt\u0131r. HNG13 program\u0131nda, npm<\/code> (Node Package Manager) veya yarn<\/code> gibi paket y\u00f6neticilerini kullanarak projelerin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kurmak, testleri \u00e7al\u0131\u015ft\u0131rmak veya projeyi derlemek gibi i\u015flemleri komut sat\u0131r\u0131 \u00fczerinden yapman\u0131z gerekecektir. Temel Linux\/Unix komutlar\u0131na (\u00f6rne\u011fin, ls<\/code>, cd<\/code>, mkdir<\/code>, rm<\/code>) a\u015fina olmak, bu s\u00fcre\u00e7te size b\u00fcy\u00fck kolayl\u0131k sa\u011flayacakt\u0131r. \u00d6rne\u011fin, bir proje olu\u015ftururken veya var olan bir projeyi klonlarken, komut sat\u0131r\u0131n\u0131 kullanmak, grafik aray\u00fcz\u00fcne g\u00f6re \u00e7ok daha h\u0131zl\u0131 ve verimli bir y\u00f6ntemdir. Bu beceri, sadece HNG13 i\u00e7in de\u011fil, genel olarak bir yaz\u0131l\u0131mc\u0131n\u0131n \"g\u00fc\u00e7l\u00fc ara\u00e7 kutusu\"nun temel ta\u015flar\u0131ndan biridir. Terminal ekran\u0131nda rahat\u00e7a gezinebilmek ve komutlar\u0131 ezbere bilmek, geli\u015ftirici olarak yetkinli\u011finizin \u00f6nemli bir g\u00f6stergesidir.<\/p>\nHNG13'te \u0130lk Ad\u0131mlar: Ger\u00e7ek Bir Proje Nas\u0131l Hayata Ge\u00e7irilir?<\/h2>\n
HNG13 gibi programlar\u0131n en de\u011ferli yanlar\u0131ndan biri, teorik bilgileri ger\u00e7ek d\u00fcnya senaryolar\u0131na uygulayarak pratik deneyim kazanmakt\u0131r. Bu b\u00f6l\u00fcm, HNG13'teki ilk projenizi nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z, geli\u015ftirece\u011finiz ve tamamlayaca\u011f\u0131n\u0131z \u00fczerine ad\u0131m ad\u0131m bir rehber sunmaktad\u0131r. Bu s\u00fcre\u00e7, sadece kod yazmaktan ibaret de\u011fildir; ayn\u0131 zamanda problem tan\u0131mlama, planlama, i\u015f birli\u011fi ve hata ay\u0131klama gibi geli\u015ftirme d\u00f6ng\u00fcs\u00fcn\u00fcn kritik a\u015famalar\u0131n\u0131 da kapsar. Diyelim ki HNG13 kapsam\u0131nda, kullan\u0131c\u0131lar\u0131n hava durumu bilgilerini alabilece\u011fi basit bir web uygulamas\u0131 geli\u015ftirmeniz istendi. Bu, hem frontend (HTML, CSS, JavaScript) hem de bir API (Uygulama Programlama Aray\u00fcz\u00fc) ile etkile\u015fim gerektiren g\u00fczel bir ba\u015flang\u0131\u00e7 projesi olabilir. \u0130\u015fte bu senaryoyu ele alarak ad\u0131m ad\u0131m bir proje geli\u015ftirme s\u00fcreci:<\/p>\n
Ad\u0131m 1: Proje Planlamas\u0131 ve Ortam Kurulumu<\/h3>\n
Her \u015feyden \u00f6nce, projenin kapsam\u0131n\u0131 ve temel \u00f6zelliklerini belirleyin. Hava durumu uygulamam\u0131z i\u00e7in: kullan\u0131c\u0131 bir \u015fehir ad\u0131 girecek, uygulama API'den hava durumu verisini \u00e7ekecek ve ekranda g\u00f6sterecek. Bu basit bir planlama a\u015famas\u0131d\u0131r. Ard\u0131ndan geli\u015ftirme ortam\u0131n\u0131z\u0131 kurman\u0131z gerekir. Bir kod d\u00fczenleyici (VS Code \u00f6nerilir), taray\u0131c\u0131 ve komut sat\u0131r\u0131 aray\u00fcz\u00fcn\u00fcz\u00fcn haz\u0131r oldu\u011fundan emin olun. Git deposunu olu\u015fturmakla ba\u015flay\u0131n:<\/p>\n
\n# Yeni bir proje klas\u00f6r\u00fc olu\u015fturma\nmkdir hava-durumu-app\ncd hava-durumu-app\n\n# Git deposu ba\u015flatma\ngit init\n\n# Temel dosya yap\u0131s\u0131n\u0131 olu\u015fturma\ntouch index.html style.css script.js\n <\/pre>\n<\/code><\/p>\n
Bu ad\u0131mlar, projenizin temel iskeletini olu\u015fturur ve s\u00fcr\u00fcm kontrol\u00fc i\u00e7in ilk ad\u0131m\u0131 atar. index.html<\/code> ana web sayfan\u0131z\u0131, style.css<\/code> stil kurallar\u0131n\u0131z\u0131 ve script.js<\/code> ise JavaScript kodunuzu bar\u0131nd\u0131racakt\u0131r. Bu a\u015famada, proje i\u00e7in gerekli olabilecek t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 (\u00f6rne\u011fin, bir JavaScript k\u00fct\u00fcphanesi kullanacaksan\u0131z npm install <\/code> ile) kurman\u0131z da uygun olacakt\u0131r. Ancak bu basit \u00f6rnek i\u00e7in ek bir ba\u011f\u0131ml\u0131l\u0131\u011fa ihtiyac\u0131m\u0131z yok.<\/p>\nAd\u0131m 2: HTML \u0130skeletini Olu\u015fturma<\/h3>\n
index.html<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve uygulaman\u0131z\u0131n temel yap\u0131s\u0131n\u0131 olu\u015fturan HTML kodunu yaz\u0131n. Bir ba\u015fl\u0131k, \u015fehir ad\u0131n\u0131 girmek i\u00e7in bir giri\u015f alan\u0131 (input), bir d\u00fc\u011fme (button) ve hava durumu bilgisini g\u00f6sterecek bir alan yeterli olacakt\u0131r.<\/p>\n\n\n\n\n \n \n Hava Durumu Uygulamas\u0131<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\u015eehir Hava Durumu<\/h1>\n <input type=\"text\" id=\"city-input\" placeholder=\"\u015eehir Ad\u0131 Girin\">\n <button id=\"get-weather-btn\">Hava Durumunu Getir<\/button>\n <div id=\"weather-info\">\n <!-- Hava durumu bilgisi buraya gelecek -->\n <\/div>\n <\/div>\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n <\/pre>\n<p><\/code><\/p>\n<p>Burada, <code><link><\/code> etiketi ile CSS dosyas\u0131n\u0131, <code><script><\/code> etiketi ile de JavaScript dosyas\u0131n\u0131 sayfaya dahil ettik. <code><\/p>\n<div class=\"container\"><\/code> ise t\u00fcm i\u00e7eri\u011fi saran ana kutumuz olacak. Bu yap\u0131, hem g\u00f6rsel d\u00fczenleme i\u00e7in bir \u00e7er\u00e7eve sunar hem de JavaScript ile elementlere kolayca eri\u015fim sa\u011flar. \u0130lk commit'inizi yapmay\u0131 unutmay\u0131n: <code>git add .<\/code> ve <code>git commit -m \"HTML iskeleti olu\u015fturuldu\"<\/code>.<\/p>\n<h3>Ad\u0131m 3: CSS ile Tasar\u0131m\u0131 \u015eekillendirme<\/h3>\n<p><code>style.css<\/code> dosyas\u0131n\u0131 kullanarak uygulaman\u0131za estetik bir g\u00f6r\u00fcn\u00fcm kazand\u0131r\u0131n. Basit bir merkezi d\u00fczenleme ve elementlere biraz stil vermek ba\u015flang\u0131\u00e7 i\u00e7in yeterlidir.<\/p>\n<pre><code>\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #f0f2f5;\n margin: 0;\n}\n\n.container {\n background-color: #fff;\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n text-align: center;\n width: 90%;\n max-width: 400px;\n}\n\ninput[type=\"text\"] {\n width: calc(100% - 20px);\n padding: 10px;\n margin-bottom: 15px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 16px;\n}\n\nbutton {\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #0056b3;\n}\n\n#weather-info {\n margin-top: 20px;\n font-size: 18px;\n color: #333;\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Bu CSS kodlar\u0131, uygulaman\u0131z\u0131n daha kullan\u0131c\u0131 dostu ve modern g\u00f6r\u00fcnmesini sa\u011flar. \u00d6zellikle <code>max-width: 400px;<\/code> ve <code>width: 90%;<\/code> gibi responsive tasar\u0131m \u00f6\u011feleri, uygulaman\u0131z\u0131n farkl\u0131 ekran boyutlar\u0131nda daha iyi g\u00f6r\u00fcnmesine yard\u0131mc\u0131 olur. CSS'te yap\u0131lan de\u011fi\u015fiklikler sonras\u0131 yine commit yapmay\u0131 unutmay\u0131n.<\/p>\n<h3>Ad\u0131m 4: JavaScript ile Fonksiyonellik Kazand\u0131rma<\/h3>\n<p><code>script.js<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n. Burada, \u015fehir ad\u0131n\u0131 alacak, bir API'den hava durumu verilerini \u00e7ekecek ve bu verileri <code>weather-info<\/code> div'inde g\u00f6sterecek kodu yazacaks\u0131n\u0131z. API olarak OpenWeatherMap gibi \u00fccretsiz bir servis kullanabilirsiniz. Bir API anahtar\u0131na ihtiyac\u0131n\u0131z olaca\u011f\u0131n\u0131 unutmay\u0131n.<\/p>\n<pre><code>\nconst cityInput = document.getElementById('city-input');\nconst getWeatherBtn = document.getElementById('get-weather-btn');\nconst weatherInfoDiv = document.getElementById('weather-info');\n\nconst API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY'; \/\/ Kendi API anahtar\u0131n\u0131z\u0131 buraya girin\n\nasync function getWeatherData(city) {\n try {\n const response = await fetch(<code>https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&appid=${API_KEY}&units=metric&lang=tr<\/code>);\n if (!response.ok) {\n throw new Error('\u015eehir bulunamad\u0131 veya API hatas\u0131.');\n }\n const data = await response.json();\n displayWeather(data);\n } catch (error) {\n weatherInfoDiv.innerHTML = <code><p>Hata: ${error.message}<\/p><\/code>;\n console.error('Hava durumu verisi al\u0131namad\u0131:', error);\n }\n}\n\nfunction displayWeather(data) {\n const cityName = data.name;\n const temperature = data.main.temp;\n const description = data.weather[0].description;\n const humidity = data.main.humidity;\n const windSpeed = data.wind.speed;\n\n weatherInfoDiv.innerHTML = <code><h2>${cityName}<\/h2>\n <p>S\u0131cakl\u0131k: ${temperature}\u00b0C<\/p>\n <p>A\u00e7\u0131klama: ${description}<\/p>\n <p>Nem Oran\u0131: %${humidity}<\/p>\n <p>R\u00fczgar H\u0131z\u0131: ${windSpeed} m\/s<\/p><\/code>;\n}\n\ngetWeatherBtn.addEventListener('click', () => {\n const city = cityInput.value.trim();\n if (city) {\n getWeatherData(city);\n } else {\n weatherInfoDiv.innerHTML = '<p>L\u00fctfen bir \u015fehir ad\u0131 girin.<\/p>';\n }\n});\n <\/pre>\n<p><\/code><\/p>\n<p>Bu JavaScript kodu, <code>fetch<\/code> API'sini kullanarak asenkron bir \u015fekilde hava durumu verilerini \u00e7eker ve DOM manip\u00fclasyonu ile sayfada g\u00f6sterir. Hata y\u00f6netimi de eklenerek, kullan\u0131c\u0131ya anlaml\u0131 geri bildirimler sunulur. Bu, web geli\u015ftirmede s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir desendir ve HNG13 gibi programlarda bu t\u00fcr API entegrasyonlar\u0131n\u0131 s\u0131k\u00e7a yapman\u0131z gerekecektir. T\u00fcm kodlama bittikten sonra, son commit'inizi yap\u0131n ve projenizi GitHub'a y\u00fckleyin: <code>git add .<\/code>, <code>git commit -m \"JavaScript fonksiyonelli\u011fi eklendi\"<\/code>, <code>git push origin main<\/code>.<\/p>\n<h3>Vaka Analizi: Ekip Projesinde API Anahtar\u0131 Y\u00f6netimi<\/h3>\n<p>Bir HNG13 projesinde 3 ki\u015filik bir ekip olarak \u00e7al\u0131\u015f\u0131yorsunuz. Hava durumu uygulamas\u0131n\u0131 geli\u015ftirirken herkes kendi API anahtar\u0131n\u0131 kullanmak istiyor ama anahtarlar\u0131n Git deposuna (GitHub) y\u00fcklenmemesi gerekiyor. Nas\u0131l bir \u00e7\u00f6z\u00fcm \u00fcretebilirsiniz? Cevap basit: <code>.env<\/code> dosyas\u0131 ve <code>.gitignore<\/code>. Her ekip \u00fcyesi, projenin k\u00f6k dizininde <code>.env<\/code> ad\u0131nda bir dosya olu\u015fturur ve kendi API anahtar\u0131n\u0131 bu dosyaya <code>API_KEY=your_key_here<\/code> \u015feklinde yazar. Ard\u0131ndan, <code>.gitignore<\/code> dosyas\u0131na <code>.env<\/code> sat\u0131r\u0131n\u0131 ekleyerek bu dosyan\u0131n Git taraf\u0131ndan izlenmesini engellersiniz. B\u00f6ylece hassas bilgiler g\u00fcvenli bir \u015fekilde yerel olarak saklan\u0131r ve GitHub'a y\u00fcklenmez. JavaScript kodunuzda ise anahtar\u0131 do\u011frudan kullanmak yerine, geli\u015ftirme sunucunuzun ortam de\u011fi\u015fkenlerinden okursunuz (\u00f6rne\u011fin, Node.js taraf\u0131nda <code>process.env.API_KEY<\/code> veya istemci taraf\u0131nda bir bundler ile).<\/p>\n<pre><code>\n# .gitignore dosyas\u0131 i\u00e7eri\u011fi\n.env\nnode_modules\/\ndist\/\n <\/pre>\n<p><\/code><\/p>\n<h2>Kar\u015f\u0131la\u015f\u0131lan Zorluklar ve \u00c7\u00f6z\u00fcmleri: HNG13 S\u00fcrecinde Yayg\u0131n Hatalardan Nas\u0131l Ka\u00e7\u0131n\u0131l\u0131r?<\/h2>\n<p>HNG13 gibi yo\u011fun programlarda \u00f6\u011frenme s\u00fcreci genellikle ini\u015fli \u00e7\u0131k\u0131\u015fl\u0131d\u0131r. Kod yazarken hatalarla kar\u015f\u0131la\u015fmak, beklenmedik sorunlarla bo\u011fu\u015fmak bu s\u00fcrecin do\u011fal bir par\u00e7as\u0131d\u0131r. \u00d6nemli olan, bu hatalardan ders \u00e7\u0131karabilmek ve \u00e7\u00f6z\u00fcm yollar\u0131 bulabilmektir. Bu b\u00f6l\u00fcmde, HNG13 kat\u0131l\u0131mc\u0131lar\u0131n\u0131n s\u0131k\u00e7a kar\u015f\u0131la\u015ft\u0131\u011f\u0131 zorluklar\u0131 ve bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in kullanabilece\u011finiz stratejileri ve ara\u00e7lar\u0131 ele alaca\u011f\u0131z. Yaz\u0131l\u0131m geli\u015ftirmede \"hata yapmak\" asl\u0131nda \u00f6\u011frenmenin en etkili yollar\u0131ndan biridir; ancak hatalar\u0131 h\u0131zl\u0131ca tespit edip \u00e7\u00f6zmek, verimlili\u011finizi art\u0131r\u0131r.<\/p>\n<h3>Hata Ay\u0131klama (Debugging) Sanat\u0131<\/h3>\n<p>Kodunuz \u00e7al\u0131\u015fm\u0131yor mu? Bekledi\u011finiz \u00e7\u0131kt\u0131y\u0131 alam\u0131yor musunuz? Muhtemelen bir hata var. Hata ay\u0131klama, bir yaz\u0131l\u0131mc\u0131n\u0131n en temel ve en \u00f6nemli becerilerinden biridir. Modern taray\u0131c\u0131lar (Chrome Developer Tools, Firefox Developer Tools) ve kod d\u00fczenleyicileri (VS Code Debugger) g\u00fc\u00e7l\u00fc hata ay\u0131klama ara\u00e7lar\u0131 sunar. Console'a <code>console.log()<\/code> ile de\u011fi\u015fkenlerin de\u011ferlerini yazd\u0131rarak kodun ak\u0131\u015f\u0131n\u0131 takip edebilir, breakpointler koyarak kodun belirli bir noktada durmas\u0131n\u0131 sa\u011flayabilir ve ad\u0131m ad\u0131m ilerleyerek sorunun kayna\u011f\u0131n\u0131 bulabilirsiniz. \u00d6rne\u011fin, hava durumu uygulaman\u0131zda API'den veri gelmiyorsa, <code>console.log(response)<\/code> veya <code>console.log(data)<\/code> ile yan\u0131t\u0131n ne oldu\u011funu kontrol edebilirsiniz. Genellikle, en basit hatalar bile saatler s\u00fcren ara\u015ft\u0131rmalara neden olabilir. Bu y\u00fczden, sistematik bir hata ay\u0131klama yakla\u015f\u0131m\u0131 benimsemek \u00f6nemlidir: hatay\u0131 izole et, tahminde bulun, dene, g\u00f6zlemle ve tekrarlayarak sorunu \u00e7\u00f6z.<\/p>\n<pre><code>\n\/\/ JavaScript'te hata ay\u0131klama i\u00e7in console.log kullan\u0131m\u0131\nasync function getWeatherData(city) {\n console.log(\"Hava durumu verisi \u00e7ekiliyor, \u015fehir:\", city); \/\/ \u0130\u015flemin ba\u015flad\u0131\u011f\u0131n\u0131 g\u00f6sterir\n try {\n const response = await fetch(<code>...<\/code>);\n console.log(\"API yan\u0131t\u0131:\", response); \/\/ API yan\u0131t\u0131n\u0131n durumunu kontrol et\n if (!response.ok) {\n console.error(\"API hatas\u0131:\", response.status, response.statusText); \/\/ Hata detaylar\u0131n\u0131 logla\n throw new Error('\u015eehir bulunamad\u0131 veya API hatas\u0131.');\n }\n const data = await response.json();\n console.log(\"Gelen veri:\", data); \/\/ Gelen verinin yap\u0131s\u0131n\u0131 kontrol et\n displayWeather(data);\n } catch (error) {\n console.error('Fonksiyon hatas\u0131:', error); \/\/ Genel bir hata yakalama\n }\n}\n <\/pre>\n<p><\/code><\/p>\n<h3>Yard\u0131m Araman\u0131n \u00d6nemi: Stack Overflow ve Mentorluk<\/h3>\n<p>Bir sorunla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131zda, b\u00fcy\u00fck olas\u0131l\u0131kla daha \u00f6nce ba\u015fkalar\u0131 da benzer bir sorunla kar\u015f\u0131la\u015fm\u0131\u015ft\u0131r. Bu noktada Stack Overflow gibi geli\u015ftirici topluluklar\u0131 paha bi\u00e7ilmez bir kaynakt\u0131r. Sorununuzu a\u00e7\u0131k ve anla\u015f\u0131l\u0131r bir \u015fekilde ifade ederek, ilgili etiketleri kullanarak arama yapmak, genellikle h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm bulman\u0131z\u0131 sa\u011flar. Ancak, sadece kopyala-yap\u0131\u015ft\u0131r yapmak yerine, bulunan \u00e7\u00f6z\u00fcm\u00fc anlamaya \u00e7al\u0131\u015fmak ve kendi kodunuza uyarlamak esast\u0131r. HNG13 gibi programlarda mentorlar\u0131n\u0131z, size yol g\u00f6stermek ve \u00f6\u011frenme s\u00fcrecinizi h\u0131zland\u0131rmak i\u00e7in oradad\u0131r. Bir sorunla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131zda, ilk olarak kendiniz biraz ara\u015ft\u0131rma yap\u0131n. \u00c7\u00f6zemedi\u011finizde ise, sorununuzu net bir \u015fekilde ifade ederek mentorunuzdan yard\u0131m isteyin. Ne denedi\u011finizi, ne bekledi\u011finizi ve ne ile kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z\u0131 a\u00e7\u0131klamak, mentorunuzun size daha etkili bir \u015fekilde yard\u0131mc\u0131 olmas\u0131n\u0131 sa\u011flar. Bu s\u00fcre\u00e7, ayn\u0131 zamanda problem \u00e7\u00f6zme ve ileti\u015fim becerilerinizi de geli\u015ftirir. Ayr\u0131ca, program i\u00e7indeki di\u011fer kat\u0131l\u0131mc\u0131larla ileti\u015fim kurmak, ortak sorunlar\u0131 \u00e7\u00f6zmek ve birbirinize destek olmak, hem motivasyonunuzu art\u0131r\u0131r hem de farkl\u0131 bak\u0131\u015f a\u00e7\u0131lar\u0131 kazanman\u0131z\u0131 sa\u011flar. Unutmay\u0131n, yaz\u0131l\u0131m geli\u015ftirme bir tak\u0131m sporudur ve yard\u0131m istemek zay\u0131fl\u0131k de\u011fil, ak\u0131ll\u0131ca bir stratejidir.<\/p>\n<div class=\"expert-tip\">\n Uzman \u0130pucu: Bir hata ay\u0131klama oturumu ba\u015flatmadan \u00f6nce, sorunu k\u00fc\u00e7\u00fck par\u00e7alara ay\u0131r\u0131n. Hatan\u0131n tam olarak nerede ba\u015flad\u0131\u011f\u0131n\u0131 anlamaya \u00e7al\u0131\u015f\u0131n. Bu, hatay\u0131 izole etmenizi ve daha h\u0131zl\u0131 \u00e7\u00f6z\u00fcm bulman\u0131z\u0131 sa\u011flar.\n <\/div>\n<h3>S\u00fcr\u00fcm Kontrol\u00fc Hatalar\u0131 ve Geri Alma<\/h3>\n<p>Git kullan\u0131rken yanl\u0131\u015f bir dosyay\u0131 commit etmek, yanl\u0131\u015f branch'e merge yapmak veya istenmeyen de\u011fi\u015fiklikleri ana depoya g\u00f6ndermek gibi hatalar s\u0131k\u00e7a ya\u015fan\u0131r. Ancak Git, bu t\u00fcr hatalardan kurtulmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. \u00d6rne\u011fin, son commit'inizi geri almak i\u00e7in <code>git reset HEAD~1<\/code> veya <code>git revert <commit_hash><\/code> kullanabilirsiniz. Git ge\u00e7mi\u015fini d\u00fczenlemek i\u00e7in <code>git rebase<\/code> gibi daha geli\u015fmi\u015f komutlar da mevcuttur. \u00d6nemli olan, bu komutlar\u0131 dikkatli kullanmak ve \u00f6zellikle payla\u015f\u0131lan depolarda <code>git push --force<\/code> gibi komutlardan ka\u00e7\u0131nmakt\u0131r. Hatalar\u0131n\u0131z\u0131 geri alma yetene\u011fi, yaz\u0131l\u0131m geli\u015ftirme s\u00fcrecinde size b\u00fcy\u00fck bir g\u00fcvenlik a\u011f\u0131 sa\u011flar ve denemekten korkmaman\u0131z\u0131 te\u015fvik eder. HNG13 boyunca, Git komutlar\u0131na h\u00e2kim olmak, hem kendi projelerinizde hem de ekip projelerinde size b\u00fcy\u00fck fayda sa\u011flayacakt\u0131r. Yanl\u0131\u015fl\u0131kla yap\u0131lan bir de\u011fi\u015fikli\u011fi geri alabilmek, potansiyel saatler s\u00fcren manuel d\u00fczeltme \u00e7abalar\u0131ndan sizi kurtarabilir.<\/p>\n<h2>Performans ve Optimizasyon: Mobil Uyumlu ve H\u0131zl\u0131 Uygulamalar Nas\u0131l Geli\u015ftirilir?<\/h2>\n<p>G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n web siteleri ve uygulamalardan beklentileri sadece i\u015flevsellikle s\u0131n\u0131rl\u0131 de\u011fildir. H\u0131zl\u0131 y\u00fcklenen, t\u00fcm cihazlarda sorunsuz \u00e7al\u0131\u015fan ve kullan\u0131c\u0131 deneyimini \u00f6n planda tutan \u00e7\u00f6z\u00fcmler art\u0131k bir l\u00fcks de\u011fil, bir gerekliliktir. HNG13 gibi programlarda \u00f6\u011frendi\u011finiz temel bilgilerin \u00f6tesine ge\u00e7erek, uygulamalar\u0131n\u0131z\u0131 performansl\u0131 ve mobil uyumlu hale getirmek, sizi di\u011fer geli\u015ftiricilerden ay\u0131racak \u00f6nemli bir beceridir. Bu b\u00f6l\u00fcmde, web uygulamalar\u0131n\u0131z\u0131 daha h\u0131zl\u0131 ve daha eri\u015filebilir k\u0131lmak i\u00e7in kullanabilece\u011finiz baz\u0131 kritik y\u00f6ntemleri ve stratejileri inceleyece\u011fiz.<\/p>\n<h3>Mobil Duyarl\u0131 Tasar\u0131m (Responsive Design) Nedir ve Nas\u0131l Uygulan\u0131r?<\/h3>\n<p>Mobil cihazlar\u0131n internet trafi\u011findeki pay\u0131n\u0131n artmas\u0131yla birlikte, web uygulamalar\u0131n\u0131n farkl\u0131 ekran boyutlar\u0131na ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerine uyum sa\u011flayabilmesi hayati bir \u00f6neme sahip olmu\u015ftur. Mobil duyarl\u0131 tasar\u0131m (responsive design), tek bir kod taban\u0131 kullanarak uygulaman\u0131z\u0131n masa\u00fcst\u00fc, tablet ve mobil cihazlarda en iyi kullan\u0131c\u0131 deneyimini sunmas\u0131n\u0131 sa\u011flayan yakla\u015f\u0131md\u0131r. Bu, genellikle \u00fc\u00e7 ana bile\u015fenle ba\u015far\u0131l\u0131r: esnek \u0131zgaralar (fluid grids), esnek g\u00f6rseller (flexible images) ve medya sorgular\u0131 (media queries).<\/p>\n<p><strong>Esnek Izgaralar ve G\u00f6rseller:<\/strong> CSS ile elementlerinizin geni\u015fli\u011fini y\u00fczde (%) baz\u0131nda veya <code>vw<\/code> (viewport width) gibi g\u00f6receli birimlerle tan\u0131mlayarak, ekran boyutuna g\u00f6re otomatik olarak \u00f6l\u00e7eklenmelerini sa\u011flayabilirsiniz. Ayn\u0131 \u015fekilde, g\u00f6rsellerin <code>max-width: 100%; height: auto;<\/code> gibi \u00f6zelliklerle boyutland\u0131r\u0131lmas\u0131, g\u00f6rsellerin kapsay\u0131c\u0131lar\u0131n\u0131n d\u0131\u015f\u0131na ta\u015fmas\u0131n\u0131 engeller ve ekran boyutuna g\u00f6re do\u011fru oranda k\u00fc\u00e7\u00fclmesini sa\u011flar. Bu, i\u00e7eri\u011finizin farkl\u0131 cihazlarda bozulmadan g\u00f6r\u00fcnmesini garantiler.<\/p>\n<p><strong>Medya Sorgular\u0131 (Media Queries):<\/strong> Medya sorgular\u0131, belirli ekran boyutlar\u0131, \u00e7\u00f6z\u00fcn\u00fcrl\u00fckler veya cihaz y\u00f6nelimleri gibi ko\u015fullara ba\u011fl\u0131 olarak farkl\u0131 CSS kurallar\u0131n\u0131 uygulaman\u0131z\u0131 sa\u011flayan CSS \u00f6zellikleridir. \u00d6rne\u011fin, mobil cihazlar i\u00e7in farkl\u0131 bir navigasyon men\u00fcs\u00fc veya daha k\u00fc\u00e7\u00fck font boyutlar\u0131 belirleyebilirsiniz. Bu sayede, farkl\u0131 cihazlarda farkl\u0131 stil kurallar\u0131 uygulayarak kullan\u0131c\u0131ya \u00f6zel bir deneyim sunulur.<\/p>\n<pre><code>\n\/* style.css i\u00e7inde bir media query \u00f6rne\u011fi *\/\n.container {\n width: 90%; \/* Varsay\u0131lan geni\u015flik *\/\n margin: 0 auto;\n padding: 20px;\n}\n\n\/* 768px geni\u015fli\u011finden k\u00fc\u00e7\u00fck ekranlar i\u00e7in (tablet ve mobil) *\/\n@media screen and (max-width: 768px) {\n .container {\n width: 95%; \/* Daha dar ekranlarda biraz daha geni\u015f *\/\n padding: 15px;\n }\n h1 {\n font-size: 24px;\n }\n button {\n display: block; \/* Butonu tam geni\u015flik yap *\/\n width: 100%;\n margin-top: 10px;\n }\n}\n\n\/* 480px geni\u015fli\u011finden k\u00fc\u00e7\u00fck ekranlar i\u00e7in (sadece mobil) *\/\n@media screen and (max-width: 480px) {\n .container {\n padding: 10px;\n }\n h1 {\n font-size: 20px;\n }\n input[type=\"text\"] {\n font-size: 14px;\n }\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, <code>max-width<\/code> kullan\u0131larak belirli bir piksel de\u011ferinin alt\u0131ndaki ekranlar i\u00e7in farkl\u0131 CSS kurallar\u0131 tan\u0131mlanm\u0131\u015ft\u0131r. Bu sayede, uygulaman\u0131z masa\u00fcst\u00fc bilgisayarlarda geni\u015f bir d\u00fczenle g\u00f6r\u00fcn\u00fcrken, mobil cihazlarda daha kompakt ve okunakl\u0131 bir yap\u0131ya b\u00fcr\u00fcn\u00fcr. Mobil uyumluluk, sadece estetik bir kayg\u0131 de\u011fil, ayn\u0131 zamanda SEO (Arama Motoru Optimizasyonu) i\u00e7in de kritik bir fakt\u00f6rd\u00fcr; arama motorlar\u0131 mobil uyumlu siteleri daha \u00fcst s\u0131ralara ta\u015f\u0131r.<\/p>\n<h3>Uygulama Performans\u0131n\u0131 Art\u0131rma \u0130pu\u00e7lar\u0131<\/h3>\n<p>Bir uygulaman\u0131n h\u0131zl\u0131 y\u00fcklenmesi ve ak\u0131c\u0131 \u00e7al\u0131\u015fmas\u0131, kullan\u0131c\u0131 memnuniyeti i\u00e7in hayati \u00f6neme sahiptir. Performans optimizasyonu, genellikle \u00e7oklu ad\u0131mlar i\u00e7eren kapsaml\u0131 bir s\u00fcre\u00e7tir:<\/p>\n<ul>\n<li><strong>G\u00f6rsel Optimizasyonu:<\/strong> B\u00fcy\u00fck boyutlu g\u00f6rseller, web sayfalar\u0131n\u0131n yava\u015f y\u00fcklenmesinin en yayg\u0131n nedenlerinden biridir. G\u00f6rselleri s\u0131k\u0131\u015ft\u0131r\u0131n, do\u011fru format\u0131 kullan\u0131n (JPEG, PNG, WebP) ve modern <code>loading=\"lazy\"<\/code> \u00f6zelli\u011fini kullanarak sadece ekranda g\u00f6r\u00fcnen g\u00f6rselleri y\u00fckleyin.<\/li>\n<li><strong>Kod Optimizasyonu (Minification ve Bundling):<\/strong> JavaScript ve CSS dosyalar\u0131n\u0131z\u0131 \"minify\" ederek (bo\u015fluklar\u0131, yorumlar\u0131 ve gereksiz karakterleri kald\u0131rarak) boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcn. Birden fazla JS veya CSS dosyas\u0131n\u0131 tek bir dosyada birle\u015ftirerek (bundling), taray\u0131c\u0131n\u0131n daha az HTTP iste\u011fi yapmas\u0131n\u0131 sa\u011flay\u0131n. Webpack veya Rollup gibi ara\u00e7lar bu konuda size yard\u0131mc\u0131 olabilir.<\/li>\n<li><strong>Taray\u0131c\u0131 \u00d6nbellekleme (Browser Caching):<\/strong> Taray\u0131c\u0131lar\u0131n statik varl\u0131klar\u0131 (CSS, JS, resimler) yerel olarak \u00f6nbelle\u011fe almas\u0131n\u0131 sa\u011flayarak, tekrarlayan ziyaretlerde sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azaltabilirsiniz. HTTP ba\u015fl\u0131klar\u0131n\u0131 (<code>Cache-Control<\/code>) do\u011fru \u015fekilde yap\u0131land\u0131rarak bunu y\u00f6netebilirsiniz.<\/li>\n<li><strong>Asenkron Y\u00fckleme:<\/strong> Kritik olmayan JavaScript dosyalar\u0131n\u0131 <code>async<\/code> veya <code>defer<\/code> nitelikleriyle y\u00fckleyerek, bu dosyalar\u0131n ana HTML ayr\u0131\u015ft\u0131rma s\u00fcrecini engellemesini \u00f6nleyin. Bu, sayfan\u0131n daha h\u0131zl\u0131 etkile\u015fimli hale gelmesini sa\u011flar.<\/li>\n<li><strong>Sunucu Taraf\u0131 Optimizasyonlar:<\/strong> E\u011fer bir backend uygulaman\u0131z varsa, veritaban\u0131 sorgular\u0131n\u0131 optimize etmek, \u00f6nbellekleme kullanmak ve sunucu yan\u0131t s\u00fcrelerini iyile\u015ftirmek genel performans\u0131 art\u0131racakt\u0131r.<\/li>\n<\/ul>\n<h3>Vaka Analizi: Yava\u015f Y\u00fcklenen Bir E-ticaret Sitesinin Optimizasyonu<\/h3>\n<p>Bir HNG13 projesinde, \u00fcr\u00fcn g\u00f6rselleri bol olan ve mobil cihazlarda yava\u015f y\u00fcklenen bir e-ticaret sitesi geli\u015ftirdi\u011finizi varsayal\u0131m. \u0130lk incelemede, her \u00fcr\u00fcn sayfas\u0131nda 2MB boyutunda y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rseller kullan\u0131ld\u0131\u011f\u0131 ve t\u00fcm CSS ile JavaScript dosyalar\u0131n\u0131n ayr\u0131 ayr\u0131 y\u00fcklendi\u011fi tespit edildi. \u00c7\u00f6z\u00fcm olarak:<\/p>\n<ol>\n<li>T\u00fcm \u00fcr\u00fcn g\u00f6rselleri <code>WebP<\/code> format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri optimize edildi. Her g\u00f6rselin boyutu ortalama 200KB'a d\u00fc\u015f\u00fcr\u00fcld\u00fc.<\/li>\n<li>G\u00f6rseller i\u00e7in <code>loading=\"lazy\"<\/code> eklendi, b\u00f6ylece kullan\u0131c\u0131 sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a g\u00f6rseller y\u00fcklendi.<\/li>\n<li>T\u00fcm CSS ve JavaScript dosyalar\u0131 Webpack ile tek bir <code>bundle.css<\/code> ve <code>bundle.js<\/code> dosyas\u0131nda birle\u015ftirildi ve minify edildi.<\/li>\n<li>Kritik olmayan JavaScript dosyalar\u0131na <code>defer<\/code> niteli\u011fi eklendi.<\/li>\n<li>Sonu\u00e7 olarak, sitenin mobil cihazlardaki ilk y\u00fckleme s\u00fcresi 8 saniyeden 2.5 saniyeye d\u00fc\u015ft\u00fc, bu da kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirdi ve hemen \u00e7\u0131kma oran\u0131n\u0131 azaltt\u0131.<\/li>\n<\/ol>\n<p>Bu t\u00fcr optimizasyonlar, HNG13 s\u00fcrecinde sizi sadece kod yazan birinden, ayn\u0131 zamanda uygulamalar\u0131n\u0131n kalitesini d\u00fc\u015f\u00fcnen bir geli\u015ftiriciye d\u00f6n\u00fc\u015ft\u00fcrecektir. Performans ve mobil uyumluluk, g\u00fcn\u00fcm\u00fcz web geli\u015ftirmenin temel direkleridir ve bu konularda yetkin olmak, kariyeriniz i\u00e7in b\u00fcy\u00fck bir avantaj sa\u011flar.<\/p>\n<h2>HNG13 Sonras\u0131 Kariyeriniz \u0130\u00e7in Gelece\u011fe Y\u00f6nelik Ad\u0131mlar Neler Olmal\u0131?<\/h2>\n<p>HNG13 gibi yo\u011fun ve \u00f6\u011fretici bir program\u0131 tamamlamak, yaz\u0131l\u0131m geli\u015ftirme kariyerinizde \u00f6nemli bir d\u00f6n\u00fcm noktas\u0131d\u0131r. Bu s\u00fcre\u00e7te edindi\u011finiz bilgi ve deneyimler, size sa\u011flam bir temel sunar. Ancak yaz\u0131l\u0131m d\u00fcnyas\u0131 s\u00fcrekli evrildi\u011fi i\u00e7in, HNG13 sonras\u0131 ataca\u011f\u0131n\u0131z ad\u0131mlar, kariyerinizin gelece\u011fi i\u00e7in b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu b\u00f6l\u00fcm, program\u0131 tamamlad\u0131ktan sonra kendinizi nas\u0131l daha da geli\u015ftirebilece\u011finiz, edindi\u011finiz becerileri nas\u0131l sergileyebilece\u011finiz ve yaz\u0131l\u0131m sekt\u00f6r\u00fcnde kendinize nas\u0131l bir yer edinebilece\u011finiz \u00fczerine stratejiler sunacakt\u0131r.<\/p>\n<h3>Portf\u00f6y Olu\u015fturman\u0131n ve Projelerinizi Sergilemenin \u00d6nemi<\/h3>\n<p>\u0130\u015f aray\u0131\u015f\u0131na girdi\u011finizde veya freelance projeler \u00fcstlenmek istedi\u011finizde, potansiyel i\u015fverenlere g\u00f6sterebilece\u011finiz somut \u00e7\u0131kt\u0131lar olmas\u0131 kritik \u00f6neme sahiptir. HNG13 s\u0131ras\u0131nda tamamlad\u0131\u011f\u0131n\u0131z projeler, bu \u00e7\u0131kt\u0131lar i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Bu projeleri GitHub gibi platformlarda d\u00fczenli ve a\u00e7\u0131klay\u0131c\u0131 bir \u015fekilde yay\u0131nlay\u0131n. Her projenin bir README dosyas\u0131 i\u00e7ermesine \u00f6zen g\u00f6sterin; bu dosyada projenin ne yapt\u0131\u011f\u0131, hangi teknolojilerin kullan\u0131ld\u0131\u011f\u0131, nas\u0131l kurulup \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131 ve projenin hangi sorunlar\u0131 \u00e7\u00f6zd\u00fc\u011f\u00fc a\u00e7\u0131k\u00e7a belirtilmelidir. Ayr\u0131ca, bu projeleri bir ki\u015fisel web sitesi veya portf\u00f6y sitesi arac\u0131l\u0131\u011f\u0131yla sergilemeniz, profesyonel imaj\u0131n\u0131z\u0131 g\u00fc\u00e7lendirecektir. Portf\u00f6y sitenizde, projelerin canl\u0131 demolar\u0131na ba\u011flant\u0131lar ekleyin ve her projenin geli\u015ftirme s\u00fcrecinden, kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklardan ve elde etti\u011finiz \u00e7\u00f6z\u00fcmlerden bahsedin. Bu, sadece teknik becerilerinizi de\u011fil, ayn\u0131 zamanda problem \u00e7\u00f6zme yetene\u011finizi ve d\u00fc\u015f\u00fcnce yap\u0131n\u0131z\u0131 da ortaya koyar. Bir portf\u00f6y, binlerce kelimeden daha fazlas\u0131n\u0131 anlat\u0131r ve potansiyel i\u015fverenlere yeteneklerinizi do\u011frudan g\u00f6stermenin en etkili yoludur.<\/p>\n<h3>S\u00fcrekli \u00d6\u011frenme ve Geli\u015fime A\u00e7\u0131k Olma<\/h3>\n<p>Yaz\u0131l\u0131m d\u00fcnyas\u0131, teknolojilerin h\u0131zla geli\u015fti\u011fi, yeni k\u00fct\u00fcphanelerin ve framework'lerin ortaya \u00e7\u0131kt\u0131\u011f\u0131 dinamik bir aland\u0131r. HNG13'te edindi\u011finiz bilgiler de\u011ferli olsa da, sekt\u00f6rde kal\u0131c\u0131 olmak ve rekabet\u00e7i kalabilmek i\u00e7in s\u00fcrekli \u00f6\u011frenme ve kendinizi geli\u015ftirmeye a\u00e7\u0131k olman\u0131z \u015fartt\u0131r. Bu, a\u015fa\u011f\u0131daki yollarla sa\u011flanabilir:<\/p>\n<ul>\n<li><strong>Yeni Teknolojileri Takip Etme:<\/strong> Sekt\u00f6rdeki trendleri, yeni \u00e7\u0131kan dilleri, k\u00fct\u00fcphaneleri ve framework'leri takip edin. \u00d6rne\u011fin, React, Vue veya Angular gibi pop\u00fcler frontend framework'lerini veya Node.js, Python\/Django gibi backend teknolojilerini derinlemesine \u00f6\u011frenmeyi d\u00fc\u015f\u00fcnebilirsiniz.<\/li>\n<li><strong>Online Kurslar ve Kaynaklar:<\/strong> Udemy, Coursera, freeCodeCamp gibi platformlardaki ileri d\u00fczey kurslarla bilgi birikiminizi art\u0131r\u0131n. Yaz\u0131l\u0131m bloglar\u0131n\u0131, teknik makaleleri ve YouTube kanallar\u0131n\u0131 d\u00fczenli olarak takip edin.<\/li>\n<li><strong>A\u00e7\u0131k Kaynak Projelere Kat\u0131lma:<\/strong> GitHub'daki a\u00e7\u0131k kaynak projelere katk\u0131da bulunmak, ger\u00e7ek d\u00fcnya kod tabanlar\u0131yla \u00e7al\u0131\u015fma deneyimi kazanman\u0131z\u0131 ve di\u011fer geli\u015ftiricilerle etkile\u015fimde bulunman\u0131z\u0131 sa\u011flar. Bu, ayn\u0131 zamanda Git ve ekip \u00e7al\u0131\u015fmas\u0131 becerilerinizi peki\u015ftirmenin harika bir yoludur.<\/li>\n<li><strong>Mentorluk ve Topluluk Etkinlikleri:<\/strong> Daha deneyimli geli\u015ftiricilerden mentorluk almaya devam edin ve yerel yaz\u0131l\u0131m topluluklar\u0131na veya online forumlara kat\u0131larak bilgi al\u0131\u015fveri\u015finde bulunun. Konferanslara, hackathonlara ve meet-up'lara kat\u0131lmak, hem yeni \u015feyler \u00f6\u011frenmenizi hem de a\u011f kurman\u0131z\u0131 sa\u011flar.<\/li>\n<\/ul>\n<p>Unutmay\u0131n, yaz\u0131l\u0131m geli\u015ftirme bir maratondur, sprint de\u011fil. Kendinize yat\u0131r\u0131m yapmaya devam etmek, uzun vadeli ba\u015far\u0131 i\u00e7in en \u00f6nemli ad\u0131md\u0131r. HNG13 size kap\u0131y\u0131 aralad\u0131; \u015fimdi bu kap\u0131dan ge\u00e7ip kendi yolunuzu \u00e7izme zaman\u0131.<\/p>\n<h2>Sonu\u00e7: HNG13 Ser\u00fcveninizden \u00c7\u0131kar\u0131lacak Dersler ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>HNG13 program\u0131, yaz\u0131l\u0131m geli\u015ftirme yolculu\u011funuzun sadece ba\u015flang\u0131c\u0131 olabilir, ancak sundu\u011fu deneyim ve bilgi birikimi, kariyerinizin temelini olu\u015fturacak kadar de\u011ferlidir. Bu s\u00fcre\u00e7 boyunca sadece teknik beceriler kazanmakla kalmad\u0131n\u0131z, ayn\u0131 zamanda problem \u00e7\u00f6zme yetene\u011finizi, ekip i\u00e7inde \u00e7al\u0131\u015fma becerilerinizi ve kendinize olan g\u00fcveninizi de geli\u015ftirdiniz. HTML, CSS, JavaScript gibi web'in temel dillerine hakim oldunuz, Git ve GitHub ile s\u00fcr\u00fcm kontrol\u00fcn\u00fcn \u00f6nemini kavrad\u0131n\u0131z, hata ay\u0131klaman\u0131n inceliklerini \u00f6\u011frendiniz ve hatta uygulamalar\u0131n\u0131z\u0131 mobil uyumlu ve performansl\u0131 hale getirme stratejilerini ke\u015ffettiniz. Unutmay\u0131n ki yaz\u0131l\u0131m d\u00fcnyas\u0131nda \u00f6\u011frenme asla bitmez. HNG13'ten elde etti\u011finiz momentumu s\u00fcrd\u00fcrmek, s\u00fcrekli olarak yeni bilgiler edinmek ve edindi\u011finiz bu bilgileri ger\u00e7ek d\u00fcnya projelerinde uygulamak, sizi ba\u015far\u0131l\u0131 bir geli\u015ftirici yapacakt\u0131r. Bu yolculukta att\u0131\u011f\u0131n\u0131z her ad\u0131m, sizi daha yetkin ve daha donan\u0131ml\u0131 k\u0131lacakt\u0131r.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<table class=\"faq-table\">\n<thead>\n<tr>\n<th>Soru<\/th>\n<th>Cevap<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>HNG13 gibi bir programa kat\u0131lmak i\u00e7in \u00f6nceden ne kadar deneyimim olmal\u0131?<\/td>\n<td>HNG13 genellikle ba\u015flang\u0131\u00e7 seviyesindeki kat\u0131l\u0131mc\u0131lar\u0131 hedeflese de, HTML, CSS ve JavaScript gibi temel web teknolojilerine dair genel bir anlay\u0131\u015fa sahip olmak, s\u00fcrece daha h\u0131zl\u0131 adapte olman\u0131z\u0131 ve programdan daha fazla fayda sa\u011flaman\u0131z\u0131 kolayla\u015ft\u0131r\u0131r. Hi\u00e7 deneyiminiz olmasa bile, \u00f6\u011frenmeye a\u00e7\u0131k ve azimliyseniz ba\u015far\u0131l\u0131 olabilirsiniz.<\/td>\n<\/tr>\n<tr>\n<td>HNG13 sonras\u0131 nas\u0131l bir kariyere y\u00f6nelebilirim?<\/td>\n<td>HNG13, sizi web geli\u015ftirme alan\u0131nda bir\u00e7ok kariyere haz\u0131rlayabilir. Frontend geli\u015ftirici, backend geli\u015ftirici, full-stack geli\u015ftirici veya mobil uygulama geli\u015ftiricisi gibi rollerden birine y\u00f6nelebilirsiniz. Program boyunca hangi alanlara daha \u00e7ok ilgi duydu\u011funuzu ke\u015ffetmek \u00f6nemlidir.<\/td>\n<\/tr>\n<tr>\n<td>Program boyunca kar\u015f\u0131la\u015ft\u0131\u011f\u0131m teknik sorunlar i\u00e7in kimden yard\u0131m almal\u0131y\u0131m?<\/td>\n<td>\u00d6ncelikle, sorunu kendi ba\u015f\u0131n\u0131za \u00e7\u00f6zmeye \u00e7al\u0131\u015f\u0131n, internette ara\u015ft\u0131r\u0131n (Stack Overflow gibi platformlar). \u00c7\u00f6zemedi\u011finizde ise, HNG13'teki mentorlar\u0131n\u0131zdan veya di\u011fer kat\u0131l\u0131mc\u0131lardan yard\u0131m isteyebilirsiniz. Unutmay\u0131n, yard\u0131m istemek \u00f6\u011frenme s\u00fcrecinin do\u011fal bir par\u00e7as\u0131d\u0131r.<\/td>\n<\/tr>\n<tr>\n<td>HNG13'ten sonra portf\u00f6y\u00fcm\u00fc nas\u0131l olu\u015fturmal\u0131y\u0131m?<\/td>\n<td>HNG13 s\u0131ras\u0131nda geli\u015ftirdi\u011finiz projeleri GitHub'da sergileyin. Her projeye detayl\u0131 bir README dosyas\u0131 ekleyin. M\u00fcmk\u00fcnse, bu projeleri canl\u0131 demolarla birlikte ki\u015fisel bir web sitesi veya portf\u00f6y sitesi \u00fczerinde toplay\u0131n. Bu, potansiyel i\u015fverenlere yeteneklerinizi g\u00f6stermenin en etkili yoludur.<\/td>\n<\/tr>\n<tr>\n<td>S\u00fcrekli \u00f6\u011frenmeyi nas\u0131l s\u00fcrd\u00fcrebilirim?<\/td>\n<td>Online kurslar, teknik bloglar, YouTube kanallar\u0131 ve sekt\u00f6rdeki yeni teknolojileri takip ederek s\u00fcrekli \u00f6\u011frenmeyi s\u00fcrd\u00fcr\u00fcn. A\u00e7\u0131k kaynak projelere katk\u0131da bulunun, yerel veya \u00e7evrimi\u00e7i geli\u015ftirici topluluklar\u0131na kat\u0131l\u0131n. Unutmay\u0131n, yaz\u0131l\u0131m d\u00fcnyas\u0131 s\u00fcrekli evriliyor ve geli\u015fime a\u00e7\u0131k olmak ba\u015far\u0131n\u0131n anahtar\u0131d\u0131r.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Yaz\u0131l\u0131m d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkesin akl\u0131nda benzer sorular yank\u0131lan\u0131r: “Nereden ba\u015flamal\u0131y\u0131m?”, “Hangi teknolojileri \u00f6\u011frenmeliyim?”, “Bu karma\u015f\u0131k d\u00fcnyaya…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-32006","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber<\/title>\n<meta name=\"description\" content=\"Yaz\u0131l\u0131m d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkesin akl\u0131nda benzer sorular yank\u0131lan\u0131r: "Nereden ba\u015flamal\u0131y\u0131m?", "Hangi teknolojileri \u00f6\u011frenmeliyim?", "Bu karma\u015f\u0131k d\u00fcnyaya nas\u0131l adapte olabilirim?". \u0130\u015fte tam da bu noktada, HNG13 gibi deneyimler devreye girer. HNG13, kodlama ser\u00fcveninize ba\u015flamak veya mevcut becerilerinizi peki\u015ftirmek i\u00e7in e\u015fsiz bir f\u0131rsat sunar. Bu makale, HNG13'\u00fcn derinliklerine inerek, yaz\u0131l\u0131ma ilk ad\u0131mlar\u0131n\u0131z\u0131 sa\u011flam bir \u015fekilde atman\u0131z i\u00e7in size rehberlik edecek.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber\" \/>\n<meta property=\"og:description\" content=\"Yaz\u0131l\u0131m d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkesin akl\u0131nda benzer sorular yank\u0131lan\u0131r: "Nereden ba\u015flamal\u0131y\u0131m?", "Hangi teknolojileri \u00f6\u011frenmeliyim?", "Bu karma\u015f\u0131k d\u00fcnyaya nas\u0131l adapte olabilirim?". \u0130\u015fte tam da bu noktada, HNG13 gibi deneyimler devreye girer. HNG13, kodlama ser\u00fcveninize ba\u015flamak veya mevcut becerilerinizi peki\u015ftirmek i\u00e7in e\u015fsiz bir f\u0131rsat sunar. Bu makale, HNG13'\u00fcn derinliklerine inerek, yaz\u0131l\u0131ma ilk ad\u0131mlar\u0131n\u0131z\u0131 sa\u011flam bir \u015fekilde atman\u0131z i\u00e7in size rehberlik edecek.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-16T13:31:45+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"29 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber\",\"datePublished\":\"2025-10-16T13:31:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/\"},\"wordCount\":5281,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/\",\"name\":\"HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-16T13:31:45+00:00\",\"description\":\"Yaz\u0131l\u0131m d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkesin akl\u0131nda benzer sorular yank\u0131lan\u0131r: \\\"Nereden ba\u015flamal\u0131y\u0131m?\\\", \\\"Hangi teknolojileri \u00f6\u011frenmeliyim?\\\", \\\"Bu karma\u015f\u0131k d\u00fcnyaya nas\u0131l adapte olabilirim?\\\". \u0130\u015fte tam da bu noktada, HNG13 gibi deneyimler devreye girer. HNG13, kodlama ser\u00fcveninize ba\u015flamak veya mevcut becerilerinizi peki\u015ftirmek i\u00e7in e\u015fsiz bir f\u0131rsat sunar. Bu makale, HNG13'\u00fcn derinliklerine inerek, yaz\u0131l\u0131ma ilk ad\u0131mlar\u0131n\u0131z\u0131 sa\u011flam bir \u015fekilde atman\u0131z i\u00e7in size rehberlik edecek.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber","description":"Yaz\u0131l\u0131m d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkesin akl\u0131nda benzer sorular yank\u0131lan\u0131r: \"Nereden ba\u015flamal\u0131y\u0131m?\", \"Hangi teknolojileri \u00f6\u011frenmeliyim?\", \"Bu karma\u015f\u0131k d\u00fcnyaya nas\u0131l adapte olabilirim?\". \u0130\u015fte tam da bu noktada, HNG13 gibi deneyimler devreye girer. HNG13, kodlama ser\u00fcveninize ba\u015flamak veya mevcut becerilerinizi peki\u015ftirmek i\u00e7in e\u015fsiz bir f\u0131rsat sunar. Bu makale, HNG13'\u00fcn derinliklerine inerek, yaz\u0131l\u0131ma ilk ad\u0131mlar\u0131n\u0131z\u0131 sa\u011flam bir \u015fekilde atman\u0131z i\u00e7in size rehberlik edecek.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber","og_description":"Yaz\u0131l\u0131m d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkesin akl\u0131nda benzer sorular yank\u0131lan\u0131r: \"Nereden ba\u015flamal\u0131y\u0131m?\", \"Hangi teknolojileri \u00f6\u011frenmeliyim?\", \"Bu karma\u015f\u0131k d\u00fcnyaya nas\u0131l adapte olabilirim?\". \u0130\u015fte tam da bu noktada, HNG13 gibi deneyimler devreye girer. HNG13, kodlama ser\u00fcveninize ba\u015flamak veya mevcut becerilerinizi peki\u015ftirmek i\u00e7in e\u015fsiz bir f\u0131rsat sunar. Bu makale, HNG13'\u00fcn derinliklerine inerek, yaz\u0131l\u0131ma ilk ad\u0131mlar\u0131n\u0131z\u0131 sa\u011flam bir \u015fekilde atman\u0131z i\u00e7in size rehberlik edecek.","og_url":"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-16T13:31:45+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"29 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber","datePublished":"2025-10-16T13:31:45+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/"},"wordCount":5281,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/","name":"HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-16T13:31:45+00:00","description":"Yaz\u0131l\u0131m d\u00fcnyas\u0131na ad\u0131m atmak isteyen herkesin akl\u0131nda benzer sorular yank\u0131lan\u0131r: \"Nereden ba\u015flamal\u0131y\u0131m?\", \"Hangi teknolojileri \u00f6\u011frenmeliyim?\", \"Bu karma\u015f\u0131k d\u00fcnyaya nas\u0131l adapte olabilirim?\". \u0130\u015fte tam da bu noktada, HNG13 gibi deneyimler devreye girer. HNG13, kodlama ser\u00fcveninize ba\u015flamak veya mevcut becerilerinizi peki\u015ftirmek i\u00e7in e\u015fsiz bir f\u0131rsat sunar. Bu makale, HNG13'\u00fcn derinliklerine inerek, yaz\u0131l\u0131ma ilk ad\u0131mlar\u0131n\u0131z\u0131 sa\u011flam bir \u015fekilde atman\u0131z i\u00e7in size rehberlik edecek.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/hng13-yazilima-ilk-adimlariniz-icin-kapsamli-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HNG13: Yaz\u0131l\u0131ma \u0130lk Ad\u0131mlar\u0131n\u0131z \u0130\u00e7in Kapsaml\u0131 Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32006"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32006\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}