30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m<\/title>\n<meta name=\"description\" content=\"Merhaba! Bu yaz\u0131da, pop\u00fcler "#30Days30Projects" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.\" \/>\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\/30-html-css-ve-javascript-projesi-3-kisim\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Bu yaz\u0131da, pop\u00fcler "#30Days30Projects" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-19T01:15:09+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=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m\",\"datePublished\":\"2025-02-19T01:15:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\"},\"wordCount\":523,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\",\"name\":\"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-02-19T01:15:09+00:00\",\"description\":\"Merhaba! Bu yaz\u0131da, pop\u00fcler \\\"#30Days30Projects\\\" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m\"}]},{\"@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_head_json":{"title":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m","description":"Merhaba! Bu yaz\u0131da, pop\u00fcler \"#30Days30Projects\" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.","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\/30-html-css-ve-javascript-projesi-3-kisim\/","og_locale":"tr_TR","og_type":"article","og_title":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m","og_description":"Merhaba! Bu yaz\u0131da, pop\u00fcler \"#30Days30Projects\" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-02-19T01:15:09+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m","datePublished":"2025-02-19T01:15:09+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/"},"wordCount":523,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/","url":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/","name":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-02-19T01:15:09+00:00","description":"Merhaba! Bu yaz\u0131da, pop\u00fcler \"#30Days30Projects\" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m"}]},{"@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\/12887","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=12887"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/12887\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=12887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=12887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=12887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":12887,"date":"2025-02-19T04:15:09","date_gmt":"2025-02-19T01:15:09","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/"},"modified":"2025-02-19T04:15:09","modified_gmt":"2025-02-19T01:15:09","slug":"30-html-css-ve-javascript-projesi-3-kisim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/","title":{"rendered":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m"},"content":{"rendered":"

<\/p>\n

30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m<\/p>\n

Merhaba! Bu yaz\u0131da, pop\u00fcler “#30Days30Projects” etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.<\/p>\n

Proje \u00d6rnekleri ve Detayl\u0131 A\u00e7\u0131klamalar<\/h2>\n
Bu b\u00f6l\u00fcmde, [Dev.to’daki orijinal makaleye](https:\/\/dev.to\/km-js\/30-creative-projects-created-with-html-css-and-javascript-part-3-30days30projects-51ci) dayal\u0131 olarak baz\u0131 projeleri detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Bunlar aras\u0131nda; interaktif bir kart oyunu, dinamik bir hava durumu uygulamas\u0131 ve geli\u015fmi\u015f bir form tasar\u0131m\u0131 gibi projeler bulunmaktad\u0131r.<\/p>\n

Interaktif Kart Oyunu<\/h3>\n

Bu projede, kullan\u0131c\u0131n\u0131n kartlar\u0131 s\u00fcr\u00fckle b\u0131rak mekanizmas\u0131 ile oynayabilece\u011fi basit bir kart oyunu geli\u015ftirebilirsiniz. HTML ile kartlar\u0131n yap\u0131s\u0131n\u0131, CSS ile g\u00f6rsel tasar\u0131m\u0131n\u0131 ve JavaScript ile oyun mant\u0131\u011f\u0131n\u0131 ve interaktifli\u011fi sa\u011flars\u0131n\u0131z. \u00d6rne\u011fin, bir e\u015fle\u015ftirme oyunu veya basit bir poker oyunu tasarlayabilirsiniz. Bu projede \u00f6zellikle JavaScript’in event listener ve DOM manip\u00fclasyonu becerilerinizi geli\u015ftireceksiniz. <\/p>\n

