\n Her \u015fey bir merakla ba\u015flad\u0131. Kod d\u00fcnyas\u0131na att\u0131\u011f\u0131m ilk ad\u0131mlarda, kar\u015f\u0131ma \u00e7\u0131kan o devasa yap\u0131 ta\u015flar\u0131, karma\u015f\u0131k algoritmalar ve s\u00fcrekli geli\u015fen teknolojiler beni hem heyecanland\u0131r\u0131yor hem de biraz g\u00f6z\u00fcm korkutuyordu. Peki, bu yolculukta ilk ciddi meydan okumamla nas\u0131l ba\u015fa \u00e7\u0131kt\u0131m? Bu makalede, kendi ilk DEV Challenge’\u0131m\u0131 nas\u0131l tamamlad\u0131\u011f\u0131m\u0131, bu s\u00fcre\u00e7te neler \u00f6\u011frendi\u011fimi ve sizin de bu t\u00fcr bir maceraya at\u0131l\u0131rken nelere dikkat etmeniz gerekti\u011fini ad\u0131m ad\u0131m anlataca\u011f\u0131m. Unutmay\u0131n, her b\u00fcy\u00fck ba\u015far\u0131, k\u00fc\u00e7\u00fck bir cesaretle ba\u015flar.\n <\/p>\n
\n DEV Challenge, genellikle yaz\u0131l\u0131m geli\u015ftirme topluluklar\u0131 taraf\u0131ndan d\u00fczenlenen, geli\u015ftiricilerin belirli bir s\u00fcre zarf\u0131nda belirli bir problemi \u00e7\u00f6zmelerini veya bir projeyi hayata ge\u00e7irmelerini hedefleyen yar\u0131\u015fmalar veya g\u00f6revlerdir. Bu t\u00fcr meydan okumalar, sadece teknik becerileri geli\u015ftirmekle kalmaz, ayn\u0131 zamanda problem \u00e7\u00f6zme yeteneklerini, zaman y\u00f6netimi becerilerini ve tak\u0131m \u00e7al\u0131\u015fmas\u0131n\u0131 da peki\u015ftirir. Kendi ilk DEV Challenge’\u0131m\u0131 deneyimlerken, bu platformlar\u0131n ne kadar de\u011ferli oldu\u011funu bizzat g\u00f6rd\u00fcm. \u00d6zellikle yeni ba\u015flayanlar i\u00e7in, bu t\u00fcr etkinlikler kendilerini test etmek, s\u0131n\u0131rlar\u0131n\u0131 zorlamak ve kendileri gibi d\u00fc\u015f\u00fcnen di\u011fer geli\u015ftiricilerle etkile\u015fim kurmak i\u00e7in harika bir f\u0131rsatt\u0131r. Bir DEV Challenge’a kat\u0131lmak, sadece kod yazmak de\u011fil, ayn\u0131 zamanda bir toplulu\u011fun par\u00e7as\u0131 olmak ve s\u00fcrekli \u00f6\u011frenme d\u00f6ng\u00fcs\u00fcne dahil olmakt\u0131r. Bu s\u00fcre\u00e7te, sadece teknik bilgimi de\u011fil, ayn\u0131 zamanda problem kar\u015f\u0131s\u0131nda sakin kalmay\u0131, alternatif \u00e7\u00f6z\u00fcmler \u00fcretmeyi ve en \u00f6nemlisi pes etmemeyi \u00f6\u011frendim. Kendi ad\u0131ma, bu ilk deneyimim, kariyerimde ataca\u011f\u0131m daha nice ad\u0131mlar i\u00e7in sa\u011flam bir temel olu\u015fturdu.\n <\/p>\n
\n Kendinize bir DEV Challenge vermek, ki\u015fisel ve profesyonel geli\u015fiminiz i\u00e7in atabilece\u011finiz en etkili ad\u0131mlardan biridir. Bu, sadece kod yazma prati\u011fi kazanmakla s\u0131n\u0131rl\u0131 kalmaz; ayn\u0131 zamanda motivasyonunuzu art\u0131r\u0131r, yeni teknolojileri \u00f6\u011frenme iste\u011finizi k\u00f6r\u00fckler ve kendinize olan g\u00fcveninizi peki\u015ftirir. D\u00fc\u015f\u00fcnsenize, belirli bir hedefiniz var, bu hedefe ula\u015fmak i\u00e7in \u00e7al\u0131\u015f\u0131yorsunuz ve sonunda ba\u015fard\u0131\u011f\u0131n\u0131zda hissedece\u011finiz tatmin duygusu paha bi\u00e7ilmez. Bu t\u00fcr meydan okumalar, \u00f6\u011frenme s\u00fcrecini daha e\u011flenceli ve etkili hale getirir. Bir proje \u00fczerinde \u00e7al\u0131\u015f\u0131rken, kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z her zorluk sizi yeni bir ara\u015ft\u0131rma yapmaya, farkl\u0131 bir yakla\u015f\u0131m denemeye iter. Bu da sizi daha donan\u0131ml\u0131 bir geli\u015ftirici yapar. Ayr\u0131ca, DEV Challenge’lar genellikle bir toplulukla etkile\u015fim i\u00e7inde ger\u00e7ekle\u015fti\u011fi i\u00e7in, di\u011fer geli\u015ftiricilerin deneyimlerinden faydalanabilir, onlara kendi bilgilerinizi aktarabilir ve hatta yeni dostluklar kurabilirsiniz. Bu, \u00f6\u011frenme s\u00fcrecini izole bir deneyimden \u00e7\u0131kar\u0131p daha sosyal ve i\u015fbirlik\u00e7i bir hale getirir. Kendi ilk DEV Challenge’\u0131m\u0131 planlarken, ba\u015flang\u0131\u00e7ta biraz \u00e7ekingen olsam da, bu s\u00fcrecin sonunda ne kadar \u00e7ok \u015fey kazand\u0131\u011f\u0131m\u0131 fark etti\u011fimde ne kadar do\u011fru bir karar verdi\u011fimi anlad\u0131m. Bu, sadece bir kod yazma etkinli\u011fi de\u011fil, ayn\u0131 zamanda bir ki\u015fisel geli\u015fim yolculu\u011fudur.\n <\/p>\n
\n Her geli\u015ftirici gibi benim de bir “ilk”im vard\u0131. O ilk kod sat\u0131r\u0131n\u0131 yazmak, ilk hatay\u0131 yapmak ve ilk ba\u015far\u0131y\u0131 tatmak\u2026 Ama bu makalenin konusu, o ilk deneyimden biraz daha fazlas\u0131: ilk b\u00fcy\u00fck DEV Challenge’\u0131m. Bu, sadece bir kod par\u00e7as\u0131 yazmak de\u011fil, ayn\u0131 zamanda belirli bir s\u00fcre i\u00e7inde, belirli gereksinimleri kar\u015f\u0131layan bir uygulama geli\u015ftirmekti. Bana verilen g\u00f6rev, kullan\u0131c\u0131lar\u0131n belirli verileri girebilece\u011fi ve bu verilerin i\u015flenerek g\u00f6rsel bir \u00e7\u0131kt\u0131 al\u0131nabilece\u011fi basit bir web uygulamas\u0131yd\u0131. Ba\u015flang\u0131\u00e7ta, bu g\u00f6rev bana olduk\u00e7a karma\u015f\u0131k g\u00f6r\u00fcn\u00fcyordu. Hangi teknolojileri kullanmal\u0131y\u0131m? Hangi ad\u0131mlar\u0131 izlemeliyim? Ya bir yerde tak\u0131l\u0131rsam? Bu sorular zihnimde d\u00f6n\u00fcp duruyordu. Ancak, bu meydan okumay\u0131 kabul ettim \u00e7\u00fcnk\u00fc biliyordum ki bu, beni rahatl\u0131k alan\u0131m\u0131n d\u0131\u015f\u0131na \u00e7\u0131karacak ve yeni \u015feyler \u00f6\u011frenmemi sa\u011flayacakt\u0131. Bu s\u00fcre\u00e7te, sadece teknik becerilerimi de\u011fil, ayn\u0131 zamanda problem \u00e7\u00f6zme yetene\u011fimi, sabr\u0131m\u0131 ve azmimi de test ettim. Bu makalede, bu yolculu\u011fun her ad\u0131m\u0131n\u0131, kar\u015f\u0131la\u015ft\u0131\u011f\u0131m zorluklar\u0131, buldu\u011fum \u00e7\u00f6z\u00fcmleri ve bu deneyimden \u00e7\u0131kard\u0131\u011f\u0131m dersleri sizlerle payla\u015faca\u011f\u0131m. Umar\u0131m benim hikayem, sizleri de kendi DEV Challenge’lar\u0131n\u0131za at\u0131lmak i\u00e7in motive eder.\n <\/p>\n
\n Herhangi bir projeye ba\u015flamadan \u00f6nce, neyi ba\u015farmak istedi\u011finizi net bir \u015fekilde belirlemek kritik \u00f6neme sahiptir. Benim ilk DEV Challenge’\u0131m i\u00e7in hedefim, kullan\u0131c\u0131lar\u0131n basit bir anket doldurabilece\u011fi ve sonu\u00e7lar\u0131n \u00f6zetlendi\u011fi bir web aray\u00fcz\u00fc olu\u015fturmakt\u0131. Bu, temel HTML, CSS ve JavaScript bilgilerimi peki\u015ftirmemi sa\u011flayacak bir proje olacakt\u0131. Hedefi belirlerken, ula\u015f\u0131labilir ancak ayn\u0131 zamanda biraz zorlay\u0131c\u0131 olmas\u0131na dikkat ettim. \u00c7ok basit bir proje, \u00f6\u011frenme motivasyonumu d\u00fc\u015f\u00fcrebilirken, a\u015f\u0131r\u0131 karma\u015f\u0131k bir proje de beni y\u0131ld\u0131r\u0131ma u\u011fratabilirdi. Bu nedenle, “Kullan\u0131c\u0131lar soru metinlerini girecek, se\u00e7enekleri (\u00f6rne\u011fin A, B, C) belirleyecek ve uygulama, her se\u00e7ene\u011fin ka\u00e7 oy ald\u0131\u011f\u0131n\u0131 g\u00f6sterecek” gibi somut bir hedef belirledim. Bu hedef, projenin kapsam\u0131n\u0131 netle\u015ftirmemi ve hangi \u00f6zelliklerin dahil edilece\u011fini, hangilerinin daha sonraki a\u015famalara b\u0131rak\u0131laca\u011f\u0131n\u0131 anlamam\u0131 sa\u011flad\u0131. Hedef belirleme a\u015famas\u0131nda, projenin ana fonksiyonlar\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini g\u00f6z \u00f6n\u00fcnde bulundurdum. \u00d6rne\u011fin, kullan\u0131c\u0131lar\u0131n verileri kolayca girebilmesi i\u00e7in anla\u015f\u0131l\u0131r bir form tasar\u0131m\u0131 ve sonu\u00e7lar\u0131 net bir \u015fekilde g\u00f6rebilmeleri i\u00e7in basit bir \u00f6zet ekran\u0131 planlad\u0131m. Bu ilk ad\u0131m, projenin geri kalan\u0131n\u0131n temelini olu\u015fturdu ve bana yol g\u00f6sterdi.\n <\/p>\n
\n Hedefimi belirledikten sonraki en \u00f6nemli ad\u0131m, projemi hayata ge\u00e7irmek i\u00e7in hangi teknolojileri kullanaca\u011f\u0131ma karar vermekti. \u0130lk DEV Challenge’\u0131m i\u00e7in, \u00f6nceden bildi\u011fim ve daha derinlemesine \u00f6\u011frenmek istedi\u011fim teknolojilere odakland\u0131m.\n <\/p>\n
\n Bu \u00fc\u00e7l\u00fc, ba\u015flang\u0131\u00e7 seviyesindeki bir web uygulamas\u0131 i\u00e7in olduk\u00e7a yeterliydi. Daha karma\u015f\u0131k projeler i\u00e7in React, Vue.js gibi modern JavaScript framework’lerini veya Node.js gibi backend teknolojilerini d\u00fc\u015f\u00fcnebilirdim, ancak ilk meydan okumam i\u00e7in temelden ba\u015flamak ve bu temelleri sa\u011flamla\u015ft\u0131rmak daha mant\u0131kl\u0131 geldi. Bu se\u00e7im, \u00f6\u011frenme e\u011frisini y\u00f6netilebilir tutmam\u0131 sa\u011flad\u0131 ve projenin tamamlanma olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131rd\u0131. Teknoloji se\u00e7imi yaparken, sadece pop\u00fcler olanlar\u0131 de\u011fil, ayn\u0131 zamanda projemin gereksinimlerine en uygun olanlar\u0131 se\u00e7meye \u00f6zen g\u00f6sterdim. Bu, gelecekteki projelerim i\u00e7in de bir ilke haline geldi.\n <\/p>\n
\n Hedefimi belirleyip teknoloji y\u0131\u011f\u0131n\u0131m\u0131 se\u00e7tikten sonra, art\u0131k projenin en heyecan verici k\u0131sm\u0131na, yani kod yazmaya ge\u00e7me zaman\u0131yd\u0131. Bu b\u00f6l\u00fcm, ilk DEV Challenge’\u0131m\u0131n en yo\u011fun ve \u00f6\u011fretici k\u0131sm\u0131yd\u0131. Her ad\u0131m\u0131 dikkatlice planlad\u0131m ve kar\u015f\u0131la\u015ft\u0131\u011f\u0131m her soruna \u00e7\u00f6z\u00fcm bulmaya \u00e7al\u0131\u015ft\u0131m. Bu s\u00fcre\u00e7te, sadece kod yazmakla kalmad\u0131m, ayn\u0131 zamanda problem \u00e7\u00f6zme stratejileri geli\u015ftirdim, hata ay\u0131klama (debugging) tekniklerimi iyile\u015ftirdim ve kodumu daha okunabilir hale getirmek i\u00e7in pratikler yapt\u0131m. Bu, benim i\u00e7in bir \u00f6\u011frenme laboratuvar\u0131 gibiydi.\n <\/p>\n
\n Her \u015fey, HTML ile ba\u015flad\u0131. Web sayfam\u0131n temel iskeletini olu\u015fturmak i\u00e7in \n Bu yap\u0131, kullan\u0131c\u0131lar\u0131n bir soru ve birden fazla se\u00e7enek girmesine olanak tan\u0131yordu. “Yeni Se\u00e7enek Ekle” butonu ile dinamik olarak se\u00e7enek ekleyebilme ve “Sil” butonu ile se\u00e7enekleri kald\u0131rabilme \u00f6zelli\u011fi de bu a\u015famada planland\u0131. Bu, projenin kullan\u0131c\u0131 dostu olmas\u0131n\u0131 sa\u011flayacak \u00f6nemli bir detayd\u0131.\n <\/p>\n \n HTML yap\u0131s\u0131n\u0131 olu\u015fturduktan sonra, s\u0131ra sayfay\u0131 g\u00f6rsel olarak \u00e7ekici hale getirmeye geldi. \n \u00d6rne\u011fin, form alanlar\u0131n\u0131n d\u00fczenli g\u00f6r\u00fcnmesi i\u00e7in, se\u00e7enek giri\u015flerinin yan yana gelmesini ve “Sil” butonunun hizalanmas\u0131n\u0131 sa\u011flad\u0131m. Ayr\u0131ca, kullan\u0131c\u0131 etkile\u015fimlerini daha belirgin hale getirmek i\u00e7in hover (\u00fczerine gelme) ve active (t\u0131klama) durumlar\u0131 i\u00e7in stil tan\u0131mlamalar\u0131 yapt\u0131m. Renk se\u00e7iminde, g\u00f6z yormayan ve profesyonel bir g\u00f6r\u00fcn\u00fcm sunan tonlar\u0131 tercih ettim. Bu, kullan\u0131c\u0131lar\u0131n uygulamay\u0131 daha uzun s\u00fcre kullanmas\u0131n\u0131 te\u015fvik eder.\n <\/p>\n \n Bir vaka analizi olarak, ba\u015flang\u0131\u00e7ta form \u00f6\u011feleri aras\u0131nda yeterli bo\u015fluk b\u0131rakmad\u0131\u011f\u0131m\u0131 fark ettim. Bu durum, kullan\u0131c\u0131lar\u0131n formu doldururken hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131yordu. CSS’te \n Bu, projenin kalbiydi. \n Bu a\u015famada kar\u015f\u0131la\u015ft\u0131\u011f\u0131m en b\u00fcy\u00fck zorluklardan biri, JavaScript’teki asenkron i\u015flemlerle ba\u015fa \u00e7\u0131kmakt\u0131. Ancak, \n Bir vaka analizi \u00f6rne\u011fi olarak, ba\u015flang\u0131\u00e7ta “Yeni Se\u00e7enek Ekle” butonuna t\u0131kland\u0131\u011f\u0131nda, daha \u00f6nce eklenmi\u015f olan se\u00e7eneklerin de tekrar eklendi\u011fini fark ettim. Bu bir hatayd\u0131. Sorunu \u00e7\u00f6zmek i\u00e7in, yeni se\u00e7enek ekleme fonksiyonunu her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, mevcut se\u00e7enekleri kontrol eden bir mant\u0131k ekledim ve sadece benzersiz se\u00e7eneklerin eklenmesini sa\u011flad\u0131m. Bu t\u00fcr ince ayarlar, uygulaman\u0131n beklenen \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 garanti eder.\n <\/p>\n \n Herhangi bir yaz\u0131l\u0131m projesinde oldu\u011fu gibi, ilk DEV Challenge’\u0131m da zorluklardan muaf de\u011fildi. Bu zorluklar, \u00f6\u011frenme s\u00fcrecimin ayr\u0131lmaz bir par\u00e7as\u0131yd\u0131 ve onlar\u0131 a\u015fmak, beni daha g\u00fc\u00e7l\u00fc bir geli\u015ftirici haline getirdi. Bu b\u00f6l\u00fcmde, kar\u015f\u0131la\u015ft\u0131\u011f\u0131m baz\u0131 temel zorluklar\u0131 ve bu zorluklar\u0131n \u00fcstesinden nas\u0131l geldi\u011fimi anlataca\u011f\u0131m. Bu deneyimler, sizin de benzer durumlarla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131zda size rehberlik edebilir.\n <\/p>\n \n Kod yazarken hatalarla kar\u015f\u0131la\u015fmak ka\u00e7\u0131n\u0131lmazd\u0131r. Benim i\u00e7in en b\u00fcy\u00fck zorluklardan biri, JavaScript’teki hatalar\u0131 bulmak ve d\u00fczeltmekti. Bazen basit bir yaz\u0131m hatas\u0131, t\u00fcm kodun \u00e7al\u0131\u015fmas\u0131n\u0131 engelleyebiliyordu. Bu durumlarda, taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki konsolu (console) aktif olarak kulland\u0131m. \n Bir vaka analizi olarak, anket sonu\u00e7lar\u0131n\u0131n do\u011fru bir \u015fekilde g\u00fcncellenmedi\u011fi bir durumla kar\u015f\u0131la\u015ft\u0131m. Oy say\u0131s\u0131n\u0131 art\u0131rmak i\u00e7in yazd\u0131\u011f\u0131m kod, bazen say\u0131y\u0131 olmas\u0131 gerekenden fazla art\u0131r\u0131yordu. Sorunu bulmak i\u00e7in \n Uygulamay\u0131 i\u015flevsel hale getirdikten sonra, kullan\u0131c\u0131 deneyimini (User Experience – UX) iyile\u015ftirmek de \u00f6nemli bir odak noktas\u0131yd\u0131. Ba\u015flang\u0131\u00e7ta, form alanlar\u0131 aras\u0131nda yeterli bo\u015fluk olmamas\u0131, kullan\u0131c\u0131lar\u0131n yanl\u0131\u015f alanlara veri girmesine neden olabiliyordu. Ayr\u0131ca, mobil cihazlarda yaz\u0131lar\u0131n okunabilirli\u011fi d\u00fc\u015f\u00fckt\u00fc. Bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in CSS’te \n \u00d6rne\u011fin, “Yeni Se\u00e7enek Ekle” butonunun kullan\u0131\u015fl\u0131l\u0131\u011f\u0131n\u0131 art\u0131rmak i\u00e7in, bu butona t\u0131kland\u0131\u011f\u0131nda kullan\u0131c\u0131n\u0131n imlecinin otomatik olarak yeni eklenen se\u00e7enek alan\u0131na gitmesini sa\u011flayan bir JavaScript kodu ekledim. Bu, kullan\u0131c\u0131lar\u0131n daha ak\u0131c\u0131 bir \u015fekilde veri girebilmelerine olanak tan\u0131d\u0131. Bu t\u00fcr kullan\u0131c\u0131 odakl\u0131 iyile\u015ftirmeler, uygulaman\u0131n sadece i\u015flevsel olmas\u0131n\u0131 de\u011fil, ayn\u0131 zamanda keyifli bir \u015fekilde kullan\u0131lmas\u0131n\u0131 da sa\u011flar.\n <\/p>\n \n \u0130lk DEV Challenge’\u0131m\u0131 tamamlad\u0131ktan sonra, bu deneyimden \u00e7\u0131kard\u0131\u011f\u0131m baz\u0131 dersler ve ileri d\u00fczey geli\u015ftiriciler i\u00e7in faydal\u0131 olabilecek ipu\u00e7lar\u0131 var. Bu pratikler, sadece bu projeyle s\u0131n\u0131rl\u0131 kalmay\u0131p, gelecekteki t\u00fcm projelerinizde size yard\u0131mc\u0131 olacakt\u0131r.\n <\/p>\n \n Projenizin ne kadar karma\u015f\u0131k olursa olsun, kodunuzun okunabilir ve bak\u0131m\u0131 kolay olmas\u0131 \u00e7ok \u00f6nemlidir. Bu, hem sizin gelecekte kodunuzu daha rahat anlaman\u0131z\u0131 sa\u011flar hem de ba\u015fkalar\u0131n\u0131n projenize katk\u0131da bulunmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.\n <\/p>\n \n Bu pratikler, projenizin \u00f6mr\u00fcn\u00fc uzat\u0131r ve gelecekteki geli\u015ftirmeleri \u00e7ok daha kolay hale getirir. Ba\u015flang\u0131\u00e7ta biraz daha fazla zaman alsa da, uzun vadede b\u00fcy\u00fck fayda sa\u011flar.\n <\/p>\n \n Herhangi bir yaz\u0131l\u0131m projesinde, versiyon kontrol sistemleri (Version Control Systems – VCS) kullanmak neredeyse zorunludur. Git, en pop\u00fcler ve yayg\u0131n kullan\u0131lan VCS’dir. Git’i kullanarak, kodunuzdaki de\u011fi\u015fiklikleri takip edebilir, \u00f6nceki s\u00fcr\u00fcmlere geri d\u00f6nebilir, farkl\u0131 \u00f6zellikler \u00fczerinde paralel olarak \u00e7al\u0131\u015fabilir ve tak\u0131m arkada\u015flar\u0131n\u0131zla kolayca i\u015fbirli\u011fi yapabilirsiniz.\n <\/p>\n \n Benim ilk DEV Challenge’\u0131mda Git kullanmam\u0131\u015f olmam bir eksiklikti. Ancak, bu deneyimden sonra Git’i \u00f6\u011frenmenin ne kadar \u00f6nemli oldu\u011funu anlad\u0131m. Git ile:\n <\/p>\n \n Git \u00f6\u011frenmek, geli\u015ftirici ara\u00e7 setinize ekleyece\u011finiz en de\u011ferli becerilerden biridir. Ba\u015flang\u0131\u00e7ta biraz karma\u015f\u0131k g\u00f6r\u00fcnse de, temel komutlar\u0131 \u00f6\u011frendikten sonra kullan\u0131m\u0131 olduk\u00e7a kolayd\u0131r.\n <\/p>\n \n \u0130lk DEV Challenge’\u0131m\u0131 tamamlamak, benim i\u00e7in sadece teknik bir ba\u015far\u0131 de\u011fil, ayn\u0131 zamanda ki\u015fisel bir d\u00f6n\u00fcm noktas\u0131yd\u0131. Bu s\u00fcre\u00e7te, kodlama becerilerimi geli\u015ftirmenin yan\u0131 s\u0131ra, problem \u00e7\u00f6zme yetene\u011fimi, sabr\u0131m\u0131, azmimi ve kendime olan g\u00fcvenimi de peki\u015ftirdim. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131m zorluklar, beni daha iyi bir geli\u015ftirici olmaya itti ve her hata, bir \u00f6\u011frenme f\u0131rsat\u0131na d\u00f6n\u00fc\u015ft\u00fc. Bu makalede payla\u015ft\u0131\u011f\u0131m ad\u0131mlar, ipu\u00e7lar\u0131 ve vaka analizleri, umar\u0131m sizleri de kendi DEV Challenge’lar\u0131n\u0131za at\u0131lmak i\u00e7in motive eder. Unutmay\u0131n, en iyi \u00f6\u011frenme y\u00f6ntemi, yaparak \u00f6\u011frenmektir.\n <\/p>\n \n Bu ilk deneyimim, gelecekteki projelerim i\u00e7in sa\u011flam bir temel olu\u015fturdu. Art\u0131k daha karma\u015f\u0131k teknolojileri \u00f6\u011frenmeye, daha b\u00fcy\u00fck projeler \u00fczerinde \u00e7al\u0131\u015fmaya ve s\u00fcrekli olarak kendimi geli\u015ftirmeye haz\u0131r\u0131m. DEV Challenge’lar, sadece bir yar\u0131\u015fma de\u011fil, ayn\u0131 zamanda bir toplulu\u011fun par\u00e7as\u0131 olma, bilgi payla\u015fma ve birlikte b\u00fcy\u00fcme f\u0131rsat\u0131d\u0131r. Bu yolculukta bana e\u015flik eden herkese te\u015fekk\u00fcr ederim.\n <\/p>\n DEV Challenge’lar, her seviyeden geli\u015ftiriciye hitap eder. Ba\u015flang\u0131\u00e7 seviyesinden ileri seviyeye kadar farkl\u0131 zorluklarda bir\u00e7ok meydan okuma bulunmaktad\u0131r. \u00d6nemli olan, \u00f6\u011frenmeye istekli olman\u0131zd\u0131r.<\/p>\n<\/li>\n Tamamlayamamak da bir \u00f6\u011frenme s\u00fcrecidir. \u00d6nemli olan \u00e7aba g\u00f6stermi\u015f olman\u0131zd\u0131r. Bir\u00e7ok platformda, tamamlanamayan projeler bile de\u011ferli geri bildirimler alman\u0131z\u0131 sa\u011flar.<\/p>\n<\/li>\n Pop\u00fcler platformlar aras\u0131nda DEV Community, HackerRank, LeetCode, Codewars ve Kaggle (veri bilimi odakl\u0131) bulunmaktad\u0131r. Kendi ilgi alan\u0131n\u0131za ve seviyenize uygun olan\u0131 se\u00e7ebilirsiniz.<\/p>\n<\/li>\n Tamamlad\u0131\u011f\u0131n\u0131z DEV Challenge’lar, \u00f6zellikle proje portf\u00f6y\u00fcn\u00fcz\u00fc zenginle\u015ftirir. Bu, i\u015fverenlere pratik becerilerinizi ve problem \u00e7\u00f6zme yetene\u011finizi g\u00f6sterir. GitHub profilinizde sergiledi\u011finiz projeler, CV’nizin en g\u00fc\u00e7l\u00fc yanlar\u0131ndan biri olabilir.<\/p>\n<\/li>\n Baz\u0131 DEV Challenge’lar \u00f6d\u00fcll\u00fc olabilirken, bir\u00e7o\u011fu daha \u00e7ok \u00f6\u011frenme ve geli\u015fim odakl\u0131d\u0131r. \u00d6d\u00fcl kazanmak g\u00fczel olsa da, as\u0131l ama\u00e7 kendinizi geli\u015ftirmek ve yeni \u015feyler \u00f6\u011frenmektir.<\/p>\n<\/li>\n<\/ol>\n #DEVChallenge #WebGeli\u015ftirme #JavaScript #HTML #CSS #Geli\u015ftiriciYolculu\u011fu<\/p>\nindex.html<\/code> dosyas\u0131n\u0131 olu\u015fturdum. Kullan\u0131c\u0131lar\u0131n anket sorular\u0131n\u0131 ve se\u00e7eneklerini girece\u011fi bir form alan\u0131 ve sonu\u00e7lar\u0131n g\u00f6sterilece\u011fi bir alan tasarlad\u0131m. Semantik HTML etiketlerini kullanarak, sayfam\u0131n eri\u015filebilirli\u011fini ve SEO performans\u0131n\u0131 art\u0131rmay\u0131 hedefledim. \u00d6rne\u011fin, form elementleri i\u00e7in <form><\/code>, <label><\/code>, <input><\/code> ve sonu\u00e7lar\u0131 g\u00f6stermek i\u00e7in <section><\/code>, <article><\/code>, <p><\/code> gibi etiketleri kulland\u0131m.\n <\/p>\n2. G\u00f6rselle\u015ftirme: CSS ile Hayat Vermek<\/h3>\n
style.css<\/code> dosyas\u0131nda, uygulaman\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, renk paletini, yaz\u0131 tiplerini ve d\u00fczenini belirledim. Responsive tasar\u0131m prensiplerini uygulayarak, uygulaman\u0131n hem masa\u00fcst\u00fc bilgisayarlarda hem de mobil cihazlarda kusursuz g\u00f6r\u00fcnmesini sa\u011flad\u0131m. Flexbox ve Grid gibi CSS layout tekniklerini kullanarak, elementlerin d\u00fczenini esnek ve dinamik bir \u015fekilde ayarlad\u0131m.\n <\/p>\nmargin<\/code> ve padding<\/code> de\u011ferlerini ayarlayarak bu sorunu giderdim. Ayr\u0131ca, mobil cihazlarda yaz\u0131lar\u0131n okunabilirli\u011fini art\u0131rmak i\u00e7in font-size<\/code> de\u011ferlerini de d\u00fczenledim. Bu t\u00fcr k\u00fc\u00e7\u00fck ayarlamalar, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.\n <\/p>\n3. Etkile\u015fim ve Mant\u0131k: JavaScript ile Uygulamay\u0131 Canland\u0131rmak<\/h3>\n
script.js<\/code> dosyas\u0131nda, uygulaman\u0131n t\u00fcm etkile\u015fimli \u00f6zelliklerini ve mant\u0131\u011f\u0131n\u0131 kodlad\u0131m.\n <\/p>\n\n
createElement<\/code> ve appendChild<\/code> gibi DOM manip\u00fclasyon metotlar\u0131 kullan\u0131larak yap\u0131ld\u0131.<\/li>\nremove<\/code> metodu ile ger\u00e7ekle\u015ftirildi.<\/li>\nasync\/await<\/code> gibi modern JavaScript \u00f6zelliklerini kullanarak bu durumu daha kolay y\u00f6nettim. Ayr\u0131ca, kodumu mod\u00fcler hale getirmek i\u00e7in fonksiyonlar olu\u015fturdum ve de\u011fi\u015fken isimlerini anla\u015f\u0131l\u0131r se\u00e7tim. Bu, kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131rd\u0131.\n <\/p>\n\/\/ script.js \u00d6rne\u011fi (Basitle\u015ftirilmi\u015f)\n\nconst anketFormu = document.getElementById('anket-formu');\nconst seceneklerAlan = document.getElementById('secenekler-alan');\nconst yeniSecenekEkleBtn = document.getElementById('yeni-secenek-ekle');\nconst anketGirisSection = document.getElementById('anket-giris');\nconst anketSonucSection = document.getElementById('anket-sonuc');\nconst gosterilenSoru = document.getElementById('gosterilen-soru');\nconst sonucListesi = document.getElementById('sonuc-listesi');\nconst yeniAnketBaslatBtn = document.getElementById('yeni-anket-baslat');\n\nlet secenekSayisi = 2; \/\/ Ba\u015flang\u0131\u00e7ta 2 se\u00e7enek var\n\nyeniSecenekEkleBtn.addEventListener('click', () => {\n secenekSayisi++;\n const yeniSecenekDiv = document.createElement('div');\n yeniSecenekDiv.classList.add('secenek-girisi');\n yeniSecenekDiv.innerHTML = <input type="text" class="secenek" placeholder="Se\u00e7enek ${secenekSayisi}" required>\n <button type="button" class="secenek-sil">Sil<\/button><\/code>;\n seceneklerAlan.appendChild(yeniSecenekDiv);\n});\n\nseceneklerAlan.addEventListener('click', (e) => {\n if (e.target.classList.contains('secenek-sil')) {\n e.target.parentElement.remove();\n \/\/ Se\u00e7enek say\u0131s\u0131 g\u00fcncellenmeli, ancak bu basitle\u015ftirilmi\u015f \u00f6rnekte atlanm\u0131\u015ft\u0131r.\n }\n});\n\nanketFormu.addEventListener('submit', (e) => {\n e.preventDefault();\n\n const soru = document.getElementById('soru').value;\n const secenekInputlari = document.querySelectorAll('.secenek');\n const secenekler = [];\n secenekInputlari.forEach(input => {\n if (input.value.trim() !== '') {\n secenekler.push({ metin: input.value.trim(), oy: 0 });\n }\n });\n\n gosterilenSoru.textContent = soru;\n sonucListesi.innerHTML = ''; \/\/ \u00d6nceki sonu\u00e7lar\u0131 temizle\n\n secenekler.forEach((secenek, index) => {\n const listItem = document.createElement('li');\n listItem.innerHTML = <span>${secenek.metin}<\/span>\n <button class="oy-ver" data-index="${index}">Oy Ver<\/button>\n <span class="oy-sayisi">(0 Oy)<\/span><\/code>;\n sonucListesi.appendChild(listItem);\n });\n\n anketGirisSection.style.display = 'none';\n anketSonucSection.style.display = 'block';\n});\n\nsonucListesi.addEventListener('click', (e) => {\n if (e.target.classList.contains('oy-ver')) {\n const index = parseInt(e.target.dataset.index);\n const secenekler = document.querySelectorAll('#sonuc-listesi li');\n \n \/\/ Oy say\u0131s\u0131n\u0131 g\u00fcncelle\n const oySayisiSpan = secenekler[index].querySelector('.oy-sayisi');\n let mevcutOy = parseInt(oySayisiSpan.textContent.match(\/\\((\\d+) Oy\\)\/)[1]);\n mevcutOy++;\n oySayisiSpan.textContent = (${mevcutOy} Oy)<\/code>;\n }\n});\n\nyeniAnketBaslatBtn.addEventListener('click', () => {\n anketFormu.reset();\n secenekSayisi = 2; \/\/ Ba\u015flang\u0131\u00e7 se\u00e7enek say\u0131s\u0131na s\u0131f\u0131rla\n \/\/ Mevcut se\u00e7enekleri temizle ve varsay\u0131lanlar\u0131 ekle\n seceneklerAlan.innerHTML = <h3>Se\u00e7enekler:<\/h3>\n <div class="secenek-girisi">\n <input type="text" class="secenek" placeholder="Se\u00e7enek 1" required>\n <button type="button" class="secenek-sil">Sil<\/button>\n <\/div>\n <div class="secenek-girisi">\n <input type="text" class="secenek" placeholder="Se\u00e7enek 2" required>\n <button type="button" class="secenek-sil">Sil<\/button>\n <\/div><\/code>;\n anketSonucSection.style.display = 'none';\n anketGirisSection.style.display = 'block';\n});<\/code><\/pre>\n<\/p><\/div>\nKar\u015f\u0131la\u015f\u0131lan Zorluklar ve \u00c7\u00f6z\u00fcmler<\/h2>\n
Hata Ay\u0131klama (Debugging) Sanat\u0131<\/h3>\n
console.log()<\/code> komutu, de\u011fi\u015fkenlerin de\u011ferlerini ve kodun hangi noktaya kadar \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmek i\u00e7in en iyi dostumdu.\n <\/p>\nconsole.log()<\/code> ile her t\u0131klamada mevcutOy<\/code> de\u011fi\u015fkeninin de\u011ferini takip ettim. Sorunun, parseInt()<\/code> fonksiyonunu do\u011fru kullanmamamdan ve say\u0131sal de\u011ferleri string olarak alg\u0131lamamdan kaynakland\u0131\u011f\u0131n\u0131 fark ettim. Bu hatay\u0131 d\u00fczelttikten sonra, sonu\u00e7lar do\u011fru bir \u015fekilde g\u00fcncellenmeye ba\u015flad\u0131. Bu deneyim, hata ay\u0131klaman\u0131n sab\u0131r ve dikkat gerektiren bir s\u00fcre\u00e7 oldu\u011funu bana bir kez daha \u00f6\u011fretti.\n <\/p>\nKullan\u0131c\u0131 Deneyimini \u0130yile\u015ftirme<\/h3>\n
padding<\/code>, margin<\/code> ve font-size<\/code> gibi \u00f6zellikleri ayarlad\u0131m. Ayr\u0131ca, kullan\u0131c\u0131lar\u0131n geri bildirimlerini daha net g\u00f6rebilmeleri i\u00e7in butonlar\u0131n ve di\u011fer etkile\u015fimli \u00f6\u011felerin \u00fczerine gelindi\u011finde g\u00f6rsel ipu\u00e7lar\u0131 ekledim.\n <\/p>\n\u0130leri D\u00fczey \u0130pu\u00e7lar\u0131 ve En \u0130yi Pratikler<\/h2>\n
Kod Okunabilirli\u011fi ve Bak\u0131m\u0131<\/h3>\n
\n
x<\/code> yerine oySayisi<\/code> veya f<\/code> yerine anketOlustur<\/code> gibi.<\/li>\nVersiyon Kontrol Sistemleri (Git)<\/h3>\n
\n
Sonu\u00e7: \u0130lk DEV Challenge’\u0131m ve Gelece\u011fe Dair<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n