S\u0131k\u0131lm\u0131\u015f hissetti\u011finiz anlar oldu mu? Belki de yeni bir \u015feyler \u00f6\u011frenme hevesiyle yan\u0131p tutu\u015fuyor, ancak nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilemiyordunuz. \u0130\u015fte bu makale, HNG13 program\u0131nda ilk g\u00f6reviyle s\u0131k\u0131nt\u0131dan nas\u0131l \u00fcretime ge\u00e7ti\u011fini ve web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m att\u0131\u011f\u0131n\u0131 merak edenler i\u00e7in bir yol haritas\u0131 sunuyor.<\/p>\n
HNG13, (Hotels.ng Internship) Nijerya merkezli, ancak k\u00fcresel \u00e7apta etki yaratan bir \u00e7evrimi\u00e7i staj program\u0131d\u0131r. Gen\u00e7 ve yetenekli geli\u015ftiricilere ger\u00e7ek d\u00fcnya projelerinde \u00e7al\u0131\u015fma f\u0131rsat\u0131 sunarak onlar\u0131 sekt\u00f6r\u00fcn ihtiya\u00e7 duydu\u011fu becerilerle donatmay\u0131 hedefler. Bu program, kat\u0131l\u0131mc\u0131lar\u0131na sadece kod yazmay\u0131 de\u011fil, ayn\u0131 zamanda problem \u00e7\u00f6zme, tak\u0131m \u00e7al\u0131\u015fmas\u0131 ve zaman y\u00f6netimi gibi kritik yetkinlikleri de kazand\u0131r\u0131r. Pek \u00e7ok gen\u00e7 geli\u015ftiricinin hayalini s\u00fcsleyen HNG13, sizi konfor alan\u0131n\u0131zdan \u00e7\u0131kararak s\u0131n\u0131rlar\u0131n\u0131z\u0131 zorlaman\u0131z\u0131 sa\u011flar ve bu da kariyer yolculu\u011funuz i\u00e7in paha bi\u00e7ilmez bir deneyim sunar.<\/p>\n
Peki, web geli\u015ftirme yolculu\u011funa \u00e7\u0131kmak neden bu kadar \u00f6nemli? G\u00fcn\u00fcm\u00fcz dijital \u00e7a\u011f\u0131nda, internet hayat\u0131m\u0131z\u0131n ayr\u0131lmaz bir par\u00e7as\u0131 haline geldi. Al\u0131\u015fveri\u015ften e\u011flenceye, e\u011fitimden ileti\u015fime kadar her alanda web uygulamalar\u0131 ve siteleri kullan\u0131yoruz. Bu durum, web geli\u015ftiricilerine olan talebi her ge\u00e7en g\u00fcn art\u0131r\u0131yor. Bir web geli\u015ftiricisi olarak, fikirlerinizi somut \u00fcr\u00fcnlere d\u00f6n\u00fc\u015ft\u00fcrme, milyonlarca insana ula\u015fan platformlar in\u015fa etme ve dijital d\u00fcnyay\u0131 \u015fekillendirme g\u00fcc\u00fcne sahip olursunuz. Ayr\u0131ca, web geli\u015ftirme s\u00fcrekli geli\u015fen bir alan oldu\u011fu i\u00e7in, bu yolda her zaman yeni \u015feyler \u00f6\u011frenme ve kendinizi geli\u015ftirme f\u0131rsat\u0131 bulursunuz. HTML, CSS ve JavaScript gibi temel dilleri \u00f6\u011frenmek, bu geni\u015f ve heyecan verici d\u00fcnyan\u0131n kap\u0131lar\u0131n\u0131 aralaman\u0131z\u0131 sa\u011flar.<\/p>\n
HNG13 gibi programlar, bu temel bilgilere sahip olsan\u0131z bile, teorik bilginizi pratikle birle\u015ftirerek ger\u00e7ek projeler \u00fczerinde \u00e7al\u0131\u015fman\u0131za olanak tan\u0131r. Genellikle kat\u0131l\u0131mc\u0131lardan bir web sitesinin temel yap\u0131s\u0131n\u0131 olu\u015fturmalar\u0131, stilini belirlemeleri veya interaktif \u00f6zellikler eklemeleri istenir. Bu g\u00f6revler, size sadece kodlama becerisi kazand\u0131rmakla kalmaz, ayn\u0131 zamanda bir projenin ba\u015flang\u0131\u00e7tan sona kadar nas\u0131l y\u00f6netilece\u011fi konusunda da bir fikir verir. \u00d6rne\u011fin, ilk g\u00f6rev genellikle basit bir profil sayfas\u0131 olu\u015fturmak, bir hesap makinesi yapmak veya belirli bir tasar\u0131ma sahip bir UI bile\u015feni geli\u015ftirmek olabilir. Bu ilk ad\u0131mlar, genellikle bir geli\u015ftiricinin kar\u015f\u0131la\u015faca\u011f\u0131 en temel zorluklar\u0131 i\u00e7erir ve bunlar\u0131 a\u015fmak, ilerleyen a\u015famalarda daha karma\u015f\u0131k sorunlarla ba\u015fa \u00e7\u0131kma konusunda size \u00f6zg\u00fcven verir. Dolay\u0131s\u0131yla, HNG13’e kat\u0131lmak, sadece kod \u00f6\u011frenmekten \u00e7ok daha fazlas\u0131n\u0131 ifade eder; bir geli\u015ftirici olarak b\u00fcy\u00fcmenizi ve potansiyelinizi ke\u015ffetmenizi sa\u011flayan b\u00fct\u00fcnc\u00fcl bir deneyim sunar.<\/p>\n
Her b\u00fcy\u00fck yolculuk gibi, web geli\u015ftirme ser\u00fcveni de sa\u011flam temellerle ba\u015flar. HNG13’teki ilk g\u00f6revim, genellikle yeni ba\u015flayanlar\u0131n kar\u015f\u0131s\u0131na \u00e7\u0131kan tipik bir senaryoydu: basit bir web sayfas\u0131n\u0131n iskeletini kurmak, onu g\u00f6rsel olarak cazip hale getirmek ve belki de k\u00fc\u00e7\u00fck bir etkile\u015fim eklemek. Bu s\u00fcre\u00e7, sadece kod yazmaktan ibaret de\u011fil; ayn\u0131 zamanda problem analizi, tasar\u0131m d\u00fc\u015f\u00fcncesi ve en \u00f6nemlisi, \u00f6\u011frenmeye a\u00e7\u0131k bir zihniyet geli\u015ftirmeyi de i\u00e7erir. Ba\u015flang\u0131\u00e7ta bu g\u00f6revler g\u00f6z\u00fcn\u00fczde b\u00fcy\u00fcyebilir, ancak ad\u0131m ad\u0131m ilerleyerek her bir par\u00e7an\u0131n nas\u0131l bir araya geldi\u011fini g\u00f6rmek, motivasyonunuzu art\u0131racakt\u0131r. Bu b\u00f6l\u00fcmde, HNG13’teki ilk g\u00f6revimde izledi\u011fim ad\u0131mlar\u0131 ve web geli\u015ftirme s\u00fcrecine ba\u015flarken neleri g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z gerekti\u011fini detayl\u0131ca inceleyece\u011fiz. Bu ad\u0131mlar, asl\u0131nda herhangi bir front-end geli\u015ftirme projesinin temelini olu\u015fturur ve bu temelleri sa\u011flam bir \u015fekilde atmak, gelecekteki daha karma\u015f\u0131k projelerde size b\u00fcy\u00fck avantaj sa\u011flayacakt\u0131r.<\/p>\n
Bu a\u015famada kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z en b\u00fcy\u00fck zorluklardan biri, bilgilerin bollu\u011fu aras\u0131nda kaybolmak olabilir. Ancak unutmay\u0131n, her profesyonel geli\u015ftirici de bir zamanlar bu yollardan ge\u00e7ti. \u00d6nemli olan, temel prensipleri kavramak ve pratik yaparak bu bilgileri peki\u015ftirmektir. \u0130lk g\u00f6revler, genellikle sizden yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 kullanman\u0131z\u0131 ve ayn\u0131 zamanda belirli teknik gereksinimleri kar\u015f\u0131laman\u0131z\u0131 bekler. Bu dengeyi kurabilmek, zamanla geli\u015fecek bir beceridir. \u00d6rne\u011fin, basit bir profil kart\u0131 tasarlarken bile, renk se\u00e7imi, yaz\u0131 tipi boyutu, elemanlar\u0131n yerle\u015fimi gibi pek \u00e7ok detay\u0131 d\u00fc\u015f\u00fcnmeniz gerekir. T\u00fcm bu detaylar bir araya geldi\u011finde, sadece \u00e7al\u0131\u015fan de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 dostu ve estetik a\u00e7\u0131dan da ho\u015f bir \u00fcr\u00fcn ortaya \u00e7\u0131kar. \u015eimdi, bu yolculu\u011fa nas\u0131l ba\u015flayaca\u011f\u0131m\u0131za ve ilk g\u00f6revinizi nas\u0131l ba\u015far\u0131yla tamamlayaca\u011f\u0131n\u0131za dair ad\u0131mlar\u0131 ke\u015ffedelim.<\/p>\n
Bir web projesine ba\u015flamadan \u00f6nce, do\u011fru geli\u015ftirme ortam\u0131n\u0131 kurmak hayati \u00f6nem ta\u015f\u0131r. Bu, t\u0131pk\u0131 bir in\u015faat ustas\u0131n\u0131n do\u011fru aletlere sahip olmas\u0131 gibidir. Benim i\u00e7in bu s\u00fcre\u00e7, birka\u00e7 temel arac\u0131 edinmekle ba\u015flad\u0131. \u0130\u015fte ihtiyac\u0131n\u0131z olacak ba\u015fl\u0131ca ara\u00e7lar:<\/p>\n
Bu ara\u00e7lar\u0131 kurduktan sonra, ilk projeniz i\u00e7in yerel bir klas\u00f6r olu\u015fturun. VS Code’u bu klas\u00f6rde a\u00e7arak geli\u015ftirme ortam\u0131n\u0131z\u0131 haz\u0131rlam\u0131\u015f olursunuz. \u00d6rne\u011fin, basit bir HTML dosyas\u0131 olu\u015fturarak her \u015feyin d\u00fczg\u00fcn \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz. Bu ilk haz\u0131rl\u0131k a\u015famas\u0131, projenizin geri kalan\u0131 i\u00e7in sa\u011flam bir zemin haz\u0131rlar ve daha sonra ya\u015fayabilece\u011finiz potansiyel sorunlar\u0131n \u00f6n\u00fcne ge\u00e7er. Ayr\u0131ca, bu ara\u00e7lar\u0131 etkin bir \u015fekilde kullanmay\u0131 \u00f6\u011frenmek, bir geli\u015ftirici olarak yetkinli\u011finizi art\u0131racak ve gelecekteki projelerde size zaman kazand\u0131racakt\u0131r. Unutmay\u0131n, iyi bir ba\u015flang\u0131\u00e7, projenizin yar\u0131s\u0131 demektir.<\/p>\n
Herhangi bir web sayfas\u0131n\u0131n temelini HTML (HyperText Markup Language) olu\u015fturur. HTML, i\u00e7eri\u011fin yap\u0131s\u0131n\u0131 tan\u0131mlamam\u0131z\u0131 sa\u011flar. Yani, sayfam\u0131zda ba\u015fl\u0131klar\u0131n, paragraflar\u0131n, listelerin, g\u00f6rsellerin ve ba\u011flant\u0131lar\u0131n nas\u0131l yerle\u015fece\u011fini belirleriz. HNG13’teki ilk g\u00f6revimde, genellikle basit bir profil sayfas\u0131 veya bir \u00fcr\u00fcn kart\u0131 olu\u015fturmam\u0131z istenirdi. \u0130\u015fte bu t\u00fcr bir sayfa i\u00e7in temel HTML iskeleti ve \u00f6nemli yap\u0131 ta\u015flar\u0131:<\/p>\n
\n\n\n\n \n \n HNG13 \u0130lk G\u00f6rev: Profil Sayfas\u0131<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <header>\n <h1>Merhaba, Ben [Ad\u0131n\u0131z Soyad\u0131n\u0131z] \ud83d\udc4b<\/h1>\n <nav>\n <ul>\n <li><a href=\"#hakkimda\">Hakk\u0131mda<\/a><\/li>\n <li><a href=\"#projeler\">Projelerim<\/a><\/li>\n <li><a href=\"#iletisim\">\u0130leti\u015fim<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/header>\n\n <main>\n <section id=\"hakkimda\">\n <h2>Hakk\u0131mda<\/h2>\n <img decoding=\"async\" src=\"profil.jpg\" alt=\"Profil Foto\u011fraf\u0131m\" style=\"width:150px; border-radius:50%;\">\n <p>HNG13 kat\u0131l\u0131mc\u0131s\u0131 olarak web geli\u015ftirme yolculu\u011fuma devam ediyorum. \u00d6zellikle front-end teknolojileri ve kullan\u0131c\u0131 deneyimi tasar\u0131m\u0131yla ilgileniyorum. Bu staj, benim i\u00e7in b\u00fcy\u00fck bir \u00f6\u011frenme ve geli\u015fim f\u0131rsat\u0131.<\/p>\n <p>Bo\u015f zamanlar\u0131mda kitap okumay\u0131, yeni teknolojileri ara\u015ft\u0131rmay\u0131 ve do\u011fa y\u00fcr\u00fcy\u00fc\u015fleri yapmay\u0131 seviyorum.<\/p>\n <\/section>\n\n <section id=\"projeler\">\n <h2>Projelerim<\/h2>\n <ul>\n <li><a href=\"#\">E-ticaret Sitesi Projesi (HTML\/CSS)<\/a><\/li>\n <li><a href=\"#\">Hava Durumu Uygulamas\u0131 (JavaScript)<\/a><\/li>\n <\/ul>\n <\/section>\n <\/main>\n\n <footer>\n <p>© 2023 [Ad\u0131n\u0131z Soyad\u0131n\u0131z]. T\u00fcm haklar\u0131 sakl\u0131d\u0131r.<\/p>\n <\/footer>\n<\/body>\n<\/html>\n <\/pre>\n<p><\/code><\/p>\n<p>Bu kod blo\u011funda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, <code><\/p>\n<header><\/code>, <code><main><\/code>, <code><\/p>\n<section><\/code> ve <code><\/p>\n<footer><\/code> gibi semantik etiketler kullanarak sayfan\u0131n farkl\u0131 b\u00f6l\u00fcmlerini tan\u0131ml\u0131yoruz. Bu etiketler, arama motorlar\u0131 i\u00e7in sayfan\u0131n i\u00e7eri\u011fini anlamalar\u0131na yard\u0131mc\u0131 oldu\u011fu gibi, geli\u015ftiriciler i\u00e7in de kodun okunabilirli\u011fini art\u0131r\u0131r. Ayr\u0131ca, <code><meta name=\"viewport\" ...><\/code> etiketi mobil cihazlarda sayfan\u0131n do\u011fru g\u00f6r\u00fcnt\u00fclenmesi i\u00e7in kritik \u00f6neme sahiptir. <code>link rel=\"stylesheet\"<\/code> etiketi ile harici bir CSS dosyas\u0131n\u0131 (<code>style.css<\/code>) projemize dahil ediyoruz ki bu da sayfam\u0131z\u0131n g\u00f6rsel stilini kontrol etmemizi sa\u011flar. \u0130\u00e7eriklerimizi paragraflar (<code><\/p>\n<p><\/code>), ba\u015fl\u0131klar (<code><\/p>\n<h1><\/code>, <code><\/p>\n<h2><\/code>) ve listeler (<code><\/p>\n<ul><\/code>, <code><\/p>\n<li><\/code>) ile d\u00fczenleyerek, bilgilere kolayca eri\u015filebilir bir yap\u0131 kazand\u0131r\u0131r\u0131z. HTML'in temel amac\u0131, web i\u00e7eri\u011fini anlaml\u0131 ve d\u00fczenli bir \u015fekilde sunmakt\u0131r; bu sayede ziyaret\u00e7ileriniz arad\u0131klar\u0131 bilgiye kolayca ula\u015fabilirler.<\/p>\n<h3>CSS ile G\u00fczelle\u015ftirmek: Tasar\u0131m\u0131 Nas\u0131l Canland\u0131r\u0131r\u0131z?<\/h3>\n<p>HTML iskeleti olu\u015ftuktan sonra, s\u0131ra bu iskelete \"deri giydirmeye\" gelir, yani CSS (Cascading Style Sheets) ile g\u00f6rsel bir kimlik kazand\u0131rmaya. CSS, web sayfalar\u0131n\u0131z\u0131n renklerini, yaz\u0131 tiplerini, d\u00fczenini ve genel esteti\u011fini tan\u0131mlayan bir stil dilidir. HNG13'teki ilk g\u00f6revimde, profil sayfam\u0131 daha \u00e7ekici hale getirmek i\u00e7in CSS'i yo\u011fun bir \u015fekilde kulland\u0131m. \u0130\u015fte <code>style.css<\/code> dosyan\u0131za ekleyebilece\u011finiz baz\u0131 temel stil kurallar\u0131 ve \u00f6nemli kavramlar:<\/p>\n<pre><code>\nbody {\n font-family: 'Arial', sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n color: #333;\n}\n\nheader {\n background-color: #333;\n color: #fff;\n padding: 1rem 0;\n text-align: center;\n}\n\nnav ul {\n padding: 0;\n list-style: none;\n}\n\nnav ul li {\n display: inline;\n margin-right: 20px;\n}\n\nnav a {\n color: #fff;\n text-decoration: none;\n}\n\nmain {\n padding: 20px;\n max-width: 960px;\n margin: auto;\n}\n\nsection {\n background-color: #fff;\n margin-bottom: 20px;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\nimg {\n max-width: 100%; \/* Mobil uyumluluk i\u00e7in \u00f6nemli *\/\n height: auto;\n display: block; \/* Gereksiz bo\u015fluklar\u0131 \u00f6nler *\/\n margin: 0 auto 15px auto; \/* Resmi ortalar ve alt\u0131na bo\u015fluk verir *\/\n}\n\nfooter {\n text-align: center;\n padding: 20px;\n background-color: #333;\n color: #fff;\n position: relative;\n bottom: 0;\n width: 100%;\n}\n\n\/* Mobil uyumluluk i\u00e7in medya sorgusu \u00f6rne\u011fi *\/\n@media (max-width: 768px) {\n nav ul li {\n display: block; \/* Mobil cihazlarda men\u00fc \u00f6\u011felerini alt alta s\u0131rala *\/\n margin-bottom: 10px;\n }\n\n header h1 {\n font-size: 1.5rem;\n }\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki CSS kodunda, <code>body<\/code> etiketi i\u00e7in genel yaz\u0131 tipi, sat\u0131r y\u00fcksekli\u011fi, arka plan rengi ve metin rengi gibi temel stilleri tan\u0131mlad\u0131m. <code>header<\/code> ve <code>footer<\/code> gibi b\u00f6l\u00fcmlere arka plan renkleri ve metin renkleri vererek sayfaya g\u00f6rsel bir hiyerar\u015fi kazand\u0131rd\u0131m. \u00d6zellikle <code>max-width: 100%;<\/code> ve <code>height: auto;<\/code> \u00f6zelliklerini <code>img<\/code> etiketine uygulamak, g\u00f6rsellerin farkl\u0131 ekran boyutlar\u0131nda bozulmadan g\u00f6r\u00fcnt\u00fclenmesini sa\u011flar ki bu, duyarl\u0131 tasar\u0131m\u0131n olmazsa olmaz\u0131d\u0131r. Medya sorgular\u0131 (<code>@media<\/code>) ise belirli ekran boyutlar\u0131na g\u00f6re farkl\u0131 stiller uygulaman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, 768 pikselden daha k\u00fc\u00e7\u00fck ekranlarda navigasyon men\u00fcs\u00fc \u00f6\u011felerinin alt alta s\u0131ralanmas\u0131n\u0131 sa\u011flayarak mobil kullan\u0131c\u0131lar i\u00e7in daha iyi bir deneyim sunar\u0131z. Bu, CSS'in ne kadar g\u00fc\u00e7l\u00fc bir ara\u00e7 oldu\u011funu g\u00f6steren harika bir \u00f6rnektir ve tasar\u0131m\u0131n\u0131z\u0131 her cihazda kusursuz g\u00f6stermenizi sa\u011flar. Box Model (kutu modeli) kavram\u0131n\u0131 anlamak (margin, border, padding, content) ise elemanlar\u0131n sayfadaki yerle\u015fimini ve birbirleriyle olan ili\u015fkilerini kontrol etmenizi sa\u011flar, bu da daha hassas tasar\u0131mlar yapman\u0131za yard\u0131mc\u0131 olur. CSS, ger\u00e7ekten de bir web sayfas\u0131n\u0131 s\u0131radan bir metin y\u0131\u011f\u0131n\u0131ndan, etkileyici bir g\u00f6rsel deneyime d\u00f6n\u00fc\u015ft\u00fcrebilir.<\/p>\n<h3>JavaScript ile Etkile\u015fim Katmak: Dinamik Davran\u0131\u015flar Nas\u0131l Eklenir?<\/h3>\n<p>Web sayfalar\u0131m\u0131za hayat veren ve onlar\u0131 sadece statik bilgiler sunmaktan \u00f6teye ta\u015f\u0131yan dil JavaScript'tir (JS). HNG13'teki ilk g\u00f6revlerde, genellikle basit bir buton t\u0131klamas\u0131yla bir metni de\u011fi\u015ftirmek veya bir g\u00f6rseli gizleyip g\u00f6stermek gibi interaktif \u00f6\u011feler eklememiz istenirdi. Bu t\u00fcr g\u00f6revler, JavaScript'in DOM (Document Object Model) manip\u00fclasyonu ve olay dinleyicileri (event listeners) gibi temel kavramlar\u0131n\u0131 \u00f6\u011frenmek i\u00e7in harika bir f\u0131rsatt\u0131r. \u0130\u015fte basit bir \"Daha Fazla Oku\" butonu ile bir paragraf\u0131 g\u00f6sterip gizleyen JavaScript kodu \u00f6rne\u011fi:<\/p>\n<pre><code>\n<!-- HTML dosyan\u0131z\u0131n sonunda, <\/body> etiketinden hemen \u00f6nce -->\n<script>\n \/\/ DOMContentLoaded, HTML tamamen y\u00fcklendi\u011finde kodun \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar\n document.addEventListener('DOMContentLoaded', function() {\n const moreInfoButton = document.getElementById('moreInfoBtn');\n const extraParagraph = document.getElementById('extraParagraph');\n\n if (moreInfoButton && extraParagraph) { \/\/ Elemanlar\u0131n varl\u0131\u011f\u0131n\u0131 kontrol et\n extraParagraph.style.display = 'none'; \/\/ Ba\u015flang\u0131\u00e7ta gizli\n\n moreInfoButton.addEventListener('click', function() {\n if (extraParagraph.style.display === 'none') {\n extraParagraph.style.display = 'block'; \/\/ G\u00f6ster\n moreInfoButton.textContent = 'Daha Az Oku';\n } else {\n extraParagraph.style.display = 'none'; \/\/ Gizle\n moreInfoButton.textContent = 'Daha Fazla Oku';\n }\n });\n }\n });\n\n \/\/ \u00d6rnek: Konsola mesaj yazd\u0131rma\n console.log(\"JavaScript ba\u015far\u0131yla y\u00fcklendi!\");\n<\/script>\n <\/pre>\n<p><\/code><\/p>\n<p>Bu JavaScript kodu blo\u011funda, ilk olarak <code>DOMContentLoaded<\/code> olay\u0131n\u0131 dinliyoruz. Bu, HTML belgesinin tamamen y\u00fcklendi\u011finden ve JavaScript'in DOM'a g\u00fcvenle eri\u015febilece\u011finden emin olmak i\u00e7in kritik bir ad\u0131md\u0131r. Daha sonra <code>getElementById<\/code> metodu ile HTML sayfam\u0131zdaki belirli elemanlara (bir buton ve bir paragraf) referans al\u0131yoruz. Bu elemanlar\u0131n varl\u0131\u011f\u0131n\u0131 <code>if (moreInfoButton && extraParagraph)<\/code> ko\u015fuluyla kontrol etmek, olas\u0131 hatalar\u0131n \u00f6n\u00fcne ge\u00e7er ve kodunuzu daha sa\u011flam hale getirir. <code>extraParagraph.style.display = 'none';<\/code> ile ba\u015flang\u0131\u00e7ta ekstra paragraf\u0131 gizliyoruz. Ard\u0131ndan, <code>moreInfoButton<\/code>'a bir 'click' olay dinleyicisi ekleyerek, butona her t\u0131kland\u0131\u011f\u0131nda belirli bir fonksiyonun \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011fl\u0131yoruz. Bu fonksiyon, paragraf\u0131n mevcut <code>display<\/code> \u00f6zelli\u011fini kontrol ederek onu g\u00f6sterir veya gizler ve butonun metnini buna g\u00f6re g\u00fcnceller. JavaScript, bu t\u00fcr basit etkile\u015fimlerden, karma\u015f\u0131k tek sayfa uygulamalar\u0131na kadar her t\u00fcrl\u00fc dinami\u011fi web sayfalar\u0131n\u0131za eklemenizi sa\u011flar. Bu temel DOM manip\u00fclasyonu ve olay dinleyicileri bilgisi, web geli\u015ftirme ser\u00fcveninizde ataca\u011f\u0131n\u0131z ilk ve en \u00f6nemli ad\u0131mlardan biridir. Bu sayede kullan\u0131c\u0131lar\u0131n\u0131zla daha etkile\u015fimli ve dinamik deneyimler sunabilirsiniz.<\/p>\n<h2>Vaka Analizi: HNG13 G\u00f6revlerinde Kar\u015f\u0131la\u015f\u0131lan Zorluklar ve \u00c7\u00f6z\u00fcmler \u2014 Ger\u00e7ek D\u00fcnya Senaryolar\u0131 Neler \u00d6\u011fretir?<\/h2>\n<p>HNG13 gibi yo\u011fun bir programda, \u00f6\u011frenmenin en etkili yollar\u0131ndan biri ger\u00e7ek d\u00fcnya problemlerle y\u00fczle\u015fmek ve onlara \u00e7\u00f6z\u00fcm bulmaya \u00e7al\u0131\u015fmakt\u0131r. \u0130lk g\u00f6revlerde kar\u015f\u0131la\u015ft\u0131\u011f\u0131m zorluklar, benim i\u00e7in sadece teknik engeller olman\u0131n \u00f6tesinde, ayn\u0131 zamanda problem \u00e7\u00f6zme becerilerimi ve dayan\u0131kl\u0131l\u0131\u011f\u0131m\u0131 geli\u015ftiren de\u011ferli dersler oldu. Her geli\u015ftiricinin kariyerinin bir noktas\u0131nda kar\u015f\u0131la\u015faca\u011f\u0131 bu zorluklar, teorik bilgileri prati\u011fe d\u00f6kmenin ve hata ay\u0131klaman\u0131n ne kadar \u00f6nemli oldu\u011funu g\u00f6sterir. \u00d6rne\u011fin, bir web sayfas\u0131n\u0131 farkl\u0131 cihazlarda d\u00fczg\u00fcn g\u00f6stermek veya kodunuzdaki bir hatay\u0131 bulmak, ba\u015flang\u0131\u00e7ta olduk\u00e7a sinir bozucu olabilir. Ancak bu s\u00fcre\u00e7ler, sizi daha iyi bir geli\u015ftirici olmaya iter ve her \u00e7\u00f6z\u00fclen problemle birlikte \u00f6zg\u00fcveniniz artar. Bu b\u00f6l\u00fcmde, HNG13 g\u00f6revleri s\u0131ras\u0131nda kar\u015f\u0131la\u015ft\u0131\u011f\u0131m en yayg\u0131n zorluklardan ikisini \u2013 duyarl\u0131 tasar\u0131mda ya\u015fanan g\u00fc\u00e7l\u00fckler ve hata ay\u0131klama s\u00fcre\u00e7leri \u2013 ve bu sorunlar\u0131 nas\u0131l a\u015ft\u0131\u011f\u0131m\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Bu vaka analizleri, sadece teknik \u00e7\u00f6z\u00fcmler sunmakla kalmayacak, ayn\u0131 zamanda bir geli\u015ftiricinin kar\u015f\u0131la\u015fabilece\u011fi genel zorluklara kar\u015f\u0131 nas\u0131l bir yakla\u015f\u0131m sergilemesi gerekti\u011fini de g\u00f6sterecektir.<\/p>\n<p>Bu t\u00fcr senaryolar, size sadece teknik beceriler kazand\u0131rmakla kalmaz, ayn\u0131 zamanda esneklik ve kritik d\u00fc\u015f\u00fcnme yeteneklerinizi de geli\u015ftirir. Bir projenin son teslim tarihine yeti\u015fmeye \u00e7al\u0131\u015f\u0131rken veya karma\u015f\u0131k bir hatay\u0131 \u00e7\u00f6zmeye \u00e7al\u0131\u015f\u0131rken, bask\u0131 alt\u0131nda nas\u0131l performans g\u00f6sterdi\u011finizi \u00f6\u011frenirsiniz. Bu deneyimler, gelecekteki kariyerinizde kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z daha b\u00fcy\u00fck projelere ve zorluklara haz\u0131rlanman\u0131z i\u00e7in paha bi\u00e7ilmezdir. Ger\u00e7ek d\u00fcnya senaryolar\u0131, genellikle tek bir do\u011fru cevab\u0131n olmad\u0131\u011f\u0131, birden fazla olas\u0131 \u00e7\u00f6z\u00fcm\u00fcn bulundu\u011fu durumlar\u0131 i\u00e7erir. Bu da sizi en iyi \u00e7\u00f6z\u00fcm\u00fc bulmak i\u00e7in farkl\u0131 yakla\u015f\u0131mlar\u0131 denemeye ve yarat\u0131c\u0131 d\u00fc\u015f\u00fcnmeye te\u015fvik eder. Sonu\u00e7 olarak, HNG13 gibi programlardaki g\u00f6revler, sadece birer kodlama prati\u011fi de\u011fil, ayn\u0131 zamanda bir geli\u015ftiricinin zihniyetini ve profesyonel becerilerini \u015fekillendiren kapsaml\u0131 birer e\u011fitimdir.<\/p>\n<h3>Problem: Duyarl\u0131 Tasar\u0131mda Zorluklar \u2014 Mobil Uyumluluk Nas\u0131l Sa\u011flan\u0131r?<\/h3>\n<p>\u0130lk g\u00f6revlerimde en \u00e7ok zorland\u0131\u011f\u0131m konulardan biri, web sayfalar\u0131n\u0131 farkl\u0131 ekran boyutlar\u0131na (mobil, tablet, masa\u00fcst\u00fc) uygun hale getirmekti. Masa\u00fcst\u00fcnde harika g\u00f6r\u00fcnen bir tasar\u0131m, mobilde tamamen da\u011f\u0131labilir veya kullan\u0131lamaz hale gelebilirdi. Bu durum, \u00f6zellikle kullan\u0131c\u0131 deneyimini do\u011frudan etkiledi\u011fi i\u00e7in \u00e7\u00f6z\u00fclmesi gereken kritik bir problemdi. Modern web kullan\u0131c\u0131lar\u0131n\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131 mobil cihazlardan internete eri\u015fti\u011fi i\u00e7in, duyarl\u0131 tasar\u0131m (responsive design) art\u0131k bir l\u00fcks de\u011fil, bir gereklilik haline geldi. Bu problemi a\u015fmak i\u00e7in, \u00e7e\u015fitli CSS tekniklerini ve prensiplerini derinlemesine incelemem gerekti.<\/p>\n<p>\u00c7\u00f6z\u00fcm olarak, \u00f6ncelikle <code><head><\/code> etiketinde <code>viewport<\/code> meta etiketini do\u011fru bir \u015fekilde kullanmay\u0131 \u00f6\u011frendim: <code><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code>. Bu etiket, taray\u0131c\u0131ya sayfan\u0131n geni\u015fli\u011fini cihaz\u0131n geni\u015fli\u011fi kadar ayarlamas\u0131n\u0131 ve ba\u015flang\u0131\u00e7 \u00f6l\u00e7e\u011fini 1.0 olarak belirlemesini s\u00f6yler. Bu, mobil cihazlarda sayfan\u0131n do\u011fru \u00f6l\u00e7eklenmesinin ilk ad\u0131m\u0131d\u0131r. Daha sonra, CSS'in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri olan medya sorgular\u0131n\u0131 (<code>@media queries<\/code>) aktif olarak kullanmaya ba\u015flad\u0131m. Medya sorgular\u0131, belirli ekran geni\u015fliklerine veya cihaz \u00f6zelliklerine g\u00f6re farkl\u0131 stil kurallar\u0131 tan\u0131mlamam\u0131z\u0131 sa\u011flar. B\u00f6ylece, k\u00fc\u00e7\u00fck ekranlar i\u00e7in farkl\u0131 d\u00fczenler, yaz\u0131 tipi boyutlar\u0131 veya eleman hizalamalar\u0131 uygulayabiliriz.<\/p>\n<pre><code>\n\/* Genel stiller (Mobil \u00f6ncelikli yakla\u015f\u0131m) *\/\nbody {\n font-size: 16px;\n padding: 10px;\n}\n\n.container {\n width: 100%;\n padding: 15px;\n box-sizing: border-box; \/* Padding'in geni\u015fli\u011fe dahil edilmesini sa\u011flar *\/\n}\n\n\/* Orta boyutlu ekranlar (Tabletler) *\/\n@media (min-width: 600px) {\n body {\n font-size: 18px;\n }\n .container {\n width: 80%;\n margin: auto;\n }\n nav ul li {\n display: inline-block;\n margin: 0 10px;\n }\n}\n\n\/* B\u00fcy\u00fck boyutlu ekranlar (Masa\u00fcst\u00fc) *\/\n@media (min-width: 1024px) {\n body {\n font-size: 20px;\n }\n .container {\n width: 70%;\n max-width: 1200px;\n }\n .grid-layout {\n display: grid;\n grid-template-columns: repeat(3, 1fr); \/* 3 e\u015fit s\u00fctun *\/\n gap: 20px;\n }\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, \"mobil \u00f6ncelikli\" bir yakla\u015f\u0131m sergileniyor. \u00d6nce mobil cihazlar i\u00e7in temel stiller tan\u0131mlan\u0131r, ard\u0131ndan <code>@media (min-width: ...)<\/code> ile daha b\u00fcy\u00fck ekranlar i\u00e7in stiller a\u015famal\u0131 olarak eklenir. <code>flexbox<\/code> ve <code>CSS Grid<\/code> gibi modern CSS d\u00fczenleme teknikleri de duyarl\u0131 tasar\u0131mda \u00e7ok yard\u0131mc\u0131 oldu. Bu teknikler, elemanlar\u0131 sayfada esnek bir \u015fekilde d\u00fczenlememi ve farkl\u0131 ekran boyutlar\u0131nda otomatik olarak uyum sa\u011flamalar\u0131n\u0131 m\u00fcmk\u00fcn k\u0131ld\u0131. Bu zorlu\u011fun \u00fcstesinden gelmek, sadece teknik becerilerimi art\u0131rmakla kalmad\u0131, ayn\u0131 zamanda kullan\u0131c\u0131 odakl\u0131 tasar\u0131m prensiplerini de daha iyi anlamam\u0131 sa\u011flad\u0131. Art\u0131k bir tasar\u0131m yaparken, her zaman farkl\u0131 cihazlardaki deneyimi g\u00f6z \u00f6n\u00fcnde bulunduruyorum.<\/p>\n<h3>\u00c7\u00f6z\u00fcm: Hata Ay\u0131klama S\u00fcre\u00e7leri \u2014 Kodunuzdaki Hatalar\u0131 Nas\u0131l Bulursunuz?<\/h3>\n<p>Kod yazarken hata yapmak ka\u00e7\u0131n\u0131lmazd\u0131r. \u00d6zellikle HNG13'teki ilk g\u00f6revlerde, kodumda beklenmedik davran\u0131\u015flar veya tamamen \u00e7al\u0131\u015fmayan b\u00f6l\u00fcmlerle s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131yordum. Bu hatalar\u0131 bulup d\u00fczeltmek, ilk ba\u015fta g\u00f6z korkutucu ve zaman al\u0131c\u0131 bir s\u00fcre\u00e7 gibi g\u00f6r\u00fcnse de, zamanla geli\u015ftiricili\u011fin en \u00f6nemli becerilerinden biri haline geldi. Hata ay\u0131klama (debugging), bir dedektif gibi kodunuzdaki ipu\u00e7lar\u0131n\u0131 takip ederek sorunun kayna\u011f\u0131n\u0131 bulma sanat\u0131d\u0131r. Bu s\u00fcre\u00e7, sadece hatay\u0131 d\u00fczeltmekle kalmaz, ayn\u0131 zamanda kodunuzu daha iyi anlaman\u0131za ve gelecekte benzer hatalar\u0131 yapmaktan ka\u00e7\u0131nman\u0131za da yard\u0131mc\u0131 olur.<\/p>\n<p>Benim i\u00e7in en etkili hata ay\u0131klama arac\u0131, taray\u0131c\u0131lar\u0131n sundu\u011fu Geli\u015ftirici Ara\u00e7lar\u0131 oldu. \u00d6zellikle Chrome'un Geli\u015ftirici Ara\u00e7lar\u0131, konsol (<code>Console<\/code>), \u00f6\u011feler (<code>Elements<\/code>), kaynaklar (<code>Sources<\/code>) ve a\u011f (<code>Network<\/code>) sekmeleriyle paha bi\u00e7ilmez bilgiler sunar. \u0130\u015fte bu ara\u00e7lar\u0131 kullanarak hata ay\u0131klama s\u00fcrecimi nas\u0131l y\u00f6netti\u011fim:<\/p>\n<ul>\n<li><strong>Konsol (Console) Sekmesi:<\/strong> JavaScript hatalar\u0131, uyar\u0131lar ve kendi yazd\u0131\u011f\u0131m <code>console.log()<\/code> mesajlar\u0131 burada g\u00f6r\u00fcnt\u00fclenir. Bir de\u011fi\u015fkenin de\u011ferini kontrol etmek veya kodun belirli bir noktas\u0131na ula\u015f\u0131p ula\u015fmad\u0131\u011f\u0131n\u0131 anlamak i\u00e7in s\u0131k\u00e7a <code>console.log()<\/code> kulland\u0131m. \u00d6rne\u011fin, bir fonksiyonun i\u00e7indeki bir de\u011feri kontrol etmek i\u00e7in:\n<pre><code>\nfunction calculateSum(a, b) {\n let sum = a + b;\n console.log(\"Hesaplanan toplam:\", sum); \/\/ Debug i\u00e7in\n return sum;\n}\n <\/pre>\n<p><\/code>\n <\/li>\n<li><strong>\u00d6\u011feler (Elements) Sekmesi:<\/strong> Bu sekme, sayfan\u0131n HTML yap\u0131s\u0131n\u0131 ve uygulanan CSS stillerini anl\u0131k olarak g\u00f6rmemi sa\u011flar. Bir eleman\u0131n neden belirli bir \u015fekilde g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc veya bir CSS kural\u0131n\u0131n neden uygulanmad\u0131\u011f\u0131n\u0131 anlamak i\u00e7in bu sekmeyi kulland\u0131m. Buradan do\u011frudan DOM \u00fczerinde de\u011fi\u015fiklikler yapabilir ve etkilerini an\u0131nda g\u00f6zlemleyebilirsiniz.<\/li>\n<li><strong>Kaynaklar (Sources) Sekmesi:<\/strong> JavaScript kodumu ad\u0131m ad\u0131m \u00e7al\u0131\u015ft\u0131rmak (breakpoint koymak) ve de\u011fi\u015fkenlerin de\u011ferlerini her ad\u0131mda g\u00f6zlemlemek i\u00e7in bu sekmeyi kulland\u0131m. Bu, karma\u015f\u0131k hatalar\u0131n izini s\u00fcrmede \u00e7ok etkili bir y\u00f6ntemdir.<\/li>\n<li><strong>A\u011f (Network) Sekmesi:<\/strong> E\u011fer projemde harici API \u00e7a\u011fr\u0131lar\u0131 veya resim y\u00fcklemeleri gibi a\u011f istekleri olsayd\u0131, bu sekme isteklerin durumunu, boyutunu ve y\u00fcklenme s\u00fcrelerini izlememe yard\u0131mc\u0131 olurdu.<\/li>\n<\/ul>\n<p>Hata ay\u0131klama s\u00fcrecinde sab\u0131r ve metodik bir yakla\u015f\u0131m \u00e7ok \u00f6nemlidir. Paniklemek yerine, hatay\u0131 izole etmeye \u00e7al\u0131\u015fmak, k\u00fc\u00e7\u00fck par\u00e7alara ay\u0131rmak ve her bir par\u00e7ay\u0131 ayr\u0131 ayr\u0131 test etmek en iyi yoldur. Ayr\u0131ca, Google'da hata mesajlar\u0131n\u0131 aratmak veya Stack Overflow gibi platformlarda benzer sorunlar\u0131 ara\u015ft\u0131rmak, genellikle h\u0131zl\u0131 \u00e7\u00f6z\u00fcmlere ula\u015fmam\u0131 sa\u011flad\u0131. Bu s\u00fcre\u00e7ler, bana sadece hata d\u00fczeltmeyi de\u011fil, ayn\u0131 zamanda kodumu daha sa\u011flam ve hataya daha az e\u011filimli yazmay\u0131 da \u00f6\u011fretti. Her hata, yeni bir \u00f6\u011frenme f\u0131rsat\u0131d\u0131r ve hata ay\u0131klama, bir geli\u015ftiricinin beceri setinin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r.<\/p>\n<h2>\u0130leri D\u00fczey \u0130pu\u00e7lar\u0131: Performans\u0131 Art\u0131rmak ve Kodu Optimize Etmek \u2014 Daha Verimli Geli\u015ftirme \u0130\u00e7in Ne Yap\u0131labilir?<\/h2>\n<p>HNG13'teki ilk g\u00f6revlerimi tamamlay\u0131p temel kavramlar\u0131 peki\u015ftirdikten sonra, kodumu daha verimli, s\u00fcrd\u00fcr\u00fclebilir ve performansl\u0131 hale getirmek i\u00e7in ileri d\u00fczey teknikleri ara\u015ft\u0131rmaya ba\u015flad\u0131m. Bu, sadece \u00e7al\u0131\u015fan bir kod yazmaktan \u00f6teye ge\u00e7erek, en iyi uygulamalar\u0131 benimseme ve gelecekteki projelerde kendime avantaj sa\u011flama aray\u0131\u015f\u0131yd\u0131. Geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evrildi\u011fi i\u00e7in, bu t\u00fcr ipu\u00e7lar\u0131 ve p\u00fcf noktalar\u0131, bir geli\u015ftiricinin uzun vadeli ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Kod optimizasyonu ve performans art\u0131rma, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen fakt\u00f6rlerdir; daha h\u0131zl\u0131 y\u00fcklenen ve daha ak\u0131c\u0131 \u00e7al\u0131\u015fan bir web sitesi, kullan\u0131c\u0131lar\u0131 elde tutman\u0131n anahtar\u0131d\u0131r. Bu b\u00f6l\u00fcmde, HNG13 ser\u00fcvenimde \u00f6\u011frendi\u011fim ve uygulad\u0131\u011f\u0131m baz\u0131 ileri d\u00fczey ipu\u00e7lar\u0131n\u0131 ve daha verimli bir geli\u015ftirici olmak i\u00e7in neler yapabilece\u011finizi ke\u015ffedece\u011fiz. Bu stratejiler, sadece mevcut projenizin kalitesini art\u0131rmakla kalmayacak, ayn\u0131 zamanda gelecekteki projelerinizde de size yol g\u00f6sterecektir.<\/p>\n<p>Bu ileri d\u00fczey konulara dalmak, ba\u015flang\u0131\u00e7taki \"s\u0131k\u0131nt\u0131dan \u00fcretime\" mottosunu bir ad\u0131m \u00f6teye ta\u015f\u0131yarak, \"\u00fcretimden m\u00fckemmelli\u011fe\" ge\u00e7i\u015fi simgeler. Kodunuzu sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda zarif ve optimize edilmi\u015f hale getirmek, sizin bir geli\u015ftirici olarak profesyonelli\u011finizi g\u00f6sterir. \u0130yi organize edilmi\u015f bir kod taban\u0131, tak\u0131m \u00e7al\u0131\u015fmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r, hata ay\u0131klama s\u00fcrecini h\u0131zland\u0131r\u0131r ve gelecekteki g\u00fcncellemeleri veya \u00f6zellik eklemelerini daha sorunsuz hale getirir. Bu nedenle, bu ipu\u00e7lar\u0131n\u0131 \u00f6\u011frenmek ve uygulamak, teknik bilginizi geni\u015fletmenin yan\u0131 s\u0131ra, kariyerinizde size uzun vadeli faydalar sa\u011flayacak pratik beceriler de kazand\u0131racakt\u0131r. Unutmay\u0131n, en iyi geli\u015ftiriciler bile s\u00fcrekli \u00f6\u011frenmeye ve kendilerini geli\u015ftirmeye devam ederler. \u015eimdi, bu ileri d\u00fczey ipu\u00e7lar\u0131na birlikte g\u00f6z atal\u0131m.<\/p>\n<h3>Versiyon Kontrol Sistemi: Git ve GitHub Neden \u00d6nemlidir?<\/h3>\n<p>Web geli\u015ftirme projelerinde, \u00f6zellikle tak\u0131m \u00e7al\u0131\u015fmas\u0131nda veya projenizin karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, de\u011fi\u015fiklikleri takip etmek ve y\u00f6netmek zorla\u015fabilir. \u0130\u015fte burada Git devreye girer. Git, bir s\u00fcr\u00fcm kontrol sistemidir ve kodunuzdaki her de\u011fi\u015fikli\u011fi kaydetmenizi, farkl\u0131 s\u00fcr\u00fcmler aras\u0131nda ge\u00e7i\u015f yapman\u0131z\u0131 ve birden fazla geli\u015ftiricinin ayn\u0131 proje \u00fczerinde sorunsuz bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. HNG13'te tak\u0131m g\u00f6revlerinde, Git ve GitHub'\u0131 aktif olarak kullanarak kodumu di\u011fer tak\u0131m \u00fcyeleriyle senkronize etme ve de\u011fi\u015fiklikleri birle\u015ftirme deneyimi ya\u015fad\u0131m. GitHub ise, Git depolar\u0131n\u0131 bar\u0131nd\u0131ran ve sosyal kod payla\u015f\u0131m\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lan pop\u00fcler bir web tabanl\u0131 platformdur.<\/p>\n<p>Git'i kullanman\u0131n temel faydalar\u0131 \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>De\u011fi\u015fiklik Takibi:<\/strong> Kodunuzda yapt\u0131\u011f\u0131n\u0131z her de\u011fi\u015fikli\u011fin kayd\u0131n\u0131 tutar, b\u00f6ylece istedi\u011finiz zaman \u00f6nceki bir s\u00fcr\u00fcme geri d\u00f6nebilirsiniz.<\/li>\n<li><strong>Tak\u0131m \u00c7al\u0131\u015fmas\u0131:<\/strong> Birden fazla geli\u015ftiricinin ayn\u0131 dosya \u00fczerinde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar ve \u00e7ak\u0131\u015fmalar\u0131 (conflict) y\u00f6netmeye yard\u0131mc\u0131 olur.<\/li>\n<li><strong>Deneysellik:<\/strong> Yeni \u00f6zellikler \u00fczerinde \u00e7al\u0131\u015f\u0131rken ana kod taban\u0131n\u0131 etkilemeden \"dallar\" (branches) olu\u015fturabilirsiniz. Bu, g\u00fcvenli bir \u015fekilde deneme yapman\u0131z\u0131 sa\u011flar.<\/li>\n<li><strong>Yedekleme ve Payla\u015f\u0131m:<\/strong> GitHub gibi platformlar kodunuzu uzaktan g\u00fcvenli bir \u015fekilde yedekler ve di\u011fer geli\u015ftiricilerle kolayca payla\u015fman\u0131za olanak tan\u0131r.<\/li>\n<\/ul>\n<p>Temel Git komutlar\u0131 aras\u0131nda <code>git init<\/code> (depo olu\u015fturma), <code>git add<\/code> (de\u011fi\u015fiklikleri haz\u0131rlama), <code>git commit<\/code> (de\u011fi\u015fiklikleri kaydetme), <code>git push<\/code> (de\u011fi\u015fiklikleri uzak depoya g\u00f6nderme) ve <code>git pull<\/code> (uzak depodan de\u011fi\u015fiklikleri \u00e7ekme) bulunur. Bu komutlar\u0131 \u00f6\u011frenmek, herhangi bir modern geli\u015ftirici i\u00e7in temel bir beceridir ve HNG13 gibi bir ortamda bu becerileri peki\u015ftirmek paha bi\u00e7ilmezdir. Versiyon kontrol sistemleri, geli\u015ftirme s\u00fcrecinizi \u00e7ok daha d\u00fczenli, g\u00fcvenli ve verimli hale getirir.<\/p>\n<h3>Kod Temizli\u011fi ve Best Practices: S\u00fcrd\u00fcr\u00fclebilir Kod Yazman\u0131n Yollar\u0131 Nelerdir?<\/h3>\n<p>\u00c7al\u0131\u015fan bir kod yazmak \u00f6nemlidir, ancak anla\u015f\u0131labilir, bak\u0131m\u0131 kolay ve s\u00fcrd\u00fcr\u00fclebilir bir kod yazmak daha da \u00f6nemlidir. HNG13'teki ilerleyen g\u00f6revlerimde, sadece kodun i\u015flevselli\u011fine de\u011fil, ayn\u0131 zamanda kalitesine de odaklanmam gerekti\u011fini anlad\u0131m. Kod temizli\u011fi ve \"best practices\" (en iyi uygulamalar), bu hedefe ula\u015fman\u0131n anahtar\u0131d\u0131r. \u0130\u015fte s\u00fcrd\u00fcr\u00fclebilir kod yazmak i\u00e7in baz\u0131 ipu\u00e7lar\u0131:<\/p>\n<ul>\n<li><strong>Anlaml\u0131 Adland\u0131rma:<\/strong> De\u011fi\u015fken, fonksiyon ve s\u0131n\u0131f adlar\u0131, ne i\u015fe yarad\u0131klar\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtmelidir. \u00d6rne\u011fin, <code>x<\/code> yerine <code>userCount<\/code> veya <code>data<\/code> yerine <code>customerData<\/code> kullanmak kodun okunabilirli\u011fini art\u0131r\u0131r.<\/li>\n<li><strong>Yorumlar:<\/strong> Karma\u015f\u0131k mant\u0131klar\u0131 veya belirli bir tasar\u0131m karar\u0131n\u0131n nedenini a\u00e7\u0131klayan yorumlar eklemek, hem sizin hem de di\u011fer geli\u015ftiricilerin kodu daha sonra anlamas\u0131na yard\u0131mc\u0131 olur. Ancak, her sat\u0131r\u0131 yorumlamak yerine, kritik b\u00f6l\u00fcmlere odaklan\u0131n.<\/li>\n<li><strong>Mod\u00fclerlik:<\/strong> Kodu k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve tek bir sorumlulu\u011fu olan fonksiyonlara veya mod\u00fcllere ay\u0131rmak. Bu, kodun yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r ve hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n<li><strong>Bi\u00e7imlendirme ve Tutarl\u0131l\u0131k:<\/strong> Kodunuzu tutarl\u0131 bir \u015fekilde bi\u00e7imlendirin (girintiler, bo\u015fluklar, parantez yerle\u015fimi). Prettier gibi ara\u00e7lar, bu s\u00fcreci otomatikle\u015ftirebilir.<\/li>\n<li><strong>Kodu Tekrar Etmekten Ka\u00e7\u0131nma (DRY - Don't Repeat Yourself):<\/strong> Ayn\u0131 kod blo\u011funu birden fazla yerde kullanmak yerine, onu bir fonksiyona veya bile\u015fene d\u00f6n\u00fc\u015ft\u00fcrerek tekrardan ka\u00e7\u0131n\u0131n.<\/li>\n<\/ul>\n<p>Bu prensipleri uygulamak, ba\u015flang\u0131\u00e7ta ekstra \u00e7aba gerektirse de, uzun vadede zaman kazand\u0131r\u0131r ve projenizin kalitesini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. HNG13 gibi ortamlarda, ba\u015fkalar\u0131n\u0131n kodunu okuma ve kendi kodunuzu ba\u015fkalar\u0131na sunma pratikleri, bu prensipleri i\u00e7selle\u015ftirmenizi h\u0131zland\u0131r\u0131r. Temiz kod, sadece bir estetik meselesi de\u011fil, ayn\u0131 zamanda bir projenin ba\u015far\u0131s\u0131 i\u00e7in kritik bir fakt\u00f6rd\u00fcr.<\/p>\n<h3>Performans Optimizasyonu: Web Sayfalar\u0131 Nas\u0131l H\u0131zland\u0131r\u0131l\u0131r?<\/h3>\n<p>Kullan\u0131c\u0131lar\u0131n \u00e7o\u011fu, yava\u015f y\u00fcklenen bir web sitesini terk etme e\u011filimindedir. Bu nedenle, web sayfalar\u0131n\u0131n performans\u0131n\u0131 optimize etmek, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve SEO s\u0131ralamas\u0131n\u0131 y\u00fckseltmek i\u00e7in kritik bir ad\u0131md\u0131r. HNG13'teki g\u00f6revlerimde, sadece sayfalar\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamakla kalmay\u0131p, ayn\u0131 zamanda onlar\u0131n daha h\u0131zl\u0131 ve ak\u0131c\u0131 olmas\u0131n\u0131 sa\u011flaman\u0131n yollar\u0131n\u0131 da ara\u015ft\u0131rd\u0131m. \u0130\u015fte web performans\u0131 optimizasyonu i\u00e7in baz\u0131 temel teknikler:<\/p>\n<ul>\n<li><strong>G\u00f6rsel Optimizasyonu:<\/strong> Web sayfalar\u0131n\u0131n en b\u00fcy\u00fck y\u00fcklenme s\u00fcresi kaynaklar\u0131ndan biri g\u00f6rsellerdir. G\u00f6rselleri s\u0131k\u0131\u015ft\u0131rmak (JPEG, PNG optimize edici ara\u00e7lar), do\u011fru format\u0131 kullanmak (WebP gibi modern formatlar) ve boyutlar\u0131n\u0131 web i\u00e7in optimize etmek \u00f6nemlidir. Ayr\u0131ca, <code>srcset<\/code> ve <code>sizes<\/code> gibi HTML \u00f6zellikleri ile farkl\u0131 cihazlar i\u00e7in farkl\u0131 boyutlarda g\u00f6rseller sunmak da performans\u0131 art\u0131r\u0131r.<\/li>\n<li><strong>Lazy Loading (Tembel Y\u00fckleme):<\/strong> Sayfa kayd\u0131r\u0131lmad\u0131k\u00e7a g\u00f6r\u00fcnmeyen g\u00f6rsellerin veya di\u011fer medyan\u0131n y\u00fcklenmesini geciktirmek. Bu, sayfan\u0131n ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. \u00d6rne\u011fin, <code><img decoding=\"async\" src=\"image.jpg\" loading=\"lazy\" alt=\"...\"><\/code> kullanabilirsiniz.<\/li>\n<li><strong>CSS ve JavaScript Dosyalar\u0131n\u0131 S\u0131k\u0131\u015ft\u0131rma (Minification):<\/strong> CSS ve JavaScript dosyalar\u0131ndaki gereksiz bo\u015fluklar\u0131, yorumlar\u0131 ve sat\u0131r sonlar\u0131n\u0131 kald\u0131rarak dosya boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltmek. Bu i\u015flem, y\u00fckleme s\u00fcrelerini azalt\u0131r. Webpack gibi build ara\u00e7lar\u0131 bu i\u015flemi otomatikle\u015ftirebilir.<\/li>\n<li><strong>\u00d6nbellekleme (Caching):<\/strong> Taray\u0131c\u0131n\u0131n, s\u0131k kullan\u0131lan kaynaklar\u0131 (CSS, JS, resimler) yerel olarak saklamas\u0131n\u0131 sa\u011flamak. B\u00f6ylece, kullan\u0131c\u0131 ayn\u0131 sayfay\u0131 tekrar ziyaret etti\u011finde bu kaynaklar yeniden indirilmek zorunda kalmaz. HTTP ba\u015fl\u0131klar\u0131 veya Service Workers ile y\u00f6netilebilir.<\/li>\n<li><strong>Asenkron Y\u00fckleme:<\/strong> JavaScript dosyalar\u0131n\u0131 <code><script async><\/code> veya <code><script defer><\/code> \u00f6zellikleriyle y\u00fckleyerek, bu dosyalar\u0131n sayfa olu\u015fturmay\u0131 engellemesini \u00f6nlemek.<\/li>\n<\/ul>\n<div class=\"expert-tip\">Uzman \u0130pucu: Web sitenizin performans\u0131n\u0131 \u00f6l\u00e7mek i\u00e7in Google PageSpeed Insights veya Lighthouse gibi ara\u00e7lar\u0131 kullan\u0131n. Bu ara\u00e7lar, performans sorunlar\u0131n\u0131 tespit etmenize ve iyile\u015ftirme \u00f6nerileri sunman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Bu tekniklerle sayfa y\u00fckleme h\u0131z\u0131n\u0131z\u0131 %40'a kadar art\u0131rabilirsiniz.<\/div>\n<p>Bu optimizasyon tekniklerini uygulamak, kullan\u0131c\u0131lar\u0131n\u0131za daha h\u0131zl\u0131 ve ak\u0131c\u0131 bir deneyim sunar. HNG13 gibi rekabet\u00e7i bir ortamda, bu t\u00fcr detaylara dikkat etmek, projelerinizin \u00f6ne \u00e7\u0131kmas\u0131n\u0131 sa\u011flayabilir ve sizi daha yetkin bir geli\u015ftirici yapar.<\/p>\n<h2>Sonu\u00e7: \u0130lk G\u00f6revin Ard\u0131ndan \u2014 \u00d6\u011frenilenler ve Gelecek Ad\u0131mlar Nelerdir?<\/h2>\n<p>\"S\u0131k\u0131nt\u0131dan \u00dcretime\" ba\u015fl\u0131\u011f\u0131 alt\u0131nda \u00e7\u0131kt\u0131\u011f\u0131m HNG13 yolculu\u011fu, sadece ilk g\u00f6revimi tamamlamakla kalmad\u0131, ayn\u0131 zamanda web geli\u015ftirme d\u00fcnyas\u0131na olan bak\u0131\u015f a\u00e7\u0131m\u0131 da k\u00f6kten de\u011fi\u015ftirdi. Ba\u015flang\u0131\u00e7taki belirsizlik ve acemilik yerini, her ge\u00e7en g\u00fcn artan bir merak ve \u00f6\u011frenme iste\u011fine b\u0131rakt\u0131. HTML'in temel yap\u0131s\u0131ndan CSS'in g\u00f6rsel g\u00fcc\u00fcne, JavaScript'in dinamik etkile\u015fimlerine kadar her bir ad\u0131mda, bir fikri somut bir \u00fcr\u00fcne d\u00f6n\u00fc\u015ft\u00fcrmenin b\u00fcy\u00fcs\u00fcn\u00fc deneyimledim. Bu s\u00fcre\u00e7, bana sadece teknik beceriler kazand\u0131rmakla kalmad\u0131, ayn\u0131 zamanda problem \u00e7\u00f6zme, hata ay\u0131klama, duyarl\u0131 tasar\u0131m prensiplerini uygulama ve en \u00f6nemlisi, sab\u0131rl\u0131 olma yetene\u011fimi de geli\u015ftirdi. HNG13, kod yazman\u0131n \u00f6tesinde, bir geli\u015ftirici zihniyeti kazanman\u0131n, ekip i\u00e7inde \u00e7al\u0131\u015fman\u0131n ve s\u00fcrekli geli\u015fimin \u00f6nemini bana \u00f6\u011fretti.<\/p>\n<p>Bu makalede ele ald\u0131\u011f\u0131m\u0131z gibi, HNG13'teki ilk g\u00f6revler, genellikle web geli\u015ftirmenin temel ta\u015flar\u0131n\u0131 olu\u015fturur: bir proje ortam\u0131 kurmak, HTML ile yap\u0131 olu\u015fturmak, CSS ile stil vermek ve JavaScript ile etkile\u015fim eklemek. Her bir ad\u0131mda kar\u015f\u0131la\u015f\u0131lan zorluklar (\u00f6rne\u011fin duyarl\u0131 tasar\u0131m veya hata ay\u0131klama), asl\u0131nda birer \u00f6\u011frenme f\u0131rsat\u0131na d\u00f6n\u00fc\u015ft\u00fc. Medya sorgular\u0131, taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131 ve Git gibi ara\u00e7lar\u0131 etkin kullanmak, bu zorluklar\u0131n \u00fcstesinden gelmemde kilit rol oynad\u0131. \u0130leri d\u00fczey ipu\u00e7lar\u0131 b\u00f6l\u00fcm\u00fcnde bahsedilen performans optimizasyonu ve kod temizli\u011fi prensipleri ise, sadece \u00e7al\u0131\u015fan de\u011fil, ayn\u0131 zamanda kaliteli ve s\u00fcrd\u00fcr\u00fclebilir \u00fcr\u00fcnler geli\u015ftirme vizyonumu peki\u015ftirdi. T\u00fcm bunlar, beni gelecekteki daha karma\u015f\u0131k projelere haz\u0131rlayan sa\u011flam bir temel olu\u015fturdu. HNG13 deneyimi, ger\u00e7ekten de s\u0131k\u0131nt\u0131dan ilham alarak b\u00fcy\u00fck \u015feyler in\u015fa etmenin bir kan\u0131t\u0131d\u0131r.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<ol>\n<li>\n <strong>HNG13'e kat\u0131lmak i\u00e7in hangi bilgilere sahip olmak gerekir?<\/strong><\/p>\n<p>Genellikle temel d\u00fczeyde HTML, CSS ve JavaScript bilgisine sahip olmak yeterlidir. Program, bu temeller \u00fczerine in\u015fa ederek sizi ileri seviyelere ta\u015f\u0131may\u0131 hedefler. Algoritma ve veri yap\u0131lar\u0131 hakk\u0131nda temel bir anlay\u0131\u015f da faydal\u0131 olabilir, ancak \u00f6ncelik web teknolojileridir.<\/p>\n<\/li>\n<li>\n <strong>\u0130lk g\u00f6revler genellikle ne kadar s\u00fcrer ve ne kadar zaman ay\u0131rmak gerekir?<\/strong><\/p>\n<p>\u0130lk g\u00f6revler genellikle birka\u00e7 saatten birka\u00e7 g\u00fcne kadar s\u00fcrebilir, projenin karma\u015f\u0131kl\u0131\u011f\u0131na ve sizin \u00f6\u011frenme h\u0131z\u0131n\u0131za ba\u011fl\u0131d\u0131r. HNG13 gibi programlar yo\u011fun oldu\u011fu i\u00e7in g\u00fcnde en az 3-4 saat ay\u0131rman\u0131z \u00f6nerilir, ancak bu s\u00fcre esnek olabilir.<\/p>\n<\/li>\n<li>\n <strong>Tak\u0131m \u00e7al\u0131\u015fmas\u0131 HNG13'te nas\u0131l i\u015fler?<\/strong><\/p>\n<p>HNG13, ger\u00e7ek d\u00fcnya projelerini sim\u00fcle etti\u011fi i\u00e7in tak\u0131m \u00e7al\u0131\u015fmas\u0131 b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Genellikle k\u00fc\u00e7\u00fck tak\u0131mlara ayr\u0131l\u0131r ve Git\/GitHub gibi ara\u00e7lar kullanarak ortak bir proje \u00fczerinde \u00e7al\u0131\u015f\u0131rs\u0131n\u0131z. Bu, ileti\u015fim, i\u015fbirli\u011fi ve s\u00fcr\u00fcm kontrol becerilerinizi geli\u015ftirmenizi sa\u011flar.<\/p>\n<\/li>\n<li>\n <strong>Kar\u015f\u0131la\u015f\u0131lan en b\u00fcy\u00fck zorluk neydi ve nas\u0131l a\u015f\u0131ld\u0131?<\/strong><\/p>\n<p>Benim i\u00e7in en b\u00fcy\u00fck zorluk, zaman y\u00f6netimi ve s\u00fcrekli yeni \u015feyler \u00f6\u011frenme bask\u0131s\u0131yd\u0131. \u00c7ok say\u0131da yeni bilgi ve k\u0131sa teslim s\u00fcreleri stres yaratabiliyordu. Bu zorlu\u011fu, g\u00f6revleri k\u00fc\u00e7\u00fck par\u00e7alara ay\u0131rarak, d\u00fczenli molalar vererek ve Stack Overflow gibi kaynaklardan aktif olarak yard\u0131m alarak a\u015ft\u0131m.<\/p>\n<\/li>\n<li>\n <strong>HNG13'ten sonra kariyerime nas\u0131l devam edebilirim?<\/strong><\/p>\n<p>HNG13'\u00fc ba\u015far\u0131yla tamamlad\u0131ktan sonra, kazand\u0131\u011f\u0131n\u0131z bilgi ve deneyimle portf\u00f6y\u00fcn\u00fcz\u00fc g\u00fc\u00e7lendirebilirsiniz. Staj veya junior geli\u015ftirici pozisyonlar\u0131na ba\u015fvurabilir, a\u00e7\u0131k kaynak projelere katk\u0131da bulunabilir veya kendi projelerinizi geli\u015ftirmeye devam edebilirsiniz. A\u011f olu\u015fturmak ve \u00f6\u011frenmeye devam etmek, kariyerinizde ilerlemenin anahtar\u0131d\u0131r.<\/p>\n<\/li>\n<\/ol>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"S\u0131k\u0131lm\u0131\u015f hissetti\u011finiz anlar oldu mu? Belki de yeni bir \u015feyler \u00f6\u011frenme hevesiyle yan\u0131p tutu\u015fuyor, ancak nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilemiyordunuz.…","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-32044","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>S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13'teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni<\/title>\n<meta name=\"description\" content=\"S\u0131k\u0131lm\u0131\u015f hissetti\u011finiz anlar oldu mu? Belki de yeni bir \u015feyler \u00f6\u011frenme hevesiyle yan\u0131p tutu\u015fuyor, ancak nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilemiyordunuz. \u0130\u015fte bu makale, HNG13 program\u0131nda ilk g\u00f6reviyle s\u0131k\u0131nt\u0131dan nas\u0131l \u00fcretime ge\u00e7ti\u011fini ve web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m att\u0131\u011f\u0131n\u0131 merak edenler i\u00e7in bir yol haritas\u0131 sunuyor.\" \/>\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\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13'teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni\" \/>\n<meta property=\"og:description\" content=\"S\u0131k\u0131lm\u0131\u015f hissetti\u011finiz anlar oldu mu? Belki de yeni bir \u015feyler \u00f6\u011frenme hevesiyle yan\u0131p tutu\u015fuyor, ancak nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilemiyordunuz. \u0130\u015fte bu makale, HNG13 program\u0131nda ilk g\u00f6reviyle s\u0131k\u0131nt\u0131dan nas\u0131l \u00fcretime ge\u00e7ti\u011fini ve web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m att\u0131\u011f\u0131n\u0131 merak edenler i\u00e7in bir yol haritas\u0131 sunuyor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-17T00:01:18+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\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13’teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni\",\"datePublished\":\"2025-10-17T00:01:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/\"},\"wordCount\":5380,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/\",\"name\":\"S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13'teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-17T00:01:18+00:00\",\"description\":\"S\u0131k\u0131lm\u0131\u015f hissetti\u011finiz anlar oldu mu? Belki de yeni bir \u015feyler \u00f6\u011frenme hevesiyle yan\u0131p tutu\u015fuyor, ancak nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilemiyordunuz. \u0130\u015fte bu makale, HNG13 program\u0131nda ilk g\u00f6reviyle s\u0131k\u0131nt\u0131dan nas\u0131l \u00fcretime ge\u00e7ti\u011fini ve web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m att\u0131\u011f\u0131n\u0131 merak edenler i\u00e7in bir yol haritas\u0131 sunuyor.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13’teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni\"}]},{\"@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":"S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13'teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni","description":"S\u0131k\u0131lm\u0131\u015f hissetti\u011finiz anlar oldu mu? Belki de yeni bir \u015feyler \u00f6\u011frenme hevesiyle yan\u0131p tutu\u015fuyor, ancak nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilemiyordunuz. \u0130\u015fte bu makale, HNG13 program\u0131nda ilk g\u00f6reviyle s\u0131k\u0131nt\u0131dan nas\u0131l \u00fcretime ge\u00e7ti\u011fini ve web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m att\u0131\u011f\u0131n\u0131 merak edenler i\u00e7in bir yol haritas\u0131 sunuyor.","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\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/","og_locale":"tr_TR","og_type":"article","og_title":"S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13'teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni","og_description":"S\u0131k\u0131lm\u0131\u015f hissetti\u011finiz anlar oldu mu? Belki de yeni bir \u015feyler \u00f6\u011frenme hevesiyle yan\u0131p tutu\u015fuyor, ancak nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilemiyordunuz. \u0130\u015fte bu makale, HNG13 program\u0131nda ilk g\u00f6reviyle s\u0131k\u0131nt\u0131dan nas\u0131l \u00fcretime ge\u00e7ti\u011fini ve web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m att\u0131\u011f\u0131n\u0131 merak edenler i\u00e7in bir yol haritas\u0131 sunuyor.","og_url":"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-17T00:01:18+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\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13’teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni","datePublished":"2025-10-17T00:01:18+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/"},"wordCount":5380,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/","url":"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/","name":"S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13'teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-17T00:01:18+00:00","description":"S\u0131k\u0131lm\u0131\u015f hissetti\u011finiz anlar oldu mu? Belki de yeni bir \u015feyler \u00f6\u011frenme hevesiyle yan\u0131p tutu\u015fuyor, ancak nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilemiyordunuz. \u0130\u015fte bu makale, HNG13 program\u0131nda ilk g\u00f6reviyle s\u0131k\u0131nt\u0131dan nas\u0131l \u00fcretime ge\u00e7ti\u011fini ve web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m att\u0131\u011f\u0131n\u0131 merak edenler i\u00e7in bir yol haritas\u0131 sunuyor.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/sikintidan-uretime-hng13teki-ilk-gorevim-ve-web-gelistirme-seruveni\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"S\u0131k\u0131nt\u0131dan \u00dcretime: HNG13’teki \u0130lk G\u00f6revim ve Web Geli\u015ftirme Ser\u00fcveni"}]},{"@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\/32044","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=32044"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32044\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}