{"id":14992,"date":"2025-03-12T21:15:14","date_gmt":"2025-03-12T18:15:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/"},"modified":"2025-03-12T21:15:14","modified_gmt":"2025-03-12T18:15:14","slug":"fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/","title":{"rendered":"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama"},"content":{"rendered":"<p><body><\/p>\n<p>Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama<\/p>\n<p>Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle olduk\u00e7a pop\u00fcler bir web geli\u015ftirme g\u00f6revi olan fiyatland\u0131rma kart\u0131 tasar\u0131m\u0131n\u0131 ele alaca\u011f\u0131z.  Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici bir fiyatland\u0131rma kart\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m.  Ayn\u0131 zamanda,  <a href=\"https:\/\/dev.to\/thek2j\/pricing-card-code-challenge-453c\">burada<\/a> bulunan \u0130ngilizce makaleden esinlenerek kendi yorumlar\u0131m\u0131 ve ipu\u00e7lar\u0131m\u0131 ekleyece\u011fim.<\/p>\n<h2>HTML Yap\u0131s\u0131: Temel \u0130skelet<\/h2>\n<p>\u00d6ncelikle, fiyatland\u0131rma kart\u0131m\u0131z\u0131n temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.  Bu yap\u0131, kart\u0131n ba\u015fl\u0131\u011f\u0131n\u0131, fiyat\u0131n\u0131, \u00f6zellikleri ve bir butonu i\u00e7erecektir.  A\u015fa\u011f\u0131da basit bir \u00f6rnek g\u00f6rebilirsiniz:<\/p>\n<p><code><br \/>\n&lt;div class=\"pricing-card\"&gt;<br \/>\n  &lt;h2&gt;Temel Plan&lt;\/h2&gt;<br \/>\n  &lt;p class=\"price\"&gt;\u20ba49&lt;\/p&gt;<br \/>\n  &lt;ul&gt;<br \/>\n    &lt;li&gt;\u00d6zellik 1&lt;\/li&gt;<br \/>\n    &lt;li&gt;\u00d6zellik 2&lt;\/li&gt;<br \/>\n    &lt;li&gt;\u00d6zellik 3&lt;\/li&gt;<br \/>\n  &lt;\/ul&gt;<br \/>\n  &lt;button&gt;Sat\u0131n Al&lt;\/button&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p>G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi,  <code>div<\/code> eleman\u0131 kart\u0131m\u0131z\u0131n ana kapsay\u0131c\u0131s\u0131 olarak kullan\u0131l\u0131r.  \u0130\u00e7erisinde ise ba\u015fl\u0131k, fiyat, \u00f6zellik listesi ve bir buton bulunmaktad\u0131r.  Bu yap\u0131land\u0131rmay\u0131 daha sonra CSS ile \u015fekillendirece\u011fiz.<\/p>\n<h2>CSS ile Stil Verme: G\u00f6rsel Tasar\u0131m<\/h2>\n<p>\u015eimdi, HTML yap\u0131m\u0131z\u0131 CSS ile g\u00f6rsel olarak d\u00fczenleyelim.  Bu ad\u0131mda, renkler, boyutlar, yaz\u0131 tipleri ve genel tasar\u0131m unsurlar\u0131n\u0131 belirleyece\u011fiz.  \u00d6rne\u011fin, kart\u0131n arka plan rengini, k\u00f6\u015felerini yuvarlayabilir ve g\u00f6lgeler ekleyebilirsiniz.  \u0130\u015fte bir CSS \u00f6rne\u011fi:<\/p>\n<p><code><br \/>\n.pricing-card {<br \/>\n  background-color: #f0f0f0;<br \/>\n  padding: 20px;<br \/>\n  border-radius: 5px;<br \/>\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Bu kod, kart\u0131m\u0131za basit bir stil kazand\u0131r\u0131r.  Daha geli\u015fmi\u015f tasar\u0131mlar i\u00e7in daha fazla CSS \u00f6zelli\u011fi kullanabilirsiniz.  Unutmay\u0131n ki,  CSS&#8217;in g\u00fcc\u00fc s\u0131n\u0131rs\u0131zd\u0131r ve yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131za ba\u011fl\u0131 olarak harika tasar\u0131mlar olu\u015fturabilirsiniz.<\/p>\n<h2>JavaScript ile Etkile\u015fim: Dinamik \u00d6zellikler<\/h2>\n<p>Son olarak, JavaScript kullanarak kart\u0131n\u0131za etkile\u015fimli \u00f6zellikler ekleyebilirsiniz.  \u00d6rne\u011fin,  butona t\u0131kland\u0131\u011f\u0131nda bir i\u015flem ger\u00e7ekle\u015ftirebilir veya kullan\u0131c\u0131n\u0131n se\u00e7imlerine g\u00f6re kart i\u00e7eri\u011fini de\u011fi\u015ftirebilirsiniz.  Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in \u00e7ok faydal\u0131 olabilir.<\/p>\n<p>\u00d6rne\u011fin, butona t\u0131kland\u0131\u011f\u0131nda bir &#8220;Sat\u0131n al\u0131nd\u0131&#8221; mesaj\u0131 g\u00f6sterebilirsiniz.  Bu, basit bir JavaScript fonksiyonu ile kolayca ger\u00e7ekle\u015ftirilebilir.<\/p>\n<p>Bu makalede, fiyatland\u0131rma kart\u0131 olu\u015fturman\u0131n temel ad\u0131mlar\u0131n\u0131 ele ald\u0131k. Daha geli\u015fmi\u015f \u00f6zellikler i\u00e7in, CSS framework&#8217;leri (\u00f6rne\u011fin, Bootstrap veya Tailwind CSS) veya JavaScript k\u00fct\u00fcphaneleri kullanabilirsiniz.  Bunlar, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131racak ve daha karma\u015f\u0131k tasar\u0131mlar olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r.  Kendi web sitenizi olu\u015fturmak isterseniz,  <a href=\"https:\/\/fatihsoysal.com\">fatihsoysal.com<\/a> adresinden daha fazla bilgi edinebilirsiniz.<\/p>\n<p>Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur.  Ba\u015fka sorular\u0131n\u0131z varsa l\u00fctfen yorumlarda belirtin.<\/p>\n<p>#Etiketler: Fiyatland\u0131rma Kart\u0131, Pricing Card, HTML, CSS, JavaScript, Kodlama, Web Geli\u015ftirme, Programlama, \u00d6rnek, Tutorial<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle olduk\u00e7a&hellip;","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-14992","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama<\/title>\n<meta name=\"description\" content=\"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle olduk\u00e7a pop\u00fcler bir web geli\u015ftirme g\u00f6revi olan fiyatland\u0131rma kart\u0131 tasar\u0131m\u0131n\u0131 ele alaca\u011f\u0131z. Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici bir fiyatland\u0131rma kart\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Ayn\u0131 zamanda, burada bulunan \u0130ngilizce makaleden esinlenerek kendi yorumlar\u0131m\u0131 ve ipu\u00e7lar\u0131m\u0131 ekleyece\u011fim.\" \/>\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\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle olduk\u00e7a pop\u00fcler bir web geli\u015ftirme g\u00f6revi olan fiyatland\u0131rma kart\u0131 tasar\u0131m\u0131n\u0131 ele alaca\u011f\u0131z. Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici bir fiyatland\u0131rma kart\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Ayn\u0131 zamanda, burada bulunan \u0130ngilizce makaleden esinlenerek kendi yorumlar\u0131m\u0131 ve ipu\u00e7lar\u0131m\u0131 ekleyece\u011fim.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-12T18:15:14+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\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama\",\"datePublished\":\"2025-03-12T18:15:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/\"},\"wordCount\":465,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/\",\"name\":\"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-03-12T18:15:14+00:00\",\"description\":\"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle olduk\u00e7a pop\u00fcler bir web geli\u015ftirme g\u00f6revi olan fiyatland\u0131rma kart\u0131 tasar\u0131m\u0131n\u0131 ele alaca\u011f\u0131z. Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici bir fiyatland\u0131rma kart\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Ayn\u0131 zamanda, burada bulunan \u0130ngilizce makaleden esinlenerek kendi yorumlar\u0131m\u0131 ve ipu\u00e7lar\u0131m\u0131 ekleyece\u011fim.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama\"}]},{\"@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":"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama","description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle olduk\u00e7a pop\u00fcler bir web geli\u015ftirme g\u00f6revi olan fiyatland\u0131rma kart\u0131 tasar\u0131m\u0131n\u0131 ele alaca\u011f\u0131z. Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici bir fiyatland\u0131rma kart\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Ayn\u0131 zamanda, burada bulunan \u0130ngilizce makaleden esinlenerek kendi yorumlar\u0131m\u0131 ve ipu\u00e7lar\u0131m\u0131 ekleyece\u011fim.","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\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/","og_locale":"tr_TR","og_type":"article","og_title":"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama","og_description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle olduk\u00e7a pop\u00fcler bir web geli\u015ftirme g\u00f6revi olan fiyatland\u0131rma kart\u0131 tasar\u0131m\u0131n\u0131 ele alaca\u011f\u0131z. Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici bir fiyatland\u0131rma kart\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Ayn\u0131 zamanda, burada bulunan \u0130ngilizce makaleden esinlenerek kendi yorumlar\u0131m\u0131 ve ipu\u00e7lar\u0131m\u0131 ekleyece\u011fim.","og_url":"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-03-12T18:15:14+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\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama","datePublished":"2025-03-12T18:15:14+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/"},"wordCount":465,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/","url":"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/","name":"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-03-12T18:15:14+00:00","description":"Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlerle olduk\u00e7a pop\u00fcler bir web geli\u015ftirme g\u00f6revi olan fiyatland\u0131rma kart\u0131 tasar\u0131m\u0131n\u0131 ele alaca\u011f\u0131z. Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici bir fiyatland\u0131rma kart\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Ayn\u0131 zamanda, burada bulunan \u0130ngilizce makaleden esinlenerek kendi yorumlar\u0131m\u0131 ve ipu\u00e7lar\u0131m\u0131 ekleyece\u011fim.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/fiyatlandirma-karti-kod-calismasi-html-css-ve-javascript-ile-uygulama\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fiyatland\u0131rma Kart\u0131 Kod \u00c7al\u0131\u015fmas\u0131: HTML, CSS ve JavaScript ile Uygulama"}]},{"@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\/14992","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=14992"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/14992\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=14992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=14992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=14992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}