{"id":42304,"date":"2026-06-04T21:12:15","date_gmt":"2026-06-04T18:12:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/"},"modified":"2026-06-04T21:12:58","modified_gmt":"2026-06-04T18:12:58","slug":"html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/","title":{"rendered":"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur?"},"content":{"rendered":"<h2>HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur?<\/h2>\n<p>G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i i\u015f piyasas\u0131nda, potansiyel i\u015fverenlerin dikkatini \u00e7ekmek her zamankinden daha zorlay\u0131c\u0131 bir hale geldi. Standart Word veya PDF format\u0131ndaki \u00f6zge\u00e7mi\u015fler, binlerce ba\u015fvuru aras\u0131nda kolayca kaybolabiliyor. Peki ya \u00f6zge\u00e7mi\u015finiz sadece bilgilerinizi sunmakla kalmay\u0131p, ayn\u0131 zamanda teknik yeteneklerinizi, yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 ve detaylara verdi\u011finiz \u00f6nemi de g\u00f6zler \u00f6n\u00fcne serse? \u0130\u015fte tam bu noktada, HTML ve CSS kullanarak kendi dijital \u00f6zge\u00e7mi\u015finizi olu\u015fturmak, sizi di\u011fer adaylardan bir ad\u0131m \u00f6ne \u00e7\u0131karacak g\u00fc\u00e7l\u00fc bir ara\u00e7 haline geliyor. Bu makalede, s\u0131f\u0131rdan ba\u015flayarak, estetik ve fonksiyonel bir HTML\/CSS \u00f6zge\u00e7mi\u015fini nas\u0131l tasarlayaca\u011f\u0131n\u0131z\u0131, ad\u0131m ad\u0131m pratik \u00f6rneklerle \u00f6\u011freneceksiniz.<\/p>\n<h2>Dijital \u00c7a\u011fda \u00d6zge\u00e7mi\u015fin \u00d6nemi ve HTML\/CSS Neden Tercih Edilmeli?<\/h2>\n<p>\u0130\u015f arama s\u00fcreci, sadece yeteneklerinizi listelemekten \u00e7ok daha fazlas\u0131n\u0131 gerektirir; ayn\u0131 zamanda kendinizi bir &#8220;marka&#8221; olarak sunma sanat\u0131d\u0131r. Geleneksel \u00f6zge\u00e7mi\u015fler, ne kadar iyi yaz\u0131lm\u0131\u015f olsalar da, genellikle statik ve s\u0131n\u0131rl\u0131 bir deneyim sunar. Bir i\u015fe al\u0131m uzman\u0131, g\u00fcnde y\u00fczlerce \u00f6zge\u00e7mi\u015fi tararken, ak\u0131lda kal\u0131c\u0131 ve etkileyici bir sunum, fark edilmenizi sa\u011flayabilir. Dijital bir \u00f6zge\u00e7mi\u015f, \u00f6zellikle teknoloji ve yarat\u0131c\u0131 sekt\u00f6rlerde \u00e7al\u0131\u015fanlar i\u00e7in, sadece ne bildi\u011finizi de\u011fil, ayn\u0131 zamanda ne yapabildi\u011finizi de g\u00f6sterir.<\/p>\n<p>HTML (HyperText Markup Language), web sayfalar\u0131n\u0131n iskeletini olu\u015fturan temel i\u015faretleme dilidir. \u0130\u00e7erikleri yap\u0131land\u0131rmam\u0131z\u0131, ba\u015fl\u0131klar\u0131, paragraflar\u0131, listeleri, g\u00f6rselleri ve ba\u011flant\u0131lar\u0131 d\u00fczenlememizi sa\u011flar. CSS (Cascading Style Sheets) ise, bu yap\u0131land\u0131r\u0131lm\u0131\u015f i\u00e7eri\u011fe stil ve estetik katman\u0131n\u0131 ekler. Renkler, yaz\u0131 tipleri, d\u00fczenler, animasyonlar ve responsive (duyarl\u0131) tasar\u0131mlar gibi t\u00fcm g\u00f6rsel unsurlar CSS ile kontrol edilir. Bu iki dilin birle\u015fimi, size \u00f6zge\u00e7mi\u015finiz \u00fczerinde tam kontrol sa\u011flar ve s\u0131n\u0131rs\u0131z ki\u015fiselle\u015ftirme imkan\u0131 sunar.<\/p>\n<p>HTML\/CSS ile olu\u015fturulmu\u015f bir \u00f6zge\u00e7mi\u015fin sundu\u011fu avantajlar saymakla bitmez. \u0130lk olarak, \u00f6zge\u00e7mi\u015finizi tamamen kendi markan\u0131za uygun hale getirebilirsiniz. Kurumsal renklerinizi, tercih etti\u011finiz yaz\u0131 tiplerini ve benzersiz bir d\u00fczeni kullanarak, ki\u015fili\u011finizi yans\u0131tan bir sunum yapabilirsiniz. \u0130kinci olarak, bu t\u00fcr bir \u00f6zge\u00e7mi\u015f, sadece bir belge olmaktan \u00f6te, interaktif bir deneyim sunabilir. \u00c7al\u0131\u015fmalar\u0131n\u0131za do\u011frudan ba\u011flant\u0131lar ekleyebilir, projelerinizin detaylar\u0131n\u0131 a\u00e7\u0131l\u0131r kapan\u0131r men\u00fclerle g\u00f6sterebilir veya hatta k\u00fc\u00e7\u00fck animasyonlarla dikkat \u00e7ekebilirsiniz. \u00dc\u00e7\u00fcnc\u00fc ve belki de en \u00f6nemli avantajlardan biri, HTML\/CSS \u00f6zge\u00e7mi\u015flerinin duyarl\u0131 (responsive) olabilmesidir. Yani, cep telefonu, tablet veya masa\u00fcst\u00fc bilgisayar gibi farkl\u0131 ekran boyutlar\u0131nda sorunsuz bir \u015fekilde g\u00f6r\u00fcnt\u00fclenebilir. Bu, i\u015fverenlerin \u00f6zge\u00e7mi\u015finize her yerden kolayca eri\u015febilmesini sa\u011flar. Ayr\u0131ca, bir web sayfas\u0131 olarak bar\u0131nd\u0131r\u0131ld\u0131\u011f\u0131nda, arama motoru optimizasyonu (SEO) a\u00e7\u0131s\u0131ndan da avantajlar sunar, b\u00f6ylece potansiyel i\u015fverenler sizi online platformlarda daha kolay bulabilir. K\u0131sacas\u0131, HTML ve CSS, \u00f6zge\u00e7mi\u015finizi sadece bir belge olmaktan \u00e7\u0131kar\u0131p, yeteneklerinizi sergileyen dinamik bir portf\u00f6ye d\u00f6n\u00fc\u015ft\u00fcrmenin anahtar\u0131d\u0131r.<\/p>\n<h3>Temel HTML Yap\u0131s\u0131: \u00d6zge\u00e7mi\u015finiz \u0130\u00e7in \u0130skeleti Kurmak<\/h3>\n<p>Her web sayfas\u0131n\u0131n temelinde bir HTML belgesi bulunur. \u00d6zge\u00e7mi\u015finizi olu\u015fturmaya ba\u015flarken, \u00f6ncelikle sayfan\u0131n ana yap\u0131s\u0131n\u0131 ve b\u00f6l\u00fcmlerini belirlememiz gerekir. Modern web geli\u015ftirme pratiklerinde, HTML5&#8217;in sundu\u011fu semantik etiketler (semantic tags) kullanmak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu etiketler, i\u00e7eri\u011fin anlam\u0131n\u0131 belirtir ve hem arama motorlar\u0131 hem de eri\u015filebilirlik ara\u00e7lar\u0131 i\u00e7in daha anla\u015f\u0131l\u0131r bir yap\u0131 sunar. Bir \u00f6zge\u00e7mi\u015f i\u00e7in temel HTML yap\u0131s\u0131n\u0131 olu\u015ftururken a\u015fa\u011f\u0131daki etiketleri kullanmay\u0131 d\u00fc\u015f\u00fcnebiliriz:<\/p>\n<ul>\n<li><code>&lt;header&gt;<\/code>: Genellikle sayfan\u0131n \u00fcst k\u0131sm\u0131nda yer alan, isim, unvan ve ileti\u015fim bilgileri gibi genel bilgileri i\u00e7erir.<\/li>\n<li><code>&lt;nav&gt;<\/code>: E\u011fer \u00f6zge\u00e7mi\u015finiz tek sayfal\u0131k de\u011filse veya farkl\u0131 b\u00f6l\u00fcmlere h\u0131zl\u0131ca atlamak i\u00e7in ba\u011flant\u0131lar i\u00e7eriyorsa, bu etiket navigasyon men\u00fcs\u00fcn\u00fc tan\u0131mlar.<\/li>\n<li><code>&lt;section&gt;<\/code>: Sayfan\u0131n ana i\u00e7erik b\u00f6l\u00fcmlerini (\u00f6rne\u011fin, &#8220;Deneyimler&#8221;, &#8220;E\u011fitim&#8221;, &#8220;Beceriler&#8221;) gruplamak i\u00e7in kullan\u0131l\u0131r. Her <code>&lt;section&gt;<\/code> etiketi genellikle bir ba\u015fl\u0131k (<code>&lt;h2&gt;<\/code> veya <code>&lt;h3&gt;<\/code>) ile ba\u015flar.<\/li>\n<li><code>&lt;article&gt;<\/code>: Ba\u011f\u0131ms\u0131z, kendi ba\u015f\u0131na anlam ifade eden i\u00e7erik bloklar\u0131 i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, her bir i\u015f deneyimi veya e\u011fitim d\u00f6nemi bir <code>&lt;article&gt;<\/code> etiketi i\u00e7inde yer alabilir.<\/li>\n<li><code>&lt;aside&gt;<\/code>: Ana i\u00e7erikten ba\u011f\u0131ms\u0131z ancak onunla ili\u015fkili bilgileri (\u00f6rne\u011fin, yan \u00e7ubukta yer alan beceriler listesi) belirtmek i\u00e7in kullan\u0131l\u0131r.<\/li>\n<li><code>&lt;footer&gt;<\/code>: Sayfan\u0131n alt k\u0131sm\u0131nda yer alan, telif hakk\u0131 bilgileri veya ek ba\u011flant\u0131lar gibi bilgileri i\u00e7erir.<\/li>\n<li><code>&lt;div&gt;<\/code> ve <code>&lt;span&gt;<\/code>: Anlamsal bir kar\u015f\u0131l\u0131\u011f\u0131 olmayan, sadece stil veya d\u00fczen ama\u00e7l\u0131 kullan\u0131lan genel kapsay\u0131c\u0131 etiketlerdir. M\u00fcmk\u00fcn oldu\u011funca semantik etiketleri tercih etmekle birlikte, karma\u015f\u0131k d\u00fczenler i\u00e7in bu etiketlere de ihtiya\u00e7 duyulabilir.<\/li>\n<\/ul>\n<p>\u0130\u015fte basit bir HTML \u00f6zge\u00e7mi\u015finin iskeletini g\u00f6steren bir kod \u00f6rne\u011fi:<\/p>\n<div class=\"code-container\">\n<\/div>\n<p>Yukar\u0131daki kod blo\u011fu, bir \u00f6zge\u00e7mi\u015f i\u00e7in gerekli olan ana b\u00f6l\u00fcmleri ve temel HTML etiketlerini g\u00f6stermektedir. <code>&lt;main&gt;<\/code> etiketi, sayfan\u0131n ana i\u00e7eri\u011fini kapsayan semantik bir etikettir ve SEO a\u00e7\u0131s\u0131ndan \u00f6nemlidir. Her bir b\u00f6l\u00fcm i\u00e7in benzersiz <code>id<\/code> nitelikleri (attribute) atamak, CSS ile stil verirken veya sayfa i\u00e7i navigasyon olu\u015ftururken bize esneklik sa\u011flar. Ayr\u0131ca, ileti\u015fim bilgileri gibi listelenen \u00f6\u011feler i\u00e7in <code>&lt;ul&gt;<\/code> (s\u0131ras\u0131z liste) ve <code>&lt;li&gt;<\/code> (liste \u00f6\u011fesi) etiketlerini kullanmak, i\u00e7eri\u011fin yap\u0131sal olarak do\u011fru ve eri\u015filebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>CSS ile \u00d6zge\u00e7mi\u015finizi G\u00f6rsel Bir \u015e\u00f6lene D\u00f6n\u00fc\u015ft\u00fcrmek: Stil ve Tasar\u0131m Prensipleri<\/h3>\n<p>HTML iskeleti haz\u0131r oldu\u011funda, \u00f6zge\u00e7mi\u015finize hayat vermek ve onu g\u00f6rsel olarak \u00e7ekici hale getirmek i\u00e7in CSS devreye girer. CSS, web sayfan\u0131zdaki her bir HTML eleman\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kontrol etmenizi sa\u011flar. Renklerden yaz\u0131 tiplerine, d\u00fczenlerden animasyonlara kadar her \u015fey CSS ile ayarlanabilir. Bir \u00f6zge\u00e7mi\u015f tasarlarken, profesyonel, temiz ve okunakl\u0131 bir estetik yakalamak \u00e7ok \u00f6nemlidir.<\/p>\n<p>CSS&#8217;i HTML belgesine ba\u011flaman\u0131n en iyi yolu, harici bir stil dosyas\u0131 kullanmakt\u0131r. Bu, kodunuzu daha d\u00fczenli hale getirir ve stil de\u011fi\u015fikliklerini tek bir yerden y\u00f6netmenizi sa\u011flar. HTML <code>&lt;head&gt;<\/code> etiketinin i\u00e7ine <code>&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/code> ekleyerek bunu yapabilirsiniz. \u015eimdi, <code>style.css<\/code> dosyam\u0131zda temel stil kurallar\u0131n\u0131 nas\u0131l uygulayaca\u011f\u0131m\u0131za bakal\u0131m:<\/p>\n<ul>\n<li><strong>Genel Stil Ayarlar\u0131 (Global Styles):<\/strong> Sayfan\u0131n genel yaz\u0131 tipi (<code>font-family<\/code>), temel metin rengi (<code>color<\/code>) ve arka plan rengi (<code>background-color<\/code>) gibi ayarlar genellikle <code>body<\/code> veya <code>html<\/code> etiketine uygulan\u0131r. Okunabilirli\u011fi art\u0131rmak i\u00e7in yayg\u0131n olarak tercih edilen sans-serif yaz\u0131 tipleri (\u00f6rne\u011fin, Arial, Helvetica, Lato, Open Sans) kullan\u0131labilir.<\/li>\n<li><strong>Tipografi (Typography):<\/strong> Ba\u015fl\u0131klar (<code>h1<\/code>, <code>h2<\/code>, <code>h3<\/code>) ve paragraflar (<code>p<\/code>) i\u00e7in farkl\u0131 yaz\u0131 boyutlar\u0131 (<code>font-size<\/code>), a\u011f\u0131rl\u0131klar (<code>font-weight<\/code>) ve sat\u0131r y\u00fckseklikleri (<code>line-height<\/code>) belirlemek, hiyerar\u015fiyi ve okunabilirli\u011fi art\u0131r\u0131r.<\/li>\n<li><strong>Kutu Modeli (Box Model):<\/strong> Her HTML eleman\u0131 bir kutu olarak d\u00fc\u015f\u00fcn\u00fclebilir. <code>margin<\/code> (d\u0131\u015f bo\u015fluk), <code>padding<\/code> (i\u00e7 bo\u015fluk) ve <code>border<\/code> (kenarl\u0131k) \u00f6zellikleri, elemanlar aras\u0131ndaki mesafeyi ve elemanlar\u0131n boyutunu kontrol etmek i\u00e7in kullan\u0131l\u0131r. Bu \u00f6zellikler, i\u00e7eri\u011fin birbirine yap\u0131\u015fmas\u0131n\u0131 engeller ve d\u00fczenli bir g\u00f6r\u00fcn\u00fcm sa\u011flar.<\/li>\n<li><strong>D\u00fczen (Layout):<\/strong> Modern CSS d\u00fczen teknikleri olan Flexbox ve Grid, karma\u015f\u0131k sayfa d\u00fczenlerini kolayca olu\u015fturman\u0131z\u0131 sa\u011flar. \u00d6zge\u00e7mi\u015finizdeki b\u00f6l\u00fcmleri yan yana hizalamak, s\u00fctunlar olu\u015fturmak veya elemanlar\u0131 ortalamak i\u00e7in bu tekniklerden faydalanabilirsiniz. \u00d6rne\u011fin, ileti\u015fim bilgilerini veya becerileri yatay olarak d\u00fczenlemek i\u00e7in Flexbox harika bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/li>\n<li><strong>Renk Paleti (Color Palette):<\/strong> Profesyonel bir \u00f6zge\u00e7mi\u015f i\u00e7in sade ve uyumlu bir renk paleti se\u00e7mek \u00f6nemlidir. Genellikle birincil bir renk, ikincil bir renk ve n\u00f6tr tonlar (gri, beyaz) kullan\u0131l\u0131r. A\u015f\u0131r\u0131ya ka\u00e7maktan ka\u00e7\u0131nmal\u0131 ve renklerin okunabilirli\u011fi etkilememesine dikkat etmelisiniz. Metin ve arka plan aras\u0131ndaki yeterli kontrast, eri\u015filebilirlik a\u00e7\u0131s\u0131ndan da kritik \u00f6neme sahiptir.<\/li>\n<\/ul>\n<p>A\u015fa\u011f\u0131da, yukar\u0131daki HTML yap\u0131s\u0131na uygulanabilecek temel CSS stilini g\u00f6steren bir \u00f6rnek bulunmaktad\u0131r:<\/p>\n<div class=\"code-container\">\n<pre><code class=\"language-css\">\/* Genel Ayarlar *\/\nbody {\n    font-family: 'Open Sans', Arial, sans-serif; \/* Okunakl\u0131 bir yaz\u0131 tipi *\/\n    line-height: 1.6; \/* Sat\u0131r aral\u0131\u011f\u0131 okunabilirli\u011fi art\u0131r\u0131r *\/\n    margin: 0;\n    padding: 0;\n    background-color: #f4f4f4; \/* A\u00e7\u0131k gri arka plan *\/\n    color: #333; \/* Koyu gri metin rengi *\/\n}\n\n.code-container {\n    background-color: #eee;\n    padding: 15px;\n    border-radius: 5px;\n    margin-bottom: 20px;\n    overflow-x: auto; \/* Yatay kayd\u0131rma \u00e7ubu\u011fu ekler *\/\n}\n\npre code {\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    display: block;\n    white-space: pre-wrap; \/* Uzun sat\u0131rlar\u0131 otomatik k\u0131rar *\/\n}\n\n\/* Kapsay\u0131c\u0131lar *\/\nheader, main, footer {\n    max-width: 960px; \/* Maksimum geni\u015flik belirle *\/\n    margin: 20px auto; \/* Ortala ve \u00fcst\/alt bo\u015fluk b\u0131rak *\/\n    padding: 20px;\n    background-color: #fff; \/* Beyaz arka plan *\/\n    border-radius: 8px; \/* K\u00f6\u015feleri yuvarla *\/\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1); \/* Hafif g\u00f6lge *\/\n}\n\n\/* Ba\u015fl\u0131klar *\/\nh1 {\n    font-size: 2.5em;\n    color: #0056b3; \/* Mavi tonu *\/\n    text-align: center;\n    margin-bottom: 10px;\n}\n\nh2 {\n    font-size: 1.8em;\n    color: #0056b3;\n    border-bottom: 2px solid #eee; \/* B\u00f6l\u00fcmleri ay\u0131rmak i\u00e7in alt \u00e7izgi *\/\n    padding-bottom: 5px;\n    margin-top: 30px;\n    margin-bottom: 15px;\n}\n\nh3 {\n    font-size: 1.4em;\n    color: #333;\n    margin-top: 20px;\n}\n\n\/* \u0130leti\u015fim Bilgileri *\/\n.contact-info {\n    list-style: none; \/* Liste i\u015faretlerini kald\u0131r *\/\n    padding: 0;\n    text-align: center;\n    margin-bottom: 20px;\n}\n\n.contact-info li {\n    display: inline-block; \/* Yan yana s\u0131rala *\/\n    margin: 0 10px;\n}\n\n.contact-info a {\n    color: #007bff; \/* Ba\u011flant\u0131 rengi *\/\n    text-decoration: none; \/* Alt \u00e7izgiyi kald\u0131r *\/\n}\n\n.contact-info a:hover {\n    text-decoration: underline; \/* \u00dczerine gelince alt \u00e7izgi ekle *\/\n}\n\n\/* B\u00f6l\u00fcmler *\/\nsection {\n    margin-bottom: 30px;\n    padding: 15px 0;\n}\n\n\/* Deneyim ve E\u011fitim Giri\u015fleri *\/\n.job-entry, .education-entry {\n    margin-bottom: 20px;\n    padding-left: 15px;\n    border-left: 3px solid #0056b3; \/* Sol kenarl\u0131kla vurgula *\/\n}\n\n.company-name, .university-name {\n    font-style: italic;\n    color: #555;\n    margin-top: 5px;\n}\n\n.dates {\n    font-size: 0.9em;\n    color: #777;\n    margin-bottom: 10px;\n}\n\n.job-entry ul, .education-entry ul {\n    list-style: disc; \/* Nokta i\u015faretli liste *\/\n    margin-left: 20px;\n}\n\n\/* Beceriler *\/\n.skills-list {\n    list-style: none;\n    padding: 0;\n    display: flex; \/* Becerileri yan yana s\u0131rala *\/\n    flex-wrap: wrap; \/* Ta\u015f\u0131nca alt sat\u0131ra ge\u00e7 *\/\n    gap: 10px; \/* Elemanlar aras\u0131 bo\u015fluk *\/\n}\n\n.skills-list li {\n    background-color: #e2e6ea; \/* A\u00e7\u0131k gri etiket arka plan\u0131 *\/\n    color: #333;\n    padding: 8px 15px;\n    border-radius: 20px; \/* Yuvarlak k\u00f6\u015feler *\/\n    font-size: 0.9em;\n    white-space: nowrap; \/* Tek sat\u0131rda kalmas\u0131n\u0131 sa\u011fla *\/\n}\n\n\/* Footer *\/\nfooter {\n    text-align: center;\n    font-size: 0.8em;\n    color: #777;\n    margin-top: 40px;\n    padding-top: 15px;\n    border-top: 1px solid #eee;\n}\n<\/code><\/pre>\n<\/div>\n<p>Bu CSS kodlar\u0131, \u00f6zge\u00e7mi\u015finize temiz, modern ve profesyonel bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Renkleri, yaz\u0131 tiplerini ve d\u00fczeni kendi tercihlerinize g\u00f6re kolayca de\u011fi\u015ftirebilirsiniz. Unutmay\u0131n ki, stil verirken tutarl\u0131l\u0131k \u00e7ok \u00f6nemlidir. Ba\u015fl\u0131k boyutlar\u0131, bo\u015fluklar ve renkler aras\u0131nda bir denge sa\u011flamak, \u00f6zge\u00e7mi\u015finizin daha d\u00fczenli ve okunabilir olmas\u0131n\u0131 sa\u011flayacakt\u0131r. Ayr\u0131ca, CSS ile etkile\u015fimli \u00f6zellikler ekleyebilir, \u00f6rne\u011fin ba\u011flant\u0131lar\u0131n \u00fczerine gelindi\u011finde renk de\u011fi\u015ftirmesini veya bir b\u00f6l\u00fcm\u00fcn a\u00e7\u0131l\u0131p kapanmas\u0131n\u0131 sa\u011flayabilirsiniz. Bu, \u00f6zge\u00e7mi\u015finize dinamik bir his katacakt\u0131r.<\/p>\n<h2>Ad\u0131m Ad\u0131m \u00d6zge\u00e7mi\u015f Olu\u015fturma: Pratik Uygulama ve En \u0130yi Y\u00f6ntemler<\/h2>\n<p>HTML ve CSS&#8217;in temel prensiplerini anlad\u0131ktan sonra, \u015fimdi bu bilgileri bir araya getirerek kendi dijital \u00f6zge\u00e7mi\u015finizi ad\u0131m ad\u0131m olu\u015fturmaya ba\u015flayabiliriz. Her b\u00f6l\u00fcm\u00fc ayr\u0131 ayr\u0131 ele alarak, i\u00e7eri\u011finizi en etkili \u015fekilde nas\u0131l sunaca\u011f\u0131n\u0131z\u0131 ve g\u00f6rsel olarak nas\u0131l d\u00fczenleyece\u011finizi inceleyece\u011fiz.<\/p>\n<h3>\u0130leti\u015fim Bilgileri ve Ki\u015fisel Profil Alan\u0131 Nas\u0131l Yap\u0131land\u0131r\u0131l\u0131r?<\/h3>\n<p>\u00d6zge\u00e7mi\u015finizin en \u00fcst k\u0131sm\u0131, yani <code>&lt;header&gt;<\/code> b\u00f6l\u00fcm\u00fc, sizin kim oldu\u011funuzu ve size nas\u0131l ula\u015f\u0131labilece\u011fini g\u00f6sterir. Bu b\u00f6l\u00fcm, i\u015fverenin ilk izlenimini olu\u015fturdu\u011fu i\u00e7in hem bilgilendirici hem de g\u00f6rsel olarak \u00e7ekici olmal\u0131d\u0131r. Genellikle isminiz, unvan\u0131n\u0131z ve ileti\u015fim bilgileriniz burada yer al\u0131r.<\/p>\n<p>HTML taraf\u0131nda, ad\u0131n\u0131z i\u00e7in <code>&lt;h1&gt;<\/code>, unvan\u0131n\u0131z i\u00e7in bir <code>&lt;p&gt;<\/code> etiketi ve ileti\u015fim bilgileriniz i\u00e7in bir <code>&lt;ul&gt;<\/code> (s\u0131ras\u0131z liste) kullanmak iyi bir yakla\u015f\u0131md\u0131r. Her bir ileti\u015fim bilgisi (e-posta, telefon, LinkedIn, GitHub, ki\u015fisel web sitesi vb.) bir <code>&lt;li&gt;<\/code> etiketi i\u00e7inde yer almal\u0131 ve ilgili ba\u011flant\u0131lar (<code>&lt;a&gt;<\/code>) ile donat\u0131lmal\u0131d\u0131r. \u00d6zellikle e-posta ve telefon numaralar\u0131 i\u00e7in <code>mailto:<\/code> ve <code>tel:<\/code> protokollerini kullanmak, mobil cihazlarda do\u011frudan arama veya e-posta g\u00f6nderme kolayl\u0131\u011f\u0131 sa\u011flar.<\/p>\n<div class=\"code-container\">\n<\/div>\n<p>CSS ile bu b\u00f6l\u00fcme stil verirken, isminizi vurgulayabilir, unvan\u0131n\u0131z\u0131 daha k\u00fc\u00e7\u00fck bir fontla g\u00f6sterebilir ve ileti\u015fim bilgilerini yatayda ortalayarak veya yan yana hizalayarak daha d\u00fczenli bir g\u00f6r\u00fcn\u00fcm sa\u011flayabilirsiniz. \u00d6rne\u011fin, <code>.contact-info<\/code> s\u0131n\u0131f\u0131na <code>display: flex; justify-content: center; flex-wrap: wrap;<\/code> \u00f6zelliklerini ekleyerek mobil cihazlarda da d\u00fczg\u00fcn g\u00f6r\u00fcnmesini sa\u011flayabilirsiniz. Ayr\u0131ca, bir profil foto\u011fraf\u0131 eklemeyi d\u00fc\u015f\u00fcn\u00fcyorsan\u0131z, foto\u011fraf\u0131n boyutunu ve yuvarlakl\u0131\u011f\u0131n\u0131 CSS ile ayarlayabilirsiniz. Ancak foto\u011fraf kullan\u0131rken profesyonel bir \u00e7ekim olmas\u0131na ve arka plan\u0131n sade olmas\u0131na dikkat etmek \u00f6nemlidir. G\u00f6rsel olarak temiz ve minimalist bir yakla\u015f\u0131m, genellikle en etkili sonucu verir.<\/p>\n<h3>Deneyim ve E\u011fitim B\u00f6l\u00fcmlerini Etkili Bir \u015eekilde Sunmak<\/h3>\n<p>\u0130\u015f deneyimi ve e\u011fitim b\u00f6l\u00fcmleri, \u00f6zge\u00e7mi\u015finizin en kritik k\u0131s\u0131mlar\u0131ndan biridir. Bu b\u00f6l\u00fcmler, ge\u00e7mi\u015f ba\u015far\u0131lar\u0131n\u0131z\u0131 ve akademik ge\u00e7mi\u015finizi potansiyel i\u015fverenlere sunar. Her bir i\u015f deneyimi veya e\u011fitim d\u00f6nemi i\u00e7in ayr\u0131 bir <code>&lt;article&gt;<\/code> etiketi kullanmak, i\u00e7eri\u011finizi semantik olarak ay\u0131rman\u0131za yard\u0131mc\u0131 olur.<\/p>\n<p>Her bir <code>&lt;article&gt;<\/code> i\u00e7inde, pozisyon ad\u0131n\u0131z\u0131 veya derecenizi <code>&lt;h3&gt;<\/code> ile, \u015firket veya \u00fcniversite ad\u0131n\u0131 <code>&lt;p class=\"company-name\"&gt;<\/code> veya <code>&lt;p class=\"university-name\"&gt;<\/code> ile, tarih aral\u0131\u011f\u0131n\u0131 ise <code>&lt;p class=\"dates\"&gt;<\/code> ile belirtmek \u00f6nemlidir. Sorumluluklar\u0131n\u0131z\u0131 ve ba\u015far\u0131lar\u0131n\u0131z\u0131 listelemek i\u00e7in <code>&lt;ul&gt;<\/code> ve <code>&lt;li&gt;<\/code> etiketlerini kullan\u0131n. Ba\u015far\u0131lar\u0131n\u0131z\u0131 say\u0131larla veya somut \u00f6rneklerle desteklemek (\u00f6rne\u011fin, &#8220;Proje maliyetlerini %15 azaltt\u0131m&#8221; veya &#8220;Kullan\u0131c\u0131 etkile\u015fimini %20 art\u0131ran bir \u00f6zellik geli\u015ftirdim&#8221;) i\u015fverenin dikkatini \u00e7ekecektir.<\/p>\n<div class=\"code-container\">\n<pre><code class=\"language-html\">&lt;section id=\"experience\"&gt;\n    &lt;h2&gt;\u0130\u015f Deneyimi&lt;\/h2&gt;\n    &lt;article class=\"job-entry\"&gt;\n        &lt;h3&gt;K\u0131demli Frontend Geli\u015ftirici&lt;\/h3&gt;\n        &lt;p class=\"company-name\"&gt;Yenilik\u00e7i \u00c7\u00f6z\u00fcmler A.\u015e. - \u0130stanbul, T\u00fcrkiye&lt;\/p&gt;\n        &lt;p class=\"dates\"&gt;Haziran 2020 \u2013 Halen&lt;\/p&gt;\n        &lt;ul&gt;\n            &lt;li&gt;React.js ve Next.js kullanarak y\u00fcksek performansl\u0131 kullan\u0131c\u0131 aray\u00fczleri geli\u015ftirdim, proje teslim s\u00fcrelerini %25 k\u0131saltt\u0131m.&lt;\/li&gt;\n            &lt;li&gt;Mobil \u00f6ncelikli responsive tasar\u0131mlar uygulayarak kullan\u0131c\u0131 deneyimini (UX) %15 oran\u0131nda iyile\u015ftirdim.&lt;\/li&gt;\n            &lt;li&gt;\u00c7evik (Agile) geli\u015ftirme metodolojileriyle uyumlu \u00e7al\u0131\u015farak tak\u0131m i\u00e7i ileti\u015fimi ve verimlili\u011fi art\u0131rd\u0131m.&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/article&gt;\n\n    &lt;article class=\"job-entry\"&gt;\n        &lt;h3&gt;Junior Web Geli\u015ftirici&lt;\/h3&gt;\n        &lt;p class=\"company-name\"&gt;Dijital At\u00f6lye Ltd. - Ankara, T\u00fcrkiye&lt;\/p&gt;\n        &lt;p class=\"dates\"&gt;Eyl\u00fcl 2018 \u2013 May\u0131s 2020&lt;\/p&gt;\n        &lt;ul&gt;\n            &lt;li&gt;HTML5, CSS3 ve JavaScript kullanarak \u015firket web sitelerinin bak\u0131m\u0131n\u0131 ve yeni \u00f6zellik geli\u015ftirmelerini \u00fcstlendim.&lt;\/li&gt;\n            &lt;li&gt;SEO uyumlu kodlama pratikleri uygulayarak web sitelerinin arama motoru s\u0131ralamalar\u0131nda %10'luk bir art\u0131\u015f sa\u011flad\u0131m.&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/article&gt;\n&lt;\/section&gt;\n\n&lt;section id=\"education\"&gt;\n    &lt;h2&gt;E\u011fitim&lt;\/h2&gt;\n    &lt;article class=\"education-entry\"&gt;\n        &lt;h3&gt;Bilgisayar M\u00fchendisli\u011fi Lisans&lt;\/h3&gt;\n        &lt;p class=\"university-name\"&gt;Orta Do\u011fu Teknik \u00dcniversitesi (ODT\u00dc) - Ankara, T\u00fcrkiye&lt;\/p&gt;\n        &lt;p class=\"dates\"&gt;Eyl\u00fcl 2014 \u2013 Haziran 2018&lt;\/p&gt;\n        &lt;p&gt;Bitirme Projesi: \"Yapay Zeka Destekli G\u00f6r\u00fcnt\u00fc \u0130\u015fleme Uygulamas\u0131\". Ba\u015far\u0131 bursu ile mezun oldum.&lt;\/p&gt;\n    &lt;\/article&gt;\n&lt;\/section&gt;<\/code><\/pre>\n<\/div>\n<p>CSS ile her bir <code>.job-entry<\/code> veya <code>.education-entry<\/code> i\u00e7in sol tarafta bir kenarl\u0131k (<code>border-left<\/code>) ekleyerek g\u00f6rsel bir ayr\u0131m sa\u011flayabilirsiniz. Ayr\u0131ca, tarihleri ve \u015firket\/\u00fcniversite adlar\u0131n\u0131 daha k\u00fc\u00e7\u00fck ve a\u00e7\u0131k renkli bir fontla g\u00f6stererek hiyerar\u015fiyi vurgulayabilirsiniz. Liste \u00f6\u011feleri i\u00e7in uygun bo\u015fluklar (<code>margin-bottom<\/code>) ve madde i\u015faretleri (<code>list-style<\/code>) kullanarak okunabilirli\u011fi art\u0131r\u0131n. Bu yakla\u015f\u0131mla, i\u015fverenler deneyim ve e\u011fitim ge\u00e7mi\u015finizi h\u0131zl\u0131ca tarayabilir ve \u00f6nemli bilgilere kolayca ula\u015fabilir.<\/p>\n<h3>Beceriler ve Projeler B\u00f6l\u00fcmleri: Yetkinliklerinizi Vurgulay\u0131n<\/h3>\n<p>Beceriler ve projeler b\u00f6l\u00fcm\u00fc, teknik yetkinliklerinizi ve bu yetkinlikleri ger\u00e7ek d\u00fcnyada nas\u0131l uygulad\u0131\u011f\u0131n\u0131z\u0131 sergilemek i\u00e7in harika bir f\u0131rsatt\u0131r. Bu b\u00f6l\u00fcmler, i\u015fverenin arad\u0131\u011f\u0131 \u00f6zel yeteneklere sahip olup olmad\u0131\u011f\u0131n\u0131z\u0131 h\u0131zl\u0131ca g\u00f6rmesini sa\u011flar.<\/p>\n<p>Beceriler i\u00e7in, teknik becerilerinizi (programlama dilleri, framework&#8217;ler, ara\u00e7lar), yabanc\u0131 dillerinizi ve varsa sosyal becerilerinizi (tak\u0131m \u00e7al\u0131\u015fmas\u0131, problem \u00e7\u00f6zme) listeleyebilirsiniz. Bu listeyi, her bir beceriyi bir <code>&lt;li&gt;<\/code> etiketi i\u00e7inde bar\u0131nd\u0131ran bir <code>&lt;ul class=\"skills-list\"&gt;<\/code> ile olu\u015fturmak yayg\u0131n bir yakla\u015f\u0131md\u0131r. CSS ile bu becerileri &#8220;etiket&#8221; (tag) benzeri kutucuklar halinde g\u00f6stermek, hem g\u00f6rsel olarak \u00e7ekici hem de okunabilirli\u011fi y\u00fcksek bir sunum sa\u011flar.<\/p>\n<div class=\"code-container\">\n<pre><code class=\"language-html\">&lt;section id=\"skills\"&gt;\n    &lt;h2&gt;Beceriler&lt;\/h2&gt;\n    &lt;ul class=\"skills-list\"&gt;\n        &lt;li&gt;HTML5&lt;\/li&gt;\n        &lt;li&gt;CSS3 (Sass, Less)&lt;\/li&gt;\n        &lt;li&gt;JavaScript (ES6+)&lt;\/li&gt;\n        &lt;li&gt;React.js&lt;\/li&gt;\n        &lt;li&gt;Next.js&lt;\/li&gt;\n        &lt;li&gt;Node.js&lt;\/li&gt;\n        &lt;li&gt;Git &amp; GitHub&lt;\/li&gt;\n        &lt;li&gt;Responsive Design&lt;\/li&gt;\n        &lt;li&gt;UI\/UX Prensipleri&lt;\/li&\n        &lt;li&gt;Problem \u00c7\u00f6zme&lt;\/li&gt;\n        &lt;li&gt;Tak\u0131m \u00c7al\u0131\u015fmas\u0131&lt;\/li&gt;\n        &lt;li&gt;\u0130ngilizce (\u0130leri)&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/section&gt;\n\n&lt;section id=\"projects\"&gt;\n    &lt;h2&gt;Projeler&lt;\/h2&gt;\n    &lt;article class=\"project-entry\"&gt;\n        &lt;h3&gt;&lt;a href=\"https:\/\/github.com\/ayseyilmazdev\/e-ticaret-uygulamasi\" target=\"_blank\"&gt;Modern E-ticaret Platformu&lt;\/a&gt;&lt;\/h3&gt;\n        &lt;p class=\"project-description\"&gt;React ve Redux kullanarak geli\u015ftirilmi\u015f, \u00fcr\u00fcn listeleme, sepet ve \u00f6deme \u00f6zelliklerine sahip tam i\u015flevli bir e-ticaret uygulamas\u0131.&lt;\/p&gt;\n        &lt;p class=\"project-tech\"&gt;&lt;code&gt;React.js&lt;\/code&gt;, &lt;code&gt;Redux&lt;\/code&gt;, &lt;code&gt;Node.js&lt;\/code&gt;, &lt;code&gt;MongoDB&lt;\/code&gt;&lt;\/p&gt;\n    &lt;\/article&gt;\n    &lt;article class=\"project-entry\"&gt;\n        &lt;h3&gt;&lt;a href=\"https:\/\/ayseyilmaz.dev\/blog\" target=\"_blank\"&gt;Ki\u015fisel Blog ve Portfolyo&lt;\/a&gt;&lt;\/h3&gt;\n        &lt;p class=\"project-description\"&gt;Next.js ve Markdown kullanarak olu\u015fturulmu\u015f, makalelerimi ve projelerimi sergiledi\u011fim ki\u015fisel web sitesi.&lt;\/p&gt;\n        &lt;p class=\"project-tech\"&gt;&lt;code&gt;Next.js&lt;\/code&gt;, &lt;code&gt;Tailwind CSS&lt;\/code&gt;, &lt;code&gt;Markdown&lt;\/code&gt;&lt;\/p&gt;\n    &lt;\/article&gt;\n&lt;\/section&gt;<\/code><\/pre>\n<\/div>\n<p>Projeler b\u00f6l\u00fcm\u00fc, becerilerinizin pratik uygulamalar\u0131n\u0131 g\u00f6sterir. Her bir proje i\u00e7in bir <code>&lt;h3&gt;<\/code> ile ba\u015fl\u0131k, <code>&lt;p class=\"project-description\"&gt;<\/code> ile k\u0131sa bir a\u00e7\u0131klama ve <code>&lt;p class=\"project-tech\"&gt;<\/code> ile kullan\u0131lan teknolojileri listeleyebilirsiniz. En \u00f6nemlisi, projelerin canl\u0131 demolar\u0131na veya GitHub depolar\u0131na do\u011frudan ba\u011flant\u0131lar (<code>&lt;a&gt;<\/code>) eklemeyi unutmay\u0131n. Bu, i\u015fverenlerin kod kalitenizi ve bitmi\u015f \u00fcr\u00fcnlerinizi do\u011frudan incelemesine olanak tan\u0131r. CSS ile beceri listesini yatayda hizalamak i\u00e7in Flexbox kullanabilir, her bir beceri etiketine yuvarlak k\u00f6\u015feler ve hafif bir arka plan rengi vererek g\u00f6rsel olarak daha \u00e7ekici hale getirebilirsiniz. Proje ba\u015fl\u0131klar\u0131n\u0131 vurgulamak ve a\u00e7\u0131klamalar i\u00e7in yeterli bo\u015fluk b\u0131rakmak, bu b\u00f6l\u00fcm\u00fcn okunabilirli\u011fini art\u0131racakt\u0131r.<\/p>\n<h2>Duyarl\u0131 Tasar\u0131m (Responsive Design) ve Eri\u015filebilirlik (Accessibility) Neden \u00d6nemli?<\/h2>\n<p>Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan ikisi, duyarl\u0131 tasar\u0131m ve eri\u015filebilirliktir. \u00d6zge\u00e7mi\u015finiz, potansiyel i\u015fverenler taraf\u0131ndan farkl\u0131 cihazlar ve farkl\u0131 ko\u015fullar alt\u0131nda g\u00f6r\u00fcnt\u00fclenebilir. Bu nedenle, bu iki prensibi g\u00f6z ard\u0131 etmek, \u00f6nemli f\u0131rsatlar\u0131 ka\u00e7\u0131rman\u0131za neden olabilir.<\/p>\n<p><strong>Duyarl\u0131 Tasar\u0131m (Responsive Design):<\/strong> \u00d6zge\u00e7mi\u015finizin bir cep telefonunda, tablette veya masa\u00fcst\u00fc bilgisayarda nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fc, profesyonelli\u011finiz hakk\u0131nda ipu\u00e7lar\u0131 verir. Duyarl\u0131 tasar\u0131m, web sayfan\u0131z\u0131n ekran boyutuna ve cihaz tipine g\u00f6re kendini otomatik olarak ayarlamas\u0131 anlam\u0131na gelir. Bu, i\u00e7eri\u011fin her zaman okunabilir, d\u00fczenin bozulmam\u0131\u015f ve etkile\u015fimli \u00f6\u011felerin kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. Duyarl\u0131 tasar\u0131m genellikle CSS&#8217;in <code>@media<\/code> kurallar\u0131 (media queries) kullan\u0131larak ger\u00e7ekle\u015ftirilir. \u00d6rne\u011fin, belirli bir ekran geni\u015fli\u011finin alt\u0131nda (mobil cihazlar i\u00e7in) farkl\u0131 bir d\u00fczen veya font boyutu uygulayabilirsiniz. &#8220;Mobil \u00f6ncelikli&#8221; (mobile-first) yakla\u015f\u0131m, tasar\u0131ma en k\u00fc\u00e7\u00fck ekrandan ba\u015flay\u0131p daha b\u00fcy\u00fck ekranlara do\u011fru ilerlemeyi \u00f6nerir, bu da daha sa\u011flam ve performansl\u0131 bir duyarl\u0131 tasar\u0131m olu\u015fturman\u0131za yard\u0131mc\u0131 olur.<\/p>\n<p><strong>Vaka Analizi:<\/strong> Bir aday, masa\u00fcst\u00fcnde harika g\u00f6r\u00fcnen, ancak mobil cihazda metinlerin \u00fcst \u00fcste bindi\u011fi ve gezinmenin imkans\u0131z oldu\u011fu bir HTML\/CSS \u00f6zge\u00e7mi\u015fiyle ba\u015fvurmu\u015ftu. \u0130\u015fveren, ilk taramay\u0131 telefonundan yaparken bu durumu fark etti ve aday\u0131n web geli\u015ftirme becerileri konusunda \u015f\u00fcpheye d\u00fc\u015ft\u00fc, m\u00fclakata davet etmedi. Bu durum, duyarl\u0131 tasar\u0131m\u0131n sadece estetik bir tercih de\u011fil, ayn\u0131 zamanda i\u015flevsellik ve profesyonellik a\u00e7\u0131s\u0131ndan da bir zorunluluk oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n<p><strong>Eri\u015filebilirlik (Accessibility):<\/strong> Web i\u00e7eri\u011finin herkes taraf\u0131ndan, engeli olan ki\u015filer de dahil olmak \u00fczere, kullan\u0131labilir olmas\u0131 anlam\u0131na gelir. Eri\u015filebilir bir \u00f6zge\u00e7mi\u015f, ekran okuyucular\u0131 kullanan g\u00f6rme engelli ki\u015filerin, klavye ile gezinen motor engelli ki\u015filerin veya renk k\u00f6r\u00fc ki\u015filerin i\u00e7eri\u011finizi sorunsuz bir \u015fekilde t\u00fcketebilmesini sa\u011flar. Eri\u015filebilirlik i\u00e7in dikkat etmeniz gereken baz\u0131 noktalar:<\/p>\n<ul>\n<li><strong>Semantik HTML:<\/strong> Yukar\u0131da bahsetti\u011fimiz <code>&lt;header&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;main&gt;<\/code>, <code>&lt;section&gt;<\/code>, <code>&lt;footer&gt;<\/code> gibi etiketleri do\u011fru kullanmak, ekran okuyucular\u0131n\u0131n sayfa yap\u0131s\u0131n\u0131 anlamas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<li><strong>Alternatif Metin (<code>alt<\/code> attribute):<\/strong> G\u00f6rseller i\u00e7in a\u00e7\u0131klay\u0131c\u0131 <code>alt<\/code> metinleri eklemek, g\u00f6rseli g\u00f6remeyen kullan\u0131c\u0131lara i\u00e7eri\u011fi aktar\u0131r. \u00d6rne\u011fin, bir profil foto\u011fraf\u0131 i\u00e7in <code>&lt;img src=\"profil.jpg\" alt=\"Ay\u015fe Y\u0131lmaz'\u0131n profesyonel portre foto\u011fraf\u0131\"&gt;<\/code> \u015feklinde bir kullan\u0131m \u00f6nemlidir.<\/li>\n<li><strong>Renk Kontrast\u0131:<\/strong> Metin ve arka plan renkleri aras\u0131nda yeterli kontrast sa\u011flamak, renk k\u00f6r\u00fc veya g\u00f6rme bozuklu\u011fu olan ki\u015filerin metni okumas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n<li><strong>Klavye Navigasyonu:<\/strong> T\u00fcm etkile\u015fimli \u00f6\u011felere (ba\u011flant\u0131lar, d\u00fc\u011fmeler) klavye ile eri\u015filebilir olmas\u0131n\u0131 sa\u011flamak. Kullan\u0131c\u0131lar\u0131n Tab tu\u015fu ile t\u00fcm ba\u011flant\u0131lar\u0131 gezebilmesi ve Enter tu\u015fu ile etkinle\u015ftirebilmesi gerekir.<\/li>\n<li><strong><code>aria-label<\/code> Kullan\u0131m\u0131:<\/strong> Bazen sadece g\u00f6rsel olarak anla\u015f\u0131lan simgeler veya ba\u011flant\u0131lar i\u00e7in, ekran okuyucular\u0131na ne i\u015fe yarad\u0131\u011f\u0131n\u0131 a\u00e7\u0131klayan <code>aria-label<\/code> nitelikleri eklemek faydal\u0131d\u0131r.<\/li>\n<\/ul>\n<p>Duyarl\u0131 ve eri\u015filebilir bir \u00f6zge\u00e7mi\u015f olu\u015fturmak, sadece teknik bir gereklilik de\u011fil, ayn\u0131 zamanda kapsay\u0131c\u0131 bir yakla\u015f\u0131m\u0131n da g\u00f6stergesidir. Bu, sizin sadece kod yazabilen de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini ve evrenselli\u011fi d\u00fc\u015f\u00fcnen bir geli\u015ftirici oldu\u011funuzu ortaya koyar.<\/p>\n<h2>\u0130leri D\u00fczey \u0130pu\u00e7lar\u0131 ve Optimizasyon Teknikleri<\/h2>\n<p>HTML ve CSS ile temel \u00f6zge\u00e7mi\u015finizi olu\u015fturduktan sonra, onu daha da geli\u015ftirmek ve potansiyel i\u015fverenler i\u00e7in daha cazip hale getirmek i\u00e7in baz\u0131 ileri d\u00fczey ipu\u00e7lar\u0131 ve optimizasyon teknikleri uygulayabilirsiniz.<\/p>\n<h3>\u00d6zge\u00e7mi\u015finizi SEO Dostu Hale Getirmek ve Performans\u0131n\u0131 Art\u0131rmak<\/h3>\n<p>E\u011fer \u00f6zge\u00e7mi\u015finizi ki\u015fisel bir web sitesi olarak bar\u0131nd\u0131r\u0131yorsan\u0131z, arama motoru optimizasyonu (SEO) ve performans, i\u015fverenlerin sizi bulmas\u0131 ve sitenizin h\u0131zl\u0131 y\u00fcklenmesi a\u00e7\u0131s\u0131ndan hayati \u00f6neme sahiptir. \u0130yi bir SEO, \u00f6zge\u00e7mi\u015finizin Google gibi arama motorlar\u0131nda daha \u00fcst s\u0131ralarda g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n<ul>\n<li><strong>Anahtar Kelime Kullan\u0131m\u0131:<\/strong> \u00d6zge\u00e7mi\u015finizdeki i\u00e7erikte (ba\u015fl\u0131klar, paragraflar, beceri listeleri) sekt\u00f6r\u00fcn\u00fczle ve arad\u0131\u011f\u0131n\u0131z pozisyonlarla ilgili anahtar kelimeleri do\u011fal bir \u015fekilde kullan\u0131n. \u00d6rne\u011fin, &#8220;Frontend Geli\u015ftirici&#8221;, &#8220;React.js&#8221;, &#8220;Web Tasar\u0131m&#8221; gibi terimler.<\/li>\n<li><strong>Meta Etiketleri:<\/strong> HTML <code>&lt;head&gt;<\/code> b\u00f6l\u00fcm\u00fcnde <code>&lt;title&gt;<\/code> etiketi ve <code>&lt;meta name=\"description\"&gt;<\/code> etiketi, arama motorlar\u0131na sayfan\u0131z hakk\u0131nda bilgi verir. <code>&lt;title&gt;<\/code> etiketi, taray\u0131c\u0131 sekmesinde g\u00f6r\u00fcnen ba\u015fl\u0131k ve arama sonu\u00e7lar\u0131nda g\u00f6sterilen ana ba\u015fl\u0131kt\u0131r. A\u00e7\u0131klama etiketi ise arama sonu\u00e7lar\u0131nda ba\u015fl\u0131\u011f\u0131n alt\u0131nda g\u00f6r\u00fcnen k\u0131sa \u00f6zettir. Bunlar\u0131 anahtar kelimelerle zenginle\u015ftirin (ancak spam yapmaktan ka\u00e7\u0131n\u0131n).<\/li>\n<li><strong>Temiz ve Semantik HTML:<\/strong> Arama motorlar\u0131, iyi yap\u0131land\u0131r\u0131lm\u0131\u015f ve semantik HTML&#8217;i sever. Yukar\u0131da bahsetti\u011fimiz gibi, <code>&lt;header&gt;<\/code>, <code>&lt;main&gt;<\/code>, <code>&lt;section&gt;<\/code> gibi etiketleri do\u011fru kullanmak, i\u00e7eri\u011finizin ne hakk\u0131nda oldu\u011funu arama motorlar\u0131na daha iyi anlat\u0131r.<\/li>\n<li><strong>G\u00f6rsel Optimizasyonu:<\/strong> E\u011fer \u00f6zge\u00e7mi\u015finizde g\u00f6rseller kullan\u0131yorsan\u0131z (profil foto\u011fraf\u0131, proje ekran g\u00f6r\u00fcnt\u00fcleri), bunlar\u0131 web i\u00e7in optimize edin. B\u00fcy\u00fck boyutlu g\u00f6rseller y\u00fckleme s\u00fcresini art\u0131r\u0131r. G\u00f6rselleri s\u0131k\u0131\u015ft\u0131r\u0131n ve uygun formatlarda (JPEG, PNG, WebP) kullan\u0131n. Ayr\u0131ca, t\u00fcm g\u00f6rsellere a\u00e7\u0131klay\u0131c\u0131 <code>alt<\/code> metinleri eklemeyi unutmay\u0131n.<\/li>\n<li><strong>CSS ve JavaScript Minifikasyonu:<\/strong> Canl\u0131ya almadan \u00f6nce CSS ve JavaScript dosyalar\u0131n\u0131z\u0131 k\u00fc\u00e7\u00fcltmek (minification), dosya boyutlar\u0131n\u0131 azalt\u0131r ve y\u00fckleme s\u00fcrelerini h\u0131zland\u0131r\u0131r. Bu ara\u00e7lar, kodunuzdaki gereksiz bo\u015fluklar\u0131, yorumlar\u0131 ve sat\u0131r sonlar\u0131n\u0131 kald\u0131r\u0131r.<\/li>\n<li><strong>Lazy Loading (Tembel Y\u00fckleme):<\/strong> \u00d6zellikle uzun bir \u00f6zge\u00e7mi\u015finiz veya \u00e7ok say\u0131da g\u00f6rsel i\u00e7eren bir portfolyo b\u00f6l\u00fcm\u00fcn\u00fcz varsa, ekran\u0131n g\u00f6r\u00fcn\u00fcr alan\u0131na gelene kadar g\u00f6rselleri veya di\u011fer medya \u00f6\u011felerini y\u00fcklememeyi d\u00fc\u015f\u00fcnebilirsiniz. Bu, ilk y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/li>\n<\/ul>\n<p>Bu optimizasyonlar, \u00f6zge\u00e7mi\u015finizin sadece harika g\u00f6r\u00fcnmesini sa\u011flamakla kalmaz, ayn\u0131 zamanda h\u0131zl\u0131 ve eri\u015filebilir olmas\u0131n\u0131 da garanti eder. T\u00fcrkiye&#8217;deki i\u015fverenler de dahil olmak \u00fczere, bir\u00e7ok i\u015fe al\u0131m uzman\u0131, bir aday\u0131n ki\u015fisel web sitesi veya portf\u00f6y\u00fcn\u00fcn teknik kalitesine dikkat eder. Performans ve SEO, bu kalitenin \u00f6nemli g\u00f6stergeleridir.<\/p>\n<h3>Git ve Versiyon Kontrol\u00fc ile \u00d6zge\u00e7mi\u015finizi Y\u00f6netmek<\/h3>\n<p>Web geli\u015ftirme projelerinde oldu\u011fu gibi, HTML\/CSS \u00f6zge\u00e7mi\u015finizi olu\u015ftururken de Git gibi bir versiyon kontrol sistemi kullanmak, geli\u015ftirme s\u00fcrecinizi \u00e7ok daha d\u00fczenli ve g\u00fcvenli hale getirir. Git, kodunuzdaki de\u011fi\u015fiklikleri takip etmenizi, farkl\u0131 s\u00fcr\u00fcmler aras\u0131nda ge\u00e7i\u015f yapman\u0131z\u0131 ve hatalar yapt\u0131\u011f\u0131n\u0131zda kolayca geri d\u00f6nmenizi sa\u011flar.<\/p>\n<p>\u00d6zge\u00e7mi\u015finizi bir Git deposunda (repository) tutmak ve bu depoyu GitHub, GitLab veya Bitbucket gibi platformlarda bar\u0131nd\u0131rmak, size bir\u00e7ok avantaj sunar:<\/p>\n<ul>\n<li><strong>De\u011fi\u015fiklik Takibi:<\/strong> Yapt\u0131\u011f\u0131n\u0131z her de\u011fi\u015fikli\u011fi (\u00f6rne\u011fin, &#8220;Deneyim b\u00f6l\u00fcm\u00fcne yeni bir i\u015f ekledim&#8221; veya &#8220;CSS renklerini g\u00fcncelledim&#8221;) bir &#8220;commit&#8221; olarak kaydedebilirsiniz. Bu, zaman i\u00e7inde \u00f6zge\u00e7mi\u015finizin nas\u0131l geli\u015fti\u011fini g\u00f6rmenizi sa\u011flar.<\/li>\n<li><strong>Geri D\u00f6nme Yetene\u011fi:<\/strong> Yanl\u0131\u015f bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda veya eski bir versiyona geri d\u00f6nmek istedi\u011finizde, Git sayesinde kolayca bunu yapabilirsiniz.<\/li>\n<li><strong>Online Bar\u0131nd\u0131rma (Hosting):<\/strong> GitHub Pages gibi servisler, Git deponuzdaki HTML\/CSS dosyalar\u0131n\u0131 do\u011frudan bir web sitesi olarak yay\u0131nlaman\u0131za olanak tan\u0131r. Bu, \u00f6zge\u00e7mi\u015finizi h\u0131zl\u0131 ve \u00fccretsiz bir \u015fekilde online hale getirmenin en pop\u00fcler yollar\u0131ndan biridir. \u0130\u015fverenlere do\u011frudan bir URL (\u00f6rne\u011fin, <code>kullaniciadi.github.io\/ozgecmis<\/code>) g\u00f6nderebilirsiniz.<\/li>\n<li><strong>Kod Kalitesi G\u00f6stergesi:<\/strong> \u00d6zellikle yaz\u0131l\u0131m geli\u015ftirme alan\u0131nda bir pozisyona ba\u015fvuruyorsan\u0131z, \u00f6zge\u00e7mi\u015finizin kodunu bir GitHub deposunda sergilemek, temiz kod yazma al\u0131\u015fkanl\u0131klar\u0131n\u0131z\u0131, versiyon kontrol\u00fc bilginizi ve genel teknik yetkinli\u011finizi g\u00f6sterir. T\u00fcrkiye&#8217;deki teknoloji \u015firketleri, adaylar\u0131n GitHub profillerini aktif olarak inceler ve bu, m\u00fclakat s\u00fcrecinde \u00f6nemli bir art\u0131 puan olabilir.<\/li>\n<\/ul>\n<p>Yerel pazardaki i\u015fverenler, \u00f6zellikle yaz\u0131l\u0131m geli\u015ftirici, web tasar\u0131mc\u0131 veya dijital pazarlamac\u0131 gibi pozisyonlar i\u00e7in ba\u015fvurularda, adaylar\u0131n online varl\u0131klar\u0131n\u0131 ve teknik portf\u00f6ylerini incelemeye giderek daha fazla \u00f6nem veriyor. Bir GitHub deposunda d\u00fczenli olarak g\u00fcncellenen ve iyi belgelenmi\u015f bir HTML\/CSS \u00f6zge\u00e7mi\u015fi, sizin sadece teknik bilgiye sahip olmakla kalmay\u0131p, ayn\u0131 zamanda modern geli\u015ftirme pratiklerini de benimsedi\u011finizi g\u00f6sterir. Bu, i\u015fverenlerin g\u00f6z\u00fcnde sizi daha de\u011ferli ve nitelikli bir aday yapar.<\/p>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>HTML ve CSS kullanarak kendi \u00f6zge\u00e7mi\u015finizi olu\u015fturmak, sadece teknik becerilerinizi sergilemekle kalmaz, ayn\u0131 zamanda yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131, detaylara verdi\u011finiz \u00f6nemi ve problem \u00e7\u00f6zme yetene\u011finizi de ortaya koyar. Standart \u00f6zge\u00e7mi\u015f formatlar\u0131n\u0131n aksine, dijital bir \u00f6zge\u00e7mi\u015f size tam kontrol sa\u011flar, ki\u015fisel markan\u0131z\u0131 yans\u0131tman\u0131za olanak tan\u0131r ve i\u015fverenlerin dikkatini \u00e7ekmek i\u00e7in dinamik bir platform sunar. Bu makalede, HTML ile yap\u0131y\u0131 kurmaktan, CSS ile stil vermeye, duyarl\u0131 tasar\u0131mdan eri\u015filebilirli\u011fe ve SEO optimizasyonuna kadar bir\u00e7ok konuyu ele ald\u0131k. Kendi dijital \u00f6zge\u00e7mi\u015finizi in\u015fa etmek, kariyer yolculu\u011funuzda sizi rakiplerinizden ay\u0131racak g\u00fc\u00e7l\u00fc bir ad\u0131md\u0131r. \u015eimdi s\u0131ra sizde; kodlamaya ba\u015flay\u0131n ve kendinizi en iyi \u015fekilde ifade eden \u00f6zge\u00e7mi\u015finizi yarat\u0131n!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<dl>\n<dt>HTML\/CSS \u00f6zge\u00e7mi\u015fi Word\/PDF&#8217;den daha m\u0131 iyi?<\/dt>\n<dd>Genel olarak, evet. \u00d6zellikle teknoloji ve yarat\u0131c\u0131 sekt\u00f6rlerde, HTML\/CSS \u00f6zge\u00e7mi\u015fi daha fazla ki\u015fiselle\u015ftirme, interaktivite ve duyarl\u0131l\u0131k sunar. Ayr\u0131ca, teknik yeteneklerinizi do\u011frudan sergilemenize olanak tan\u0131r. Ancak, baz\u0131 geleneksel \u015firketler hala PDF format\u0131n\u0131 tercih edebilir, bu y\u00fczden her iki format\u0131 da haz\u0131r bulundurmak iyi bir stratejidir.<\/dd>\n<dt>Tasar\u0131m bilgim yoksa da HTML\/CSS \u00f6zge\u00e7mi\u015f yapabilir miyim?<\/dt>\n<dd>Kesinlikle! Tasar\u0131m prensiplerini bilmeseniz bile, temiz ve minimalist bir yakla\u015f\u0131mla ba\u015flayabilirsiniz. Haz\u0131r CSS k\u00fct\u00fcphanelerinden (\u00f6rne\u011fin, Bootstrap veya Tailwind CSS) faydalanabilir veya basit renk paletleri ve okunabilir yaz\u0131 tipleri kullanarak profesyonel bir g\u00f6r\u00fcn\u00fcm elde edebilirsiniz. \u00d6nemli olan, i\u00e7eri\u011fin net ve d\u00fczenli olmas\u0131d\u0131r.<\/dd>\n<dt>\u00d6zge\u00e7mi\u015fimi nas\u0131l bar\u0131nd\u0131rabilirim (hosting)?<\/dt>\n<dd>\u00d6zge\u00e7mi\u015finizi bar\u0131nd\u0131rman\u0131n en pop\u00fcler ve \u00fccretsiz yollar\u0131ndan biri GitHub Pages kullanmakt\u0131r. Kodunuzu bir GitHub deposuna y\u00fckleyerek, birka\u00e7 basit ad\u0131mla \u00f6zge\u00e7mi\u015finizi bir web sitesi olarak yay\u0131nlayabilirsiniz. Di\u011fer se\u00e7enekler aras\u0131nda Netlify, Vercel veya ki\u015fisel bir web hosting hizmeti bulunmaktad\u0131r.<\/dd>\n<dt>Mobil uyumluluk neden bu kadar \u00f6nemli?<\/dt>\n<dd>Mobil uyumluluk (responsive design), \u00f6zge\u00e7mi\u015finizin farkl\u0131 ekran boyutlar\u0131ndaki cihazlarda (telefon, tablet, masa\u00fcst\u00fc) d\u00fczg\u00fcn g\u00f6r\u00fcnt\u00fclenmesini sa\u011flar. \u0130\u015fverenlerin b\u00fcy\u00fck bir k\u0131sm\u0131 \u00f6zge\u00e7mi\u015fleri mobil cihazlar\u0131ndan inceler. Mobil uyumlu olmayan bir \u00f6zge\u00e7mi\u015f, profesyonellikten uzak ve eri\u015filemez olarak alg\u0131lanabilir, bu da potansiyel f\u0131rsatlar\u0131 kaybetmenize neden olabilir.<\/dd>\n<dt>SEO optimizasyonu \u00f6zge\u00e7mi\u015fime nas\u0131l yard\u0131mc\u0131 olur?<\/dt>\n<dd>E\u011fer \u00f6zge\u00e7mi\u015finizi bir web sitesi olarak yay\u0131nl\u0131yorsan\u0131z, SEO (Arama Motoru Optimizasyonu) potansiyel i\u015fverenlerin veya i\u015fe al\u0131m uzmanlar\u0131n\u0131n sizi Google gibi arama motorlar\u0131nda bulmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Anahtar kelime kullan\u0131m\u0131, do\u011fru meta etiketleri ve temiz HTML yap\u0131s\u0131 sayesinde, &#8220;Frontend Geli\u015ftirici \u0130stanbul&#8221; gibi aramalarla daha kolay bulunabilirsiniz, bu da kariyer f\u0131rsatlar\u0131n\u0131 art\u0131r\u0131r.<\/dd>\n<\/dl>\n<p>#WebGeli\u015ftirme #HTMLCSS #\u00d6zge\u00e7mi\u015fOlu\u015fturma #DijitalKariyer #FrontendGeli\u015ftirme<\/p>\n<div class=\"github-example-link\"><strong>\u00d6rnek kod:<\/strong> <a href=\"https:\/\/github.com\/fatihsoysalcom\/basic-html-css-resume-template\" target=\"_blank\" rel=\"noopener noreferrer\">github.com\/fatihsoysalcom\/basic-html-css-resume-template<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i i\u015f piyasas\u0131nda, potansiyel i\u015fverenlerin dikkatini \u00e7ekmek her zamankinden daha zorlay\u0131c\u0131 bir hale geldi.","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":[126],"tags":[],"class_list":{"0":"post-42304","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","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>HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/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:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur?\" \/>\n<meta property=\"og:description\" content=\"G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i i\u015f piyasas\u0131nda, potansiyel i\u015fverenlerin dikkatini \u00e7ekmek her zamankinden daha zorlay\u0131c\u0131 bir hale geldi.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-04T18:12:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-04T18:12:58+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=\"28 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur?\",\"datePublished\":\"2026-06-04T18:12:15+00:00\",\"dateModified\":\"2026-06-04T18:12:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/\"},\"wordCount\":4340,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/\",\"name\":\"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-06-04T18:12:15+00:00\",\"dateModified\":\"2026-06-04T18:12:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur?\"}]},{\"@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":"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur?","og_description":"G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i i\u015f piyasas\u0131nda, potansiyel i\u015fverenlerin dikkatini \u00e7ekmek her zamankinden daha zorlay\u0131c\u0131 bir hale geldi.","og_url":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-06-04T18:12:15+00:00","article_modified_time":"2026-06-04T18:12:58+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"28 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur?","datePublished":"2026-06-04T18:12:15+00:00","dateModified":"2026-06-04T18:12:58+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/"},"wordCount":4340,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/","url":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/","name":"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-06-04T18:12:15+00:00","dateModified":"2026-06-04T18:12:58+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-ve-css-ile-etkileyici-bir-ozgecmis-nasil-olusturulur\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML ve CSS ile Etkileyici Bir \u00d6zge\u00e7mi\u015f Nas\u0131l Olu\u015fturulur?"}]},{"@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\/42304","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=42304"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/42304\/revisions"}],"predecessor-version":[{"id":42305,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/42304\/revisions\/42305"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=42304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=42304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=42304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}