\n\/\/ \u00d6rnek JavaScript kodu (S\u00fcr\u00fckle b\u0131rak i\u015flemi i\u00e7in)\nlet card = document.querySelector('.card');\ncard.addEventListener('dragstart', (event) => {\n  event.dataTransfer.setData('text\/plain', event.target.id);\n});\n<\/code><\/pre>\nDinamik Hava Durumu Uygulamas\u0131<\/h3>\nBu proje,  kullan\u0131c\u0131n\u0131n \u015fehir ad\u0131n\u0131 girerek hava durumunu g\u00f6rebilece\u011fi bir uygulama geli\u015ftirmeyi kapsar.  Bu uygulamada,  bir hava durumu API’si kullanarak verileri \u00e7ekmeniz gerekecektir.  HTML ile aray\u00fcz\u00fc,  CSS ile g\u00f6rsel tasar\u0131m\u0131 ve JavaScript ile API \u00e7a\u011fr\u0131lar\u0131 ve verilerin i\u015flenmesini ger\u00e7ekle\u015ftirirsiniz.  Sonras\u0131nda  veriyi kullan\u0131c\u0131ya anlaml\u0131 bir \u015fekilde sunman\u0131z \u00f6nemlidir.  Bu projede,  API entegrasyonu ve veri i\u015fleme konular\u0131nda tecr\u00fcbe kazanacaks\u0131n\u0131z.<\/p>\n
Geli\u015fmi\u015f Form Tasar\u0131m\u0131<\/h3>\nSon olarak,  geli\u015fmi\u015f \u00f6zelliklere sahip bir form tasarlayabilirsiniz.  Bu formda,  form do\u011frulama,  geribildirim mesajlar\u0131,  dinamik alanlar ve geli\u015fmi\u015f stiller gibi \u00f6zellikler bulunabilir.  HTML ile form elemanlar\u0131n\u0131,  CSS ile g\u00f6rsel tasar\u0131m\u0131 ve JavaScript ile form do\u011frulama ve dinamik davran\u0131\u015flar\u0131  sa\u011flayabilirsiniz.  Bu projede,  HTML form elemanlar\u0131n\u0131 ve JavaScript’in form do\u011frulama  fonksiyonlar\u0131n\u0131 iyi kavraman\u0131z gerekiyor.   \u0130yi bir kullan\u0131c\u0131 deneyimi sa\u011flamak i\u00e7in de kullan\u0131c\u0131 geri bildirimlerini etkili kullanmal\u0131s\u0131n\u0131z. <\/p>\n
Sonu\u00e7<\/h2>\nBu 3. k\u0131s\u0131m, HTML, CSS ve JavaScript ile daha karma\u015f\u0131k projeler geli\u015ftirmenize yard\u0131mc\u0131 olmay\u0131 ama\u00e7lad\u0131.   Daha fazla proje fikri ve kaynak i\u00e7in  [web sitemi](https:\/\/fatihsoysal.com) ziyaret edebilirsiniz.  Unutmay\u0131n,  pratik yapmak,  becerilerinizi geli\u015ftirmenin en iyi yoludur!  Ba\u015far\u0131lar!<\/p>\n
Not:<\/b>  Bu makaledeki kod \u00f6rnekleri,  tamamen i\u015flevsel projeler olu\u015fturmak i\u00e7in yeterli de\u011fildir.  Bunlar sadece size fikir vermesi ve  proje geli\u015ftirme s\u00fcrecinde size yard\u0131mc\u0131 olmas\u0131 i\u00e7indir. Daha kapsaml\u0131  \u00f6rnekler ve a\u00e7\u0131klamalar i\u00e7in l\u00fctfen  yukar\u0131da verilen kaynaklara ve  di\u011fer online e\u011fitim kaynaklar\u0131na bakabilirsiniz.<\/p>\n
#Etiketler: HTML, CSS, JavaScript, web geli\u015ftirme, proje, 30days30projects, kodlama, tutorial, e\u011fitim, interaktif, API, form, hava durumu, kart oyunu,  Fatih Soysal<\/p>\n
<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m Merhaba! Bu yaz\u0131da, pop\u00fcler “#30Days30Projects” etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak…","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-12887","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m<\/title>\n<meta name=\"description\" content=\"Merhaba! Bu yaz\u0131da, pop\u00fcler "#30Days30Projects" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.\" \/>\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\/30-html-css-ve-javascript-projesi-3-kisim\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Bu yaz\u0131da, pop\u00fcler "#30Days30Projects" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-19T01:15:09+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=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m\",\"datePublished\":\"2025-02-19T01:15:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\"},\"wordCount\":523,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\",\"name\":\"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-02-19T01:15:09+00:00\",\"description\":\"Merhaba! Bu yaz\u0131da, pop\u00fcler \\\"#30Days30Projects\\\" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m\"}]},{\"@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":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m","description":"Merhaba! Bu yaz\u0131da, pop\u00fcler \"#30Days30Projects\" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.","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\/30-html-css-ve-javascript-projesi-3-kisim\/","og_locale":"tr_TR","og_type":"article","og_title":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m","og_description":"Merhaba! Bu yaz\u0131da, pop\u00fcler \"#30Days30Projects\" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-02-19T01:15:09+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m","datePublished":"2025-02-19T01:15:09+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/"},"wordCount":523,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/","url":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/","name":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-02-19T01:15:09+00:00","description":"Merhaba! Bu yaz\u0131da, pop\u00fcler \"#30Days30Projects\" etkinli\u011finin \u00fc\u00e7\u00fcnc\u00fc k\u0131sm\u0131n\u0131 ele alarak HTML, CSS ve JavaScript ile yarat\u0131c\u0131 projeler olu\u015fturma serisine devam ediyoruz. \u00d6nceki b\u00f6l\u00fcmlerde temelleri atm\u0131\u015ft\u0131k. \u015eimdi ise daha karma\u015f\u0131k ve etkileyici projeler \u00fczerinde \u00e7al\u0131\u015faca\u011f\u0131z. Bu serideki amac\u0131m, temel web geli\u015ftirme becerilerinizi geli\u015ftirmenize ve pratik yapman\u0131za yard\u0131mc\u0131 olmakt\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/30-html-css-ve-javascript-projesi-3-kisim\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"30 HTML, CSS ve JavaScript Projesi: 3. K\u0131s\u0131m"}]},{"@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\/12887","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=12887"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/12887\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=12887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=12887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=12887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}