{"id":14395,"date":"2025-08-11T06:38:21","date_gmt":"2025-08-11T03:38:21","guid":{"rendered":"https:\/\/www.hosting.com.tr\/blog\/?p=14395"},"modified":"2026-05-12T10:51:27","modified_gmt":"2026-05-12T07:51:27","slug":"developer-portfoyunde-olmasi-gereken-proje-turleri","status":"publish","type":"post","link":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/","title":{"rendered":"Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Bir geli\u015ftiriciyseniz, developer portf\u00f6y\u00fc, bir i\u015fe girerken ya da bir projede \u00e7al\u0131\u015fmak istedi\u011finizde, \u00f6zge\u00e7mi\u015finizin yan\u0131nda potansiyel i\u015fverenlere sunman\u0131z gereken \u00f6nemli bir ara\u00e7t\u0131r. Sadece ne bildi\u011finizi de\u011fil, ayn\u0131 zamanda bu bilgileri nas\u0131l uygulad\u0131\u011f\u0131n\u0131z\u0131 ve nas\u0131l \u00e7\u00f6z\u00fcmler \u00fcretebildi\u011finizi somut \u00f6rneklerle g\u00f6sterir. \u0130yi haz\u0131rlanm\u0131\u015f bir portf\u00f6y, teknik yeteneklerinizin yan\u0131 s\u0131ra problem \u00e7\u00f6zme becerilerinizi, estetik anlay\u0131\u015f\u0131n\u0131z\u0131 ve profesyonel yakla\u015f\u0131m\u0131n\u0131z\u0131 da ortaya koyar.<\/span><\/p>\n<h2 id=\"developer-portfoyu-nedir\">Developer Portf\u00f6y\u00fc Nedir?<\/h2>\n<p><span style=\"font-weight: 400;\">Bir web geli\u015ftirici portf\u00f6y\u00fc, becerilerinizi, yeteneklerinizi ve i\u015finizin kalitesini do\u011fru bir \u015fekilde temsil eden en iyi web geli\u015ftirme projelerinizin \u00e7evrimi\u00e7i bir portf\u00f6y\u00fcd\u00fcr. Herhangi bir i\u015fe girmek ya da belirli bir projede \u00e7al\u0131\u015fmak i\u00e7in potansiyel i\u015fverenlere veya m\u00fc\u015fterilere g\u00f6sterebilece\u011finiz en ilgi \u00e7ekici profesyonel web geli\u015ftirme \u00f6rneklerinizden olu\u015fan bir portf\u00f6y g\u00f6revi g\u00f6r\u00fcr.<\/span><\/p>\n<h2 id=\"gelistiricilerin-neden-bir-portfoye-ihtiyaci-var\">Geli\u015ftiricilerin Neden Bir Portf\u00f6ye \u0130htiyac\u0131 Var?<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14459 size-full\" src=\"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/gelistiricilerin-neden-bir-portfoye-ihtiyaci-var.jpeg\" alt=\"Geli\u015ftiricilerin Neden Bir Portf\u00f6ye \u0130htiyac\u0131 Var?\" width=\"1200\" height=\"675\" srcset=\"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/gelistiricilerin-neden-bir-portfoye-ihtiyaci-var.jpeg 1200w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/gelistiricilerin-neden-bir-portfoye-ihtiyaci-var-300x169.jpeg 300w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/gelistiricilerin-neden-bir-portfoye-ihtiyaci-var-1024x576.jpeg 1024w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/gelistiricilerin-neden-bir-portfoye-ihtiyaci-var-768x432.jpeg 768w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/gelistiricilerin-neden-bir-portfoye-ihtiyaci-var-380x214.jpeg 380w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/gelistiricilerin-neden-bir-portfoye-ihtiyaci-var-550x309.jpeg 550w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/gelistiricilerin-neden-bir-portfoye-ihtiyaci-var-800x450.jpeg 800w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/gelistiricilerin-neden-bir-portfoye-ihtiyaci-var-1160x653.jpeg 1160w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Bir web geli\u015ftirici olarak i\u015fe ba\u015flamadan \u00f6nce, ge\u00e7mi\u015fteki en iyi projelerinizden olu\u015fan bir portf\u00f6y genellikle bir gerekliliktir. Bir\u00e7ok i\u015fte \u00f6zge\u00e7mi\u015f \u00e7ok \u00f6nemli olsa da, geli\u015ftiriciler i\u00e7in portf\u00f6y daha \u00f6nemlidir. \u00c7\u00fcnk\u00fc portf\u00f6y ger\u00e7ekten neler yapabilece\u011finizi g\u00f6sterdi\u011finiz yerdir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Bu noktada bir gereklilik olmasa bile, bir web geli\u015ftirme portf\u00f6y sitesi \u00f6ne \u00e7\u0131kman\u0131za yard\u0131mc\u0131 olabilir. \u00c7al\u0131\u015fmalar\u0131n\u0131z\u0131 sergileme konusundaki kararl\u0131l\u0131\u011f\u0131n\u0131z\u0131 g\u00f6sterir. Ayr\u0131ca i\u015finizi m\u00fcmk\u00fcn olan en iyi \u015fekilde temsil etmeniz ve ki\u015fili\u011finizi g\u00f6stermeniz i\u00e7in bir f\u0131rsatt\u0131r.<\/span><\/p>\n<h2 id=\"web-gelistirme-portfoyunuzu-nerede-barindirmalisiniz\">Web Geli\u015ftirme Portf\u00f6y\u00fcn\u00fcz\u00fc Nerede Bar\u0131nd\u0131rmal\u0131s\u0131n\u0131z?<\/h2>\n<p><span style=\"font-weight: 400;\">\u00c7ok fazla \u00f6n \u00e7al\u0131\u015fma yapmadan web geli\u015ftirme portf\u00f6y\u00fcn\u00fcz\u00fc bar\u0131nd\u0131rabilece\u011finiz mevcut platformlar vard\u0131r. Bunlardan baz\u0131lar\u0131 a\u015fa\u011f\u0131dakileri i\u00e7ermektedir:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">GitHub<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Behance<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dribbble<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Adobe Portfolio<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">CodePen<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ancak, sizi ger\u00e7ekten farkl\u0131 k\u0131lacak \u015fey, web geli\u015ftirme becerilerinizi g\u00f6stermek i\u00e7in g\u00fcvenilir bir web hosting sa\u011flay\u0131c\u0131s\u0131 taraf\u0131ndan desteklenen ki\u015fisel bir web sitesi kullanmakt\u0131r.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00d6zel bir portf\u00f6y web sitesi, kim oldu\u011funuz ve web geli\u015ftirme projelerinizin i\u00e7eri\u011fi hakk\u0131nda daha fazla bilgi sa\u011flayabilece\u011finiz kendi ki\u015fisel alan\u0131n\u0131zd\u0131r. Buradan GitHub, StackOverflow, Quora, LinkedIn, Medium veya Twitter gibi aktif oldu\u011funuz di\u011fer platformlara da ba\u011flant\u0131 vermeniz m\u00fcmk\u00fcnd\u00fcr.<\/span><\/p>\n<h2 id=\"online-portfoyunuzde-neler-olmali\">Online Portf\u00f6y\u00fcn\u00fczde Neler Olmal\u0131?<\/h2>\n<p><span style=\"font-weight: 400;\">Bir developer portf\u00f6y sitesinde mutlaka yer almas\u0131 gereken yedi temel unsur vard\u0131r. Bunlar a\u015fa\u011f\u0131dakileri i\u00e7erir:<\/span><\/p>\n<h3 id=\"1-ana-sayfa\">1. Ana Sayfa<\/h3>\n<p><span style=\"font-weight: 400;\">Web geli\u015ftirici portf\u00f6y\u00fcn\u00fcz\u00fcn bir ana sayfas\u0131 olmal\u0131 ve burada kim oldu\u011funuz ve ne i\u015f yapt\u0131\u011f\u0131n\u0131z net bir \u015fekilde belirtilmelidir. E\u011fer sayfan\u0131za bir profil foto\u011fraf\u0131 eklerseniz, potansiyel i\u015fverenler veya m\u00fc\u015fteriler sizi daha iyi tan\u0131yabilir. Unutmay\u0131n, kar\u015f\u0131 tarafta bir izlenim b\u0131rakmak i\u00e7in yaln\u0131zca 50 milisaniyeniz vard\u0131r, bu y\u00fczden bu an\u0131 iyi de\u011ferlendirmeniz gerekir.<\/span><\/p>\n<h3 id=\"2-web-gelistirme-yetenekleriniz\">2. Web Geli\u015ftirme Yetenekleriniz<\/h3>\n<p><span style=\"font-weight: 400;\">Sahip oldu\u011funuz ve \u00e7al\u0131\u015fmak istedi\u011finiz alanla en \u00e7ok \u00f6rt\u00fc\u015fen becerilerinizi listeleyin. Bunlar a\u015fa\u011f\u0131dakileri i\u00e7erebilir:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bildi\u011finiz programlama dilleri<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kulland\u0131\u011f\u0131n\u0131z framework ve k\u00fct\u00fcphaneler<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Teknolojiler<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ara\u00e7lar ve programlar (\u00f6rne\u011fin: Figma, Sketch, VSCode)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Bu bilgileri daha anla\u015f\u0131l\u0131r k\u0131lmak i\u00e7in y\u00fczdelik oranlarla belirtebilirsiniz.<\/span><\/p>\n<h3 id=\"3-gecmis-projeleriniz\">3. Ge\u00e7mi\u015f Projeleriniz<\/h3>\n<p><span style=\"font-weight: 400;\">Web geli\u015ftirici portf\u00f6y\u00fcn\u00fcz\u00fcn en \u00f6nemli b\u00f6l\u00fcm\u00fc, sergiledi\u011finiz projelerdir. Bu nedenle, 6 ila 12 aras\u0131nda projeyi dikkatle se\u00e7meniz \u00f6nerilir. Odak alan\u0131n\u0131z ne kadar geni\u015fse, o kadar fazla \u00f6rnek g\u00f6stermeniz gerekebilir. Ancak nitelik her zaman nicelikten daha de\u011ferlidir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Her proje i\u00e7in k\u0131sa bir a\u00e7\u0131klama haz\u0131rlay\u0131n ve projelerinize a\u015fa\u011f\u0131dakileri mutlaka ekleyin:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Projeye genel bak\u0131\u015f ve ba\u011flam<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Proje gereksinimleri<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0130zledi\u011finiz yakla\u015f\u0131m<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kulland\u0131\u011f\u0131n\u0131z diller, k\u00fct\u00fcphaneler, teknolojiler<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklar ve nas\u0131l \u00e7\u00f6zd\u00fc\u011f\u00fcn\u00fcz<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Projenin tamamland\u0131\u011f\u0131 tarih<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Bitmi\u015f halinin ekran g\u00f6r\u00fcnt\u00fcleri veya ba\u011flant\u0131s\u0131<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">M\u00fcmk\u00fcnse GitHub gibi kaynaklara kod ba\u011flant\u0131lar\u0131 ekleyin. Projelerinizi anlatt\u0131\u011f\u0131n\u0131z veya kodun \u00f6nemli b\u00f6l\u00fcmlerini g\u00f6sterdi\u011finiz k\u0131sa videolar haz\u0131rlay\u0131n.<\/span><\/p>\n<h3 id=\"4-hakkimda-sayfasi\">4. Hakk\u0131mda Sayfas\u0131<\/h3>\n<p><span style=\"font-weight: 400;\">Portf\u00f6y sitenizde mutlaka bir Hakk\u0131mda sayfas\u0131 olmal\u0131d\u0131r. Burada kim oldu\u011funuzu ve bu i\u015fi neden yapt\u0131\u011f\u0131n\u0131z\u0131 anlatan bir hikaye yer almal\u0131d\u0131r. Ayr\u0131ca kendinizle ilgili ki\u015fisel detaylara da yer verebilirsiniz. Bu alan, karakterinizi yans\u0131tmak ve ak\u0131lda kal\u0131c\u0131 olmak i\u00e7in g\u00fczel bir f\u0131rsatt\u0131r.<\/span><\/p>\n<h3 id=\"5-iletisim-bilgileri\">5. \u0130leti\u015fim Bilgileri<\/h3>\n<p><span style=\"font-weight: 400;\">Kendi ki\u015fisel web sitenizi olu\u015fturmak i\u00e7in zaman ve emek harcad\u0131ysan\u0131z, bunun kar\u015f\u0131l\u0131\u011f\u0131n\u0131 almak da sizin hakk\u0131n\u0131zd\u0131r.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Bu y\u00fczden, ziyaret\u00e7ilerinizin size ula\u015fmas\u0131n\u0131 son derece kolay hale getirin.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Potansiyel i\u015fverenler veya m\u00fc\u015fteriler karma\u015f\u0131k ileti\u015fim yollar\u0131yla u\u011fra\u015fmak istemez. \u0130leti\u015fim bilgileriniz a\u00e7\u0131k de\u011filse, ba\u015fka bir portf\u00f6ye ge\u00e7ip oradaki geli\u015ftiriciyle ileti\u015fime ge\u00e7ebilirler.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Bu y\u00fczden ileti\u015fimde a\u015fa\u011f\u0131daki kullanabilirsiniz:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0130leti\u015fim formu<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">E-posta adresiniz<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Takvim ba\u011flant\u0131s\u0131\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sosyal medya profilleri<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Canl\u0131 sohbet veya chatbot<\/span><\/li>\n<\/ul>\n<h3 id=\"6-projelerinize-diger-platformlardan-baglantilar\">6. Projelerinize Di\u011fer Platformlardan Ba\u011flant\u0131lar<\/h3>\n<p><span style=\"font-weight: 400;\">Bir\u00e7ok web geli\u015ftirici projelerini GitHub, Behance, Dribbble, Adobe Portfolio, CodePen gibi portf\u00f6y platformlar\u0131nda sergiler.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Yani ki\u015fisel sitenize gelen i\u015fveren ya da m\u00fc\u015fteriler, bu platformlardaki \u00e7al\u0131\u015fmalar\u0131n\u0131z\u0131 da g\u00f6rmek isteyebilir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Bu y\u00fczden onlara zaman kazand\u0131rmak ve projelerinizin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc art\u0131rmak i\u00e7in, ki\u015fisel sitenize bu platformlardaki profillerinizin ba\u011flant\u0131lar\u0131n\u0131 ekleyin.<\/span><\/p>\n<h3 id=\"7-ozgecmis-ve-sosyal-medya-baglantilari\">7. \u00d6zge\u00e7mi\u015f ve Sosyal Medya Ba\u011flant\u0131lar\u0131<\/h3>\n<p><span style=\"font-weight: 400;\">Bir web geli\u015ftirici portf\u00f6y\u00fcn\u00fcz olsa bile, bir\u00e7ok i\u015fveren ya da m\u00fc\u015fteri \u00f6zge\u00e7mi\u015finizi g\u00f6rmek ister. Bu nedenle, sitenizden \u00f6zge\u00e7mi\u015finize a\u00e7\u0131k ve net bir ba\u011flant\u0131 vermek iyi bir fikirdir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Baz\u0131 geli\u015ftiriciler i\u015flerine dair i\u00e7erikleri sosyal medya \u00fczerinden de payla\u015f\u0131r. E\u011fer siz de \u00f6yleyseniz, bu profillerin ba\u011flant\u0131lar\u0131n\u0131 sitenize ekleyebilirsiniz.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ancak sosyal medya hesaplar\u0131n\u0131z i\u015finizle ilgili de\u011filse ya da profesyonel bir imaj yans\u0131tm\u0131yorsa, payla\u015fmaktan ka\u00e7\u0131n\u0131n.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Unutmay\u0131n, i\u015fe al\u0131m yapan ki\u015filer sizi muhtemelen yine de internette arayacakt\u0131r. Bu y\u00fczden istemedi\u011finiz profilleri gizleyebilir ya da i\u00e7eri\u011fini d\u00fczenleyebilirsiniz.<\/span><\/p>\n<h2 id=\"developerlarin-portfoyunde-olmasi-gereken-10-proje-turu\">Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-14460 size-full\" src=\"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/08\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu.jpeg\" alt=\"Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc\" width=\"1200\" height=\"675\" srcset=\"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/08\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu.jpeg 1200w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/08\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu-300x169.jpeg 300w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/08\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu-1024x576.jpeg 1024w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/08\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu-768x432.jpeg 768w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/08\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu-380x214.jpeg 380w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/08\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu-550x309.jpeg 550w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/08\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu-800x450.jpeg 800w, https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/08\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu-1160x653.jpeg 1160w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Developer\u2019lar\u0131n portf\u00f6ylerinde olmas\u0131 gereken \u00f6nemli proje t\u00fcrleri a\u015fa\u011f\u0131dakileri i\u00e7ermektedir:<\/span><\/p>\n<h3 id=\"1-interaktif-yapilacaklar-listesi-uygulamasi\">1. \u0130nteraktif Yap\u0131lacaklar Listesi Uygulamas\u0131<\/h3>\n<p><span style=\"font-weight: 400;\">Yap\u0131lacaklar listesi (To-Do List), \u00f6zellikle yeni ba\u015flayan geli\u015ftiriciler i\u00e7in en uygun ve temel projelerden biridir. Ancak sadeli\u011fine ra\u011fmen portf\u00f6yde yer almas\u0131 gereken \u00f6nemli bir projedir. \u00c7\u00fcnk\u00fc bu proje, sadece temel bir g\u00f6rev takip uygulamas\u0131 gibi g\u00f6r\u00fcnse de, bir geli\u015ftiricinin mant\u0131ksal d\u00fc\u015f\u00fcnme becerilerini, durum y\u00f6netimi konusundaki hakimiyetini ve kullan\u0131c\u0131 aray\u00fcz\u00fc tasar\u0131m\u0131 konusundaki yakla\u015f\u0131m\u0131n\u0131 g\u00f6sterir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Frontend k\u00fct\u00fcphaneleri (<a href=\"https:\/\/www.hosting.com.tr\/bilgi-bankasi\/react-js-nedir\/\">React<\/a>, Vue, vs.) kullan\u0131larak kolayca geli\u015ftirilebilir, ayn\u0131 zamanda veri ekleme, silme, d\u00fczenleme gibi CRUD i\u015flemlerini i\u00e7ermesi ile fonksiyonel a\u00e7\u0131dan da zengindir.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Ek olarak, veri saklama gibi temel ama \u00f6nemli bir konuyu da i\u00e7erdi\u011finden, uygulaman\u0131n sayfa yenilense bile g\u00fcncel kalmas\u0131n\u0131 sa\u011flar.<\/span><\/p>\n<p><b>Yap\u0131lacaklar Listesi Uygulamas\u0131n\u0131n \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Yap\u0131lacaklar listesindeki g\u00f6revleri ekleme, d\u00fczenleme, tamamlama veya silme gibi veri manip\u00fclasyon i\u015flemleri\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Y\u00f6netimi kolayla\u015ft\u0131rmak i\u00e7in g\u00f6revleri, \u00f6rne\u011fin i\u015f veya ki\u015fisel olarak kategorilere ay\u0131rmak i\u00e7in filtreler\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kal\u0131c\u0131 depolama i\u00e7in yerel depolama<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u0131ralama ve \u00f6ncelik belirleme \u00f6zellikleri<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Yap\u0131land\u0131rma ve \u015fekillendirme i\u00e7in HTML ve CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dinamiklik ve <a href=\"https:\/\/www.hosting.com.tr\/bilgi-bankasi\/dom-document-object-model\/\">DOM<\/a> manip\u00fclasyonu i\u00e7in React JavaScript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Depolama i\u00e7in yerel depolama API&#8217;si<\/span><\/li>\n<\/ul>\n<h3 id=\"2-hava-durumu-uygulamasi\">2. <b>Hava Durumu Uygulamas\u0131<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Front-end becerilerinizi g\u00f6stermek i\u00e7in yeni ba\u015flayanlara uygun bir ba\u015fka proje de hava durumu uygulamas\u0131d\u0131r. Bu uygulamay\u0131, ger\u00e7ek zamanl\u0131 veri almak i\u00e7in a\u00e7\u0131k hava durumu API&#8217;si gibi harici API&#8217;lerin yard\u0131m\u0131yla uygulayabilirsiniz.<\/span><\/p>\n<p><b>Hava Durumu Uygulamas\u0131n\u0131n \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Giri\u015f konumuna g\u00f6re ger\u00e7ek zamanl\u0131 veri getirme<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Farkl\u0131 \u00f6\u011feler, butonlar ve formlar i\u00e7in simgeler kullanan etkile\u015fimli kullan\u0131c\u0131 aray\u00fcz\u00fc<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Farkl\u0131 cihazlar i\u00e7in duyarl\u0131 d\u00fczenler<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Yap\u0131land\u0131rma ve \u015fekillendirme i\u00e7in HTML ve CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dinamiklik ve API entegrasyonu i\u00e7in React JavaScript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A\u00e7\u0131k hava durumu API&#8217;si gibi harici API&#8217;ler<\/span><\/li>\n<\/ul>\n<h3 id=\"3-responsive-landing-page\">3. <b>Responsive Landing Page<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Responsive a\u00e7\u0131l\u0131\u015f sayfas\u0131, bir geli\u015ftiricinin hem tasar\u0131m hem de teknik becerilerini sergileyebilece\u011fi temel projelerden biridir. Kullan\u0131c\u0131lar\u0131n bir web sitesine ilk giri\u015fte kar\u015f\u0131la\u015ft\u0131\u011f\u0131 bu sayfa, siteyle ilgili ilk izlenimi belirler ve kullan\u0131c\u0131y\u0131 y\u00f6nlendirme a\u00e7\u0131s\u0131ndan kritik bir rol oynar. Bu projeyi portf\u00f6y\u00fcn\u00fczde bulundurman\u0131z, mobil ve masa\u00fcst\u00fc cihazlara uyumlu tasar\u0131m yapabildi\u011finizi; HTML, CSS ve JavaScript gibi temel web teknolojilerini etkili \u015fekilde kulland\u0131\u011f\u0131n\u0131z\u0131 g\u00f6sterir. Ayn\u0131 zamanda kullan\u0131c\u0131 odakl\u0131 d\u00fc\u015f\u00fcnme, sezgisel aray\u00fcz olu\u015fturma ve modern web tasar\u0131m\u0131 ilkelerine h\u00e2kimiyetinizi de yans\u0131t\u0131r.\u00a0<\/span><\/p>\n<p><b>Landing Page \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Animasyonlar ve slider<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00c7e\u015fitli cihazlarda kullanmak i\u00e7in duyarl\u0131 d\u00fczen<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Butonlar, formlar, kartlar vb. gibi etkile\u015fimli \u00f6\u011feler<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Temel yap\u0131 i\u00e7in HTML<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Duyarl\u0131l\u0131k i\u00e7in CSS Grid\/Flexbox<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dinamikli\u011fi dahil etmek i\u00e7in React.Js<\/span><\/li>\n<\/ul>\n<h3 id=\"4-kisisel-portfoy\">4. <b>Ki\u015fisel Portf\u00f6y<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bir portf\u00f6y web sitesi, teknik becerilerinizi ve alan bilginizi sergilemek a\u00e7\u0131s\u0131ndan son derece de\u011ferlidir. Bu t\u00fcr bir web sitesinde; e\u011fitim ge\u00e7mi\u015finiz, projeleriniz, elde etti\u011finiz ba\u015far\u0131lar ve sizi profesyonel olarak tan\u0131mlayan di\u011fer detaylara yer verebilirsiniz. \u0130\u015f ba\u015fvurusu yapt\u0131\u011f\u0131n\u0131zda, bu portf\u00f6y i\u015fe al\u0131m uzmanlar\u0131n\u0131n sizi daha yak\u0131ndan tan\u0131mas\u0131na ve teknik yeterlili\u011finizi de\u011ferlendirmesine yard\u0131mc\u0131 olur. WordPress gibi i\u00e7erik y\u00f6netim sistemleri sayesinde dijital bir portf\u00f6y olu\u015fturmak olduk\u00e7a kolayla\u015fm\u0131\u015f olsa da, HTML, CSS ve JavaScript gibi front-end teknolojilerini kullanarak s\u0131f\u0131rdan kendi sitenizi tasarlamak, teknik yetkinli\u011finizi do\u011frudan ortaya koyar. Kendi elinizle geli\u015ftirdi\u011finiz bir portf\u00f6y, hem kodlama becerilerinizi hem de kullan\u0131c\u0131 deneyimi ve tasar\u0131m konusundaki yakla\u015f\u0131m\u0131n\u0131z\u0131 a\u00e7\u0131k bir \u015fekilde yans\u0131t\u0131r.<\/span><\/p>\n<p><b>Ki\u015fisel Portf\u00f6y Web Sitesinin \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Proje vitrini b\u00f6l\u00fcm\u00fc<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hakk\u0131mda b\u00f6l\u00fcm\u00fc<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0130leti\u015fim formu<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sosyal medya ba\u011flant\u0131lar\u0131<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Stil olu\u015fturma i\u00e7in HTML ve CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dinamiklik ve etkile\u015fimli \u00f6\u011feler eklemek i\u00e7in React.Js<\/span><\/li>\n<\/ul>\n<h3 id=\"5-gercek-zamanli-sohbet-uygulamasi\">5. <b>Ger\u00e7ek Zamanl\u0131 Sohbet Uygulamas\u0131<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Ger\u00e7ek zamanl\u0131 bir sohbet uygulamas\u0131, front-end becerilerinizi g\u00f6stermenize yard\u0131mc\u0131 olabilecek kapsaml\u0131 bir projedir. Bunu Node Js gibi Backend teknolojileri ile entegre ederseniz, eksiksiz bir web geli\u015ftirme projesi olu\u015fturdu\u011funuzu g\u00f6sterebilirsiniz.<\/span><\/p>\n<p><b>Ger\u00e7ek Zamanl\u0131 Sohbet Uygulamas\u0131n\u0131n \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sezgisel kullan\u0131c\u0131 aray\u00fcz\u00fc<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mesajla\u015fma yoluyla ger\u00e7ek zamanl\u0131 ileti\u015fim<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kullan\u0131c\u0131 kimlik do\u011frulama &#8211; oturum a\u00e7ma veya kay\u0131t ekranlar\u0131<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc geli\u015ftirmek i\u00e7in HTML ve CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mesaj i\u015fleme i\u00e7in JavaScript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ger\u00e7ek zamanl\u0131 veri aktar\u0131m\u0131 i\u00e7in Socket.io<\/span><\/li>\n<\/ul>\n<h3 id=\"6-dinamik-veri-gorsellestirme-panosu\">6. <b>Dinamik Veri G\u00f6rselle\u015ftirme Panosu<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bu proje, g\u00f6rselle\u015ftirme ve veri analizi dokunu\u015fu ekleyerek front-end geli\u015ftirme becerilerinizi geli\u015ftirmenizi g\u00f6stemenize yard\u0131mc\u0131 olur. Python gibi \u00e7ok y\u00f6nl\u00fc dillerle entegre edebildi\u011finizi ve \u00f6l\u00e7eklenebilir hale getirebilece\u011finiz benzersiz front-end projelerinden biridir.<\/span><\/p>\n<p><b>G\u00f6sterge Tablosunun \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Veri filtreleme ve s\u0131ralama<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00d6zetleme i\u00e7in interaktif grafikler<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ger\u00e7ek zamanl\u0131 veri g\u00fcncellemeleri<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Stil olu\u015fturma i\u00e7in HTML ve CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dinamiklik ve etkile\u015fimli \u00f6\u011feler eklemek i\u00e7in React.Js<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Grafikler ve \u00e7izelgeler i\u00e7in Chart.js veya D3.js<\/span><\/li>\n<\/ul>\n<h3 id=\"7-blog-veya-galeri\">7. <b>Blog veya Galeri<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">G\u00fcn\u00fcm\u00fczde dinamik web siteleri, sunduklar\u0131 etkile\u015fim ve yan\u0131t verebilirlik sayesinde, statik sayfalara k\u0131yasla kullan\u0131c\u0131lar\u0131n dikkatini \u00e7ekmede \u00e7ok daha etkilidir. Bu t\u00fcr sitelerde s\u0131k\u00e7a kullan\u0131lan sonsuz kayd\u0131rma efekti (infinite scroll) gibi \u00f6zellikler, kullan\u0131c\u0131 deneyimini geli\u015ftirir ve sayfan\u0131n s\u00fcrekli aktif kalmas\u0131n\u0131 sa\u011flar. Bu efekt genellikle JavaScript kullan\u0131larak uygulan\u0131r.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Bu nedenle, front-end geli\u015ftirme alan\u0131nda g\u00fc\u00e7l\u00fc bir portf\u00f6y olu\u015fturmak istiyorsan\u0131z, bu t\u00fcr projelerde JavaScript becerilerinizi mutlaka sergilemeniz gerekir. Blog veya galeri gibi dinamik i\u00e7erik sunan projeler, sadece teknik yetkinli\u011finizi g\u00f6stermekle kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131 odakl\u0131 d\u00fc\u015f\u00fcnme bi\u00e7iminizi de ortaya koyar.<\/span><\/p>\n<p><b>Infinite Scroll Blog&#8217;un \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sorunsuz etkile\u015fim i\u00e7in sonsuz kayd\u0131rma efekti<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">API veya yerel verilerden dinamik i\u00e7erik y\u00fckleme<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sayfaland\u0131rma ve tembel y\u00fckleme<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Stil ve yap\u0131 i\u00e7in HTML ve CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mant\u0131k, API i\u015fleme ve olay y\u00f6netimi i\u00e7in JavaScript<\/span><\/li>\n<\/ul>\n<h3 id=\"8-video-oynatma-arayuzu\">8. <b>Video Oynatma Aray\u00fcz\u00fc<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Bu proje, kullan\u0131c\u0131lar\u0131n bir video dosyas\u0131n\u0131 oynatma, duraklatma, ileri sarma gibi temel medya kontrollerini ger\u00e7ekle\u015ftirmesine olanak tan\u0131r. Teknik olarak basit gibi g\u00f6r\u00fcnse de, bu t\u00fcr bir uygulama, kullan\u0131c\u0131 etkile\u015fimini y\u00f6neten i\u015flevlerin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6sterdi\u011fi i\u00e7in front-end portf\u00f6y\u00fcn\u00fczde yer almas\u0131 gereken etkili projelerden biridir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Bu projeyi olu\u015fturmak i\u00e7in genellikle HTML, CSS ve JavaScript\u2019ten olu\u015fan temel bir teknoloji y\u0131\u011f\u0131n\u0131 yeterlidir. \u00d6zellikle JavaScript ile medya API\u2019lerini kullanarak kullan\u0131c\u0131 odakl\u0131 kontrolleri nas\u0131l y\u00f6netti\u011finizi sergilemeniz, teknik becerilerinizin g\u00fc\u00e7l\u00fc bir g\u00f6stergesi olacakt\u0131r. G\u00f6rsel d\u00fczen, etkile\u015fimli butonlar ve zaman \u00e7ubu\u011fu gibi detaylar sayesinde bu proje hem tasar\u0131m hem fonksiyon a\u00e7\u0131s\u0131ndan portf\u00f6y\u00fcn\u00fcze de\u011fer katar.<\/span><\/p>\n<p><b>Oynatma Aray\u00fcz\u00fcn\u00fcn \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00d6zel kontroller<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Duyarl\u0131 d\u00fczen<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tam ekran ge\u00e7i\u015fi<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Stil ve yap\u0131 i\u00e7in HTML ve CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kontrol y\u00f6netimi i\u00e7in JavaScript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Veri getiren ve multimedya oynatan HTML5 Video API<\/span><\/li>\n<\/ul>\n<h3 id=\"9-mevcut-bir-web-sitesini-yeniden-tasarlama\">9. <b>Mevcut Bir Web Sitesini Yeniden Tasarlama<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Portf\u00f6y\u00fcn\u00fczde olmas\u0131 gereken front-end projelerinden biri de, mevcut bir web sitesini kendi dokunu\u015funuzu katarak yeniden tasarlamak ve geli\u015ftirmektir.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Bu proje t\u00fcr\u00fc, HTML, CSS ve JavaScript veya se\u00e7ti\u011finiz programlama dillerini kullanarak sitenin aray\u00fcz\u00fcn\u00fc nas\u0131l daha iyi hale getirebilece\u011finiz konusunda yeni bir bak\u0131\u015f a\u00e7\u0131s\u0131yla d\u00fc\u015f\u00fcnmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z\u0131 g\u00f6sterir.<\/span><\/p>\n<p><b>Projenin \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kullan\u0131c\u0131 deneyimini geli\u015ftirmek i\u00e7in benzersiz \u00f6zellikler\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kullan\u0131c\u0131lar\u0131n ilgisini \u00e7ekmek i\u00e7in duyarl\u0131 d\u00fczen<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Eski g\u00f6revlerin yenilenmesi ve kullan\u0131c\u0131 ak\u0131\u015f\u0131n\u0131n iyile\u015ftirilmesi<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Stil ve yap\u0131 i\u00e7in HTML ve CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">JavaScript&#8217;in genel mant\u0131\u011f\u0131 ve dinamikli\u011fi<\/span><\/li>\n<\/ul>\n<h3 id=\"10-quiz-uygulamasi\">10. <b>Quiz Uygulamas\u0131<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Front-end geli\u015ftirme becerilerinizi g\u00f6sterecek bir ba\u015fka proje de bir Quiz uygulamas\u0131 olu\u015fturmakt\u0131r. Her soru i\u00e7in birden fazla se\u00e7enek i\u00e7eren ilgi \u00e7ekici bir aray\u00fcz olu\u015fturaca\u011f\u0131n\u0131z bu proje ile kullan\u0131c\u0131lar cevaplar\u0131n\u0131 se\u00e7ebilir ve an\u0131nda geri bildirim alabilirler.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sorular\u0131n\u0131z\u0131 proje boyutuna ba\u011fl\u0131 olarak bir CSV dosyas\u0131nda veya JSON format\u0131nda saklayabilirsiniz. Kullan\u0131c\u0131 etkile\u015fimlerini daha e\u011flenceli ve yarat\u0131c\u0131 hale getirmek i\u00e7in etkile\u015fimli avatarlar ve a\u00e7\u0131l\u0131r pencereler kullanabilirsiniz.<\/span><\/p>\n<p><b>Quiz Uygulamas\u0131n\u0131n \u00d6zellikleri<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Animasyonlar kullanarak oyunla\u015ft\u0131rma<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">An\u0131nda geri bildirim<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Her soruyu cevaplamak i\u00e7in zamanlay\u0131c\u0131<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Skor takibi<\/span><\/li>\n<\/ul>\n<p><b>Kullan\u0131lan Teknoloji<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Stil ve yap\u0131 i\u00e7in HTML ve CSS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u0131nav mant\u0131\u011f\u0131 i\u00e7in JavaScript<\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Bir geli\u015ftiriciyseniz, developer portf\u00f6y\u00fc, bir i\u015fe girerken ya da bir projede \u00e7al\u0131\u015fmak istedi\u011finizde, \u00f6zge\u00e7mi\u015finizin yan\u0131nda potansiyel i\u015fverenlere sunman\u0131z&hellip;\n","protected":false},"author":20,"featured_media":14458,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_appearance_grid":"","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_location_hash":"","csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0,"footnotes":""},"categories":[346],"tags":[],"class_list":{"0":"post-14395","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-yazilim-programlama","8":"cs-entry","9":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc - Hosting.com.tr<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc - Hosting.com.tr\" \/>\n<meta property=\"og:description\" content=\"Bir geli\u015ftiriciyseniz, developer portf\u00f6y\u00fc, bir i\u015fe girerken ya da bir projede \u00e7al\u0131\u015fmak istedi\u011finizde, \u00f6zge\u00e7mi\u015finizin yan\u0131nda potansiyel i\u015fverenlere sunman\u0131z&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hosting.com.tr\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-11T03:38:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-12T07:51:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sibel Ho\u015f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hostingcomtr\" \/>\n<meta name=\"twitter:site\" content=\"@hostingcomtr\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sibel Ho\u015f\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc - Hosting.com.tr","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:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/","og_locale":"tr_TR","og_type":"article","og_title":"Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc - Hosting.com.tr","og_description":"Bir geli\u015ftiriciyseniz, developer portf\u00f6y\u00fc, bir i\u015fe girerken ya da bir projede \u00e7al\u0131\u015fmak istedi\u011finizde, \u00f6zge\u00e7mi\u015finizin yan\u0131nda potansiyel i\u015fverenlere sunman\u0131z&hellip;","og_url":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/hosting.com.tr","article_published_time":"2025-08-11T03:38:21+00:00","article_modified_time":"2026-05-12T07:51:27+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu.jpeg","type":"image\/jpeg"}],"author":"Sibel Ho\u015f","twitter_card":"summary_large_image","twitter_creator":"@hostingcomtr","twitter_site":"@hostingcomtr","twitter_misc":{"Yazan:":"Sibel Ho\u015f","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/#article","isPartOf":{"@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/"},"author":{"name":"Sibel Ho\u015f","@id":"https:\/\/www.hosting.com.tr\/blog\/#\/schema\/person\/769feb953535a36d98b2d05f5e3e1b73"},"headline":"Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc","datePublished":"2025-08-11T03:38:21+00:00","dateModified":"2026-05-12T07:51:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/"},"wordCount":2648,"commentCount":0,"publisher":{"@id":"https:\/\/www.hosting.com.tr\/blog\/#organization"},"image":{"@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu.jpeg","articleSection":["Yaz\u0131l\u0131m &amp; Programlama"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/","url":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/","name":"Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc - Hosting.com.tr","isPartOf":{"@id":"https:\/\/www.hosting.com.tr\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/#primaryimage"},"image":{"@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu.jpeg","datePublished":"2025-08-11T03:38:21+00:00","dateModified":"2026-05-12T07:51:27+00:00","breadcrumb":{"@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/#primaryimage","url":"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu.jpeg","contentUrl":"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/07\/developerlarin-portfoyunde-olmasi-gereken-10-proje-turu.jpeg","width":1200,"height":675,"caption":"Bir developer portf\u00f6y\u00fc i\u00e7in proje haz\u0131rlayan iki yaz\u0131l\u0131mc\u0131. Biri laptopla kod yazarken di\u011feri mobil aray\u00fcze g\u00f6rsel bir bile\u015fen yerle\u015ftiriyor. Arka planda HTML ve CSS kodlar\u0131 yer al\u0131yor."},{"@type":"BreadcrumbList","@id":"https:\/\/www.hosting.com.tr\/blog\/developer-portfoyunde-olmasi-gereken-proje-turleri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.hosting.com.tr\/blog\/"},{"@type":"ListItem","position":2,"name":"Yaz\u0131l\u0131m &amp; Programlama","item":"https:\/\/www.hosting.com.tr\/blog\/yazilim-programlama\/"},{"@type":"ListItem","position":3,"name":"Developerlar\u0131n Portf\u00f6y\u00fcnde Olmas\u0131 Gereken 10 Proje T\u00fcr\u00fc"}]},{"@type":"WebSite","@id":"https:\/\/www.hosting.com.tr\/blog\/#website","url":"https:\/\/www.hosting.com.tr\/blog\/","name":"Hosting.com.tr","description":"Domain, Hosting, Startup\/Kobi, Dijital Pazarlama, Teknoloji, Wordpress ve Nas\u0131l Yap\u0131l\u0131r? kategorilerinde en g\u00fcncel yaz\u0131lar.","publisher":{"@id":"https:\/\/www.hosting.com.tr\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hosting.com.tr\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/www.hosting.com.tr\/blog\/#organization","name":"Webhosting A.\u015e","url":"https:\/\/www.hosting.com.tr\/blog\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.hosting.com.tr\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/04\/hosting-logo.png","contentUrl":"https:\/\/www.hosting.com.tr\/blog\/wp-content\/uploads\/2025\/04\/hosting-logo.png","width":500,"height":157,"caption":"Webhosting A.\u015e"},"image":{"@id":"https:\/\/www.hosting.com.tr\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hosting.com.tr","https:\/\/x.com\/hostingcomtr","https:\/\/instagram.com\/hostingcomtr","https:\/\/www.linkedin.com\/company\/hosting-com-tr\/","https:\/\/www.youtube.com\/channel\/UCFNJq7pU_T2SEjv7UgLDtRw"]},{"@type":"Person","@id":"https:\/\/www.hosting.com.tr\/blog\/#\/schema\/person\/769feb953535a36d98b2d05f5e3e1b73","name":"Sibel Ho\u015f","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.hosting.com.tr\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/71ef095ec76abd2cd680813a0851c643003d6b211003d0d1b5eb4d0e6f04caa6?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/71ef095ec76abd2cd680813a0851c643003d6b211003d0d1b5eb4d0e6f04caa6?s=96&r=g","caption":"Sibel Ho\u015f"},"url":"https:\/\/www.hosting.com.tr\/blog\/author\/sibel\/"}]}},"_links":{"self":[{"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/posts\/14395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/comments?post=14395"}],"version-history":[{"count":4,"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/posts\/14395\/revisions"}],"predecessor-version":[{"id":14625,"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/posts\/14395\/revisions\/14625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/media\/14458"}],"wp:attachment":[{"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/media?parent=14395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/categories?post=14395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hosting.com.tr\/blog\/wp-json\/wp\/v2\/tags?post=14395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}