[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-category-front-end-mini-ornekler":3},{"dataList":4,"heading":96,"dataCount":99,"metaData":100,"schema":146},["Reactive",5],[6,26,38,50,62,74,86],{"id":7,"title":8,"summary":9,"slug":10,"createdAt":11,"updatedAt":11,"blog_categories":12,"authors":16,"image":21,"thumb":22,"image_webp":23,"thumb_webp":24,"rating":25},32117,"Başlangıç Seviyesi Front-end Kombinasyonları ile Web Geliştirmeye Adım Atın","Bu yazıda, \u003Cstrong>front-end mini projeler\u003C/strong> ile \u003Cstrong>web geliştirme başlangıç\u003C/strong> seviyesinde nasıl ilerleyebileceğinizi, \u003Cstrong>HTML CSS JS örnekleri\u003C/strong> ile desteklenen pratik kombinasyonları keşfedin.","/blog/front-end-mini-ornekler/baslangic-seviyesi-front-end-kombinasyonlari-ile-web-gelistirmeye-adim-atin","2026-05-06T19:32:30.000Z",{"id":13,"title":14,"slug":15},222,"Front-end Mini Örnekler","front-end-mini-ornekler",{"id":17,"name":18,"nickname":19,"slug":20},95,"Emre Yalçın","CodeCrafter","emre-yalcin","cc5006205f7e2401ee5e2e56eca2221a.jpg","cc5006205f7e2401ee5e2e56eca2221a_thumb.jpg","cc5006205f7e2401ee5e2e56eca2221a.webp","cc5006205f7e2401ee5e2e56eca2221a_thumb.webp",null,{"id":27,"title":28,"summary":29,"slug":30,"createdAt":31,"updatedAt":31,"blog_categories":32,"authors":33,"image":34,"thumb":35,"image_webp":36,"thumb_webp":37,"rating":25},23178,"HTML, CSS ve JavaScript ile Şık Mini Kart Tasarımı Nasıl Yapılır?","Bu yazıda, HTML, CSS ve JavaScript kullanarak etkileyici ve işlevsel bir mini kart tasarımının adım adım nasıl oluşturulacağını öğreneceksiniz. Front-end projeleriniz için ideal bir mini proje örneği sunuyoruz.","/blog/front-end-mini-ornekler/html-css-ve-javascript-ile-sik-mini-kart-tasarimi-nasil-yapilir","2026-03-24T18:36:34.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"10e92523bf2ccda8b369d4e7afad8a13.jpg","10e92523bf2ccda8b369d4e7afad8a13_thumb.jpg","10e92523bf2ccda8b369d4e7afad8a13.webp","10e92523bf2ccda8b369d4e7afad8a13_thumb.webp",{"id":39,"title":40,"summary":41,"slug":42,"createdAt":43,"updatedAt":43,"blog_categories":44,"authors":45,"image":46,"thumb":47,"image_webp":48,"thumb_webp":49,"rating":25},23028,"Üçlü Düğme Etkileşimli Mini Uygulama ile Front-end Becerilerinizi Geliştirin","Bu yazıda, HTML, CSS ve JavaScript kullanarak oluşturulan üçlü düğme etkileşimli mini uygulamanın detaylarını keşfedin. Front-end geliştirme için ideal bir örnek olan bu mini uygulama, düğme etkileşimleri ve CSS animasyonlarıyla zenginleştirilmiştir.","/blog/front-end-mini-ornekler/uclu-dugme-etkilesimli-mini-uygulama-ile-front-end-becerilerinizi-gelistirin","2026-03-23T02:52:45.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"6bb7fe75c0f7cc437fc7b5d764679d76.jpg","6bb7fe75c0f7cc437fc7b5d764679d76_thumb.jpg","6bb7fe75c0f7cc437fc7b5d764679d76.webp","6bb7fe75c0f7cc437fc7b5d764679d76_thumb.webp",{"id":51,"title":52,"summary":53,"slug":54,"createdAt":55,"updatedAt":55,"blog_categories":56,"authors":57,"image":58,"thumb":59,"image_webp":60,"thumb_webp":61,"rating":25},20475,"HTML, CSS ve JS ile Mini Projeler: Ön Yüz Geliştirmede Pratik Yaklaşımlar","HTML, CSS ve JavaScript kullanarak oluşturabileceğiniz mini projelerle ön yüz geliştirme becerilerinizi geliştirin. Bu yazıda, basit ama etkili örneklerle kodlama pratiği yapmanın yollarını keşfedin.","/blog/front-end-mini-ornekler/html-css-ve-js-ile-mini-projeler-on-yuz-gelistirmede-pratik-yaklasimlar","2026-03-04T03:42:35.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"3107a0555e3a055eaf8cb9525b0525cc.jpg","3107a0555e3a055eaf8cb9525b0525cc_thumb.jpg","3107a0555e3a055eaf8cb9525b0525cc.webp","3107a0555e3a055eaf8cb9525b0525cc_thumb.webp",{"id":63,"title":64,"summary":65,"slug":66,"createdAt":67,"updatedAt":67,"blog_categories":68,"authors":69,"image":70,"thumb":71,"image_webp":72,"thumb_webp":73,"rating":25},20402,"Başlangıç İçin Etkileşimli Front-end Örnekleri: HTML, CSS ve JS ile Mini Projeye","Bu yazıda, \u003Cstrong>başlangıç front-end\u003C/strong> öğrenenler için \u003Cstrong>etkileşimli örnek projeler\u003C/strong> sunuyoruz. \u003Cstrong>HTML CSS JS birleşik\u003C/strong> mini projelerle \u003Cstrong>web kod snippetleri\u003C/strong> nasıl oluşturulur, detaylarıyla anlatıyoruz.","/blog/front-end-mini-ornekler/baslangic-icin-etkilesimli-front-end-ornekleri-html-css-ve-js-ile-mini-projeye","2026-03-03T09:40:00.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"563bc92863dc2ec8ae3616371b6ab717.jpg","563bc92863dc2ec8ae3616371b6ab717_thumb.jpg","563bc92863dc2ec8ae3616371b6ab717.webp","563bc92863dc2ec8ae3616371b6ab717_thumb.webp",{"id":75,"title":76,"summary":77,"slug":78,"createdAt":79,"updatedAt":79,"blog_categories":80,"authors":81,"image":82,"thumb":83,"image_webp":84,"thumb_webp":85,"rating":25},13544,"Pratik HTML, CSS ve JS Mini Projeleri ile Front-end Becerilerinizi Geliştirin","HTML mini projeler, CSS tasarım örnekleri ve JS etkileşim kodları ile front-end dünyasında pratik yaparak yeteneklerinizi artırabilirsiniz. Bu yazıda, birleşik mini projelerle nasıl hızlıca öğrenebileceğinizi keşfedin.","/blog/front-end-mini-ornekler/pratik-html-css-ve-js-mini-projeleri-ile-front-end-becerilerinizi-gelistirin","2026-01-31T23:49:30.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"d979eb33e1d262fc6d8ab3378643595d.jpg","d979eb33e1d262fc6d8ab3378643595d_thumb.jpg","d979eb33e1d262fc6d8ab3378643595d.webp","d979eb33e1d262fc6d8ab3378643595d_thumb.webp",{"id":87,"title":64,"summary":88,"slug":66,"createdAt":89,"updatedAt":89,"blog_categories":90,"authors":91,"image":92,"thumb":93,"image_webp":94,"thumb_webp":95,"rating":25},4538,"Bu yazıda, \u003Cstrong>başlangıç front-end\u003C/strong> öğrenenler için \u003Cstrong>etkileşimli örnek projeler\u003C/strong> sunuyoruz. \u003Cstrong>HTML CSS JS birleşik\u003C/strong> mini projelerle \u003Cstrong>web kod snippetleri\u003C/strong> nasıl oluşturulur, adım adım anlatıyoruz.","2025-11-24T05:04:08.000Z",{"id":13,"title":14,"slug":15},{"id":17,"name":18,"nickname":19,"slug":20},"5d3e8caecdcc61b76543f5cda8a365bd.jpg","5d3e8caecdcc61b76543f5cda8a365bd_thumb.jpg","5d3e8caecdcc61b76543f5cda8a365bd.webp","5d3e8caecdcc61b76543f5cda8a365bd_thumb.webp",["Reactive",97],{"title":14,"subTitle":98},"Blog",7,["Reactive",101],{"title":102,"meta":103,"link":140},"Front-end Mini Projeleri",[104,107,110,113,116,119,122,125,128,131,134,136,138],{"hid":105,"name":105,"content":106},"description","Başlangıç seviyesinde front-end mini projeleri.",{"hid":108,"name":108,"content":109},"keywords","frontend,html,css,javascript,mini proje",{"hid":111,"name":111,"content":112},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":114,"name":114,"content":115},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":117,"property":117,"content":118},"og:type","website",{"hid":120,"property":120,"content":121},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":123,"property":123,"content":124},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":126,"property":126,"content":127},"og:image","https://kodogreniyorum.comundefined",{"hid":129,"property":129,"content":130},"og:url","https://kodogreniyorum.com/blog/front-end-mini-ornekler",{"hid":132,"name":132,"content":133},"twitter:card","summary_large_image",{"hid":135,"name":135,"content":121},"twitter:title",{"hid":137,"name":137,"content":124},"twitter:description",{"hid":139,"name":139,"content":127},"twitter:image",[141,143],{"rel":142,"href":130},"canonical",{"rel":144,"href":145},"amphtml","https://amp.kodogreniyorum.com/blog/front-end-mini-ornekler",["Reactive",147],{"@context":148,"@graph":149},"https://schema.org",[150,212],{"@type":98,"name":102,"description":106,"url":151,"mainEntity":152},"https://kodogreniyorum.com/blog",{"@type":153,"itemListOrder":154,"numberOfItems":99,"itemListElement":155},"ItemList","https://schema.org/ItemListOrderDescending",[156,172,179,186,193,200,207],{"@type":157,"position":158,"url":159,"item":160},"ListItem",1,"https://kodogreniyorum.com/blog/front-end-mini-ornekler/baslangic-seviyesi-front-end-kombinasyonlari-ile-web-gelistirmeye-adim-atin",{"@type":161,"headline":8,"image":162,"datePublished":11,"dateModified":11,"author":163,"publisher":166},"BlogPosting","https://kodogreniyorum.com/media/blog/undefined",{"@type":164,"name":18,"url":165},"Person","https://kodogreniyorum.com/yazarlar/emre-yalcin",{"@type":167,"logo":168},"Organization",{"@type":169,"url":170,"width":171,"height":171},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":157,"position":173,"url":174,"item":175},2,"https://kodogreniyorum.com/blog/front-end-mini-ornekler/html-css-ve-javascript-ile-sik-mini-kart-tasarimi-nasil-yapilir",{"@type":161,"headline":28,"image":162,"datePublished":31,"dateModified":31,"author":176,"publisher":177},{"@type":164,"name":18,"url":165},{"@type":167,"logo":178},{"@type":169,"url":170,"width":171,"height":171},{"@type":157,"position":180,"url":181,"item":182},3,"https://kodogreniyorum.com/blog/front-end-mini-ornekler/uclu-dugme-etkilesimli-mini-uygulama-ile-front-end-becerilerinizi-gelistirin",{"@type":161,"headline":40,"image":162,"datePublished":43,"dateModified":43,"author":183,"publisher":184},{"@type":164,"name":18,"url":165},{"@type":167,"logo":185},{"@type":169,"url":170,"width":171,"height":171},{"@type":157,"position":187,"url":188,"item":189},4,"https://kodogreniyorum.com/blog/front-end-mini-ornekler/html-css-ve-js-ile-mini-projeler-on-yuz-gelistirmede-pratik-yaklasimlar",{"@type":161,"headline":52,"image":162,"datePublished":55,"dateModified":55,"author":190,"publisher":191},{"@type":164,"name":18,"url":165},{"@type":167,"logo":192},{"@type":169,"url":170,"width":171,"height":171},{"@type":157,"position":194,"url":195,"item":196},5,"https://kodogreniyorum.com/blog/front-end-mini-ornekler/baslangic-icin-etkilesimli-front-end-ornekleri-html-css-ve-js-ile-mini-projeye",{"@type":161,"headline":64,"image":162,"datePublished":67,"dateModified":67,"author":197,"publisher":198},{"@type":164,"name":18,"url":165},{"@type":167,"logo":199},{"@type":169,"url":170,"width":171,"height":171},{"@type":157,"position":201,"url":202,"item":203},6,"https://kodogreniyorum.com/blog/front-end-mini-ornekler/pratik-html-css-ve-js-mini-projeleri-ile-front-end-becerilerinizi-gelistirin",{"@type":161,"headline":76,"image":162,"datePublished":79,"dateModified":79,"author":204,"publisher":205},{"@type":164,"name":18,"url":165},{"@type":167,"logo":206},{"@type":169,"url":170,"width":171,"height":171},{"@type":157,"position":99,"url":195,"item":208},{"@type":161,"headline":64,"image":162,"datePublished":89,"dateModified":89,"author":209,"publisher":210},{"@type":164,"name":18,"url":165},{"@type":167,"logo":211},{"@type":169,"url":170,"width":171,"height":171},{"@type":213,"itemListElement":214},"BreadcrumbList",[215,218,219],{"@type":157,"position":158,"name":216,"item":217},"Ana Sayfa","https://kodogreniyorum.com",{"@type":157,"position":173,"name":98,"item":151},{"@type":157,"position":180,"name":14,"item":130}]