{"id":30128,"date":"2025-09-24T02:00:33","date_gmt":"2025-09-23T23:00:33","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/"},"modified":"2025-09-24T02:00:33","modified_gmt":"2025-09-23T23:00:33","slug":"css-pro-yolculugum-9-gun-keith-grant-ile","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/","title":{"rendered":"CSS Pro Yolculu\u011fum: 9. G\u00fcn &#8211; Keith Grant ile"},"content":{"rendered":"<p>CSS Pro Yolculu\u011fum: 9. G\u00fcn &#8211; Keith Grant ile<\/p>\n<p>Web geli\u015ftirmede kusursuz g\u00f6rsel deneyim sunmak i\u00e7in CSS&#039;in g\u00fcc\u00fcnden yararlanmak istiyorsunuz ama nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilmiyor musunuz?  Bu makale, Keith Grant&#039;in CSS e\u011fitimiyle 9. g\u00fcn deneyimlerimi payla\u015farak, CSS yolculu\u011funuza \u0131\u015f\u0131k tutmay\u0131 ama\u00e7l\u0131yor.  Temelden ileri seviyeye kadar ad\u0131m ad\u0131m ilerleyecek, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle desteklenmi\u015f bir rehber sunaca\u011f\u0131m.  Haz\u0131rsan\u0131z, dalal\u0131m!<\/p>\n<h2>CSS Temelleri: Selekt\u00f6rler ve \u00d6zellikler<\/h2>\n<p>CSS&#039;in temelini anlamak, ba\u015far\u0131l\u0131 bir web geli\u015ftirici olmak i\u00e7in olmazsa olmazd\u0131r.  Bu b\u00f6l\u00fcmde, selekt\u00f6rler ve CSS \u00f6zelliklerini ele alarak, temel bir CSS kodlama anlay\u0131\u015f\u0131 kazanaca\u011f\u0131z. \u00d6rne\u011fin,  <code>id<\/code> selekt\u00f6r\u00fc (<code>#myElement<\/code>),  <code>class<\/code> selekt\u00f6r\u00fc (<code>.myClass<\/code>) ve element selekt\u00f6r\u00fc ( <code>p<\/code> ) gibi farkl\u0131 selekt\u00f6r t\u00fcrlerini ve bunlar\u0131n nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 \u00f6\u011frenece\u011fiz.  Bunlar\u0131 birle\u015ftirerek,  birden fazla eleman\u0131 ayn\u0131 anda hedefleyebiliriz. \u00d6rne\u011fin,  <code>p.myClass<\/code>  s\u0131n\u0131f\u0131 <code>myClass<\/code> olan t\u00fcm paragraflar\u0131 se\u00e7ecektir.<\/p>\n<p>\u00d6te yandan, CSS \u00f6zelliklerini kullanarak web sayfalar\u0131m\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftiririz.  Renk (<code>color<\/code>), yaz\u0131 tipi (<code>font-family<\/code>, <code>font-size<\/code>), arka plan (<code>background-color<\/code>, <code>background-image<\/code>) gibi temel \u00f6zellikler, web sayfalar\u0131na stil kazand\u0131rmada b\u00fcy\u00fck rol oynar.  \u00d6rne\u011fin, bir paragraf\u0131n rengini de\u011fi\u015ftirmek i\u00e7in  <code>p { color: blue; }<\/code> kodunu kullanabiliriz. Bu basit \u00f6rnek, CSS&#039;in g\u00fcc\u00fcn\u00fc ve \u00f6zelle\u015ftirme kapasitesini g\u00f6stermektedir.<\/p>\n<p>Bunlara ek olarak, CSS&#039;in en \u00f6nemli kavramlar\u0131ndan biri olan kutu modeli (box model) kavram\u0131n\u0131 da anlamak olduk\u00e7a \u00f6nemlidir.  Kutu modeli, HTML elementlerini \u00e7evreleyen kenarl\u0131klar, dolgular ve marjinler gibi kavramlar\u0131 kapsar.  Bu kavramlar\u0131n do\u011fru bir \u015fekilde anla\u015f\u0131lmas\u0131 ve kullan\u0131m\u0131, web sayfalar\u0131n\u0131n d\u00fczenlenmesi ve stil verilmesi a\u00e7\u0131s\u0131ndan olduk\u00e7a kritiktir.  Yanl\u0131\u015f kullan\u0131lmas\u0131 halinde, web sayfan\u0131zda beklenmedik bi\u00e7imsel sorunlar ortaya \u00e7\u0131kabilir. Daha ayr\u0131nt\u0131l\u0131 bilgi i\u00e7in (https:\/\/fatihsoysal.com) ziyaret edebilirsiniz.<\/p>\n<h2>CSS Uygulamas\u0131: Ad\u0131m Ad\u0131m \u00d6rnek<\/h2>\n<p>\u015eimdi teorik bilgileri prati\u011fe d\u00f6kelim.  A\u015fa\u011f\u0131daki \u00f6rnekte, bir paragraf eleman\u0131na basit bir stil uygulayaca\u011f\u0131z:<\/p>\n<p><\/code>html<\/p>\n<p class=\"baslik\">Bu bir paragraft\u0131r.<\/p>\n<style>\n.baslik {\n  color: green;\n  font-size: 24px;\n  text-align: center;\n}\n<\/style>\n<pre><code class=\"language-plaintext\"><p>Bu kod blo\u011fu, <code>baslik<\/code> s\u0131n\u0131f\u0131na sahip paragraf eleman\u0131n\u0131n rengini ye\u015file, yaz\u0131 boyutunu 24 piksele ve metin hizalamas\u0131n\u0131 ortaya ayarlar.  Bu basit \u00f6rnek, CSS&#039;in nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 g\u00f6sterir.  Daha karma\u015f\u0131k d\u00fczenlemeler i\u00e7in daha fazla CSS kodu yazmam\u0131z gerekecektir. Bu kod blo\u011funun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlayarak, daha karma\u015f\u0131k CSS kodlar\u0131n\u0131 da yazabilirsiniz.  Unutmay\u0131n, CSS \u00f6\u011frenimi s\u00fcrekli bir \u00f6\u011frenme s\u00fcrecidir.  Pratik yaparak ve kod \u00f6rneklerini inceleyerek daha h\u0131zl\u0131 ilerleyebilirsiniz.<\/p>\n\n<h2>Responsive Design ve Media Queries<\/h2>\n\n<p>G\u00fcn\u00fcm\u00fczde, web sayfalar\u0131n\u0131n farkl\u0131 ekran boyutlar\u0131nda d\u00fczg\u00fcn bir \u015fekilde g\u00f6r\u00fcnt\u00fclenmesi b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.  Responsive design (duyarl\u0131 tasar\u0131m) i\u015fte burada devreye girer. Media Queries, farkl\u0131 ekran boyutlar\u0131na g\u00f6re farkl\u0131 CSS kurallar\u0131 uygulaman\u0131za olanak tan\u0131r.  \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlarda (\u00f6rne\u011fin, cep telefonlar\u0131) metin boyutunu k\u00fc\u00e7\u00fcltmek veya baz\u0131 elemanlar\u0131 gizlemek isteyebilirsiniz.  Bunun i\u00e7in, <code>@media<\/code> kural\u0131n\u0131 kullanabilirsiniz:<\/p><\/pre>\n<p><\/code><\/p>\n<pre><code class=\"language-plaintext\">css\n@media (max-width: 768px) {\n  .myElement {\n    font-size: 14px;\n  }\n  .gizle {\n    display: none;\n  }\n}<\/pre>\n<p><\/code><\/p>\n<p>Bu kod, ekran geni\u015fli\u011fi 768 pikselden k\u00fc\u00e7\u00fck oldu\u011funda, <code>.myElement<\/code> s\u0131n\u0131f\u0131na sahip eleman\u0131n yaz\u0131 boyutunu 14 piksele d\u00fc\u015f\u00fcr\u00fcr ve <code>.gizle<\/code> s\u0131n\u0131f\u0131na sahip eleman\u0131 gizler.  Media Queries&#039;i kullanarak, web sitenizin farkl\u0131 cihazlarda m\u00fckemmel bir \u015fekilde g\u00f6r\u00fcnt\u00fclenmesini sa\u011flayabilirsiniz.  Bu \u00f6zellik, g\u00fcn\u00fcm\u00fcz web tasar\u0131m\u0131nda olmazsa olmazd\u0131r ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.  Daha fazla ipucu i\u00e7in (https:\/\/fatihsoysal.com) adresini ziyaret edebilirsiniz.<\/p>\n<h2>CSS \u00d6ni\u015flemcileri: Sass ve Less<\/h2>\n<p>Karma\u015f\u0131k CSS projelerinde, CSS kodunu daha d\u00fczenli ve okunabilir hale getirmek i\u00e7in CSS \u00f6ni\u015flemcileri kullanmak olduk\u00e7a faydal\u0131d\u0131r.  Sass (Syntactically Awesome Style Sheets) ve Less, en pop\u00fcler CSS \u00f6ni\u015flemcileridir.  Bu ara\u00e7lar, de\u011fi\u015fkenler, kar\u0131\u015f\u0131mlar (mixins), fonksiyonlar ve daha bir\u00e7ok geli\u015fmi\u015f \u00f6zelli\u011fi sunarak CSS kodunuzu daha y\u00f6netilebilir hale getirir.  \u00d6rne\u011fin, Sass ile de\u011fi\u015fkenler tan\u0131mlayarak renkleri ve yaz\u0131 tiplerini tek bir yerde y\u00f6netebilir ve kod tekrar\u0131n\u0131 \u00f6nleyebilirsiniz.<\/p>\n<p>\u00d6ni\u015flemciler sayesinde, b\u00fcy\u00fck CSS projelerini daha etkin bir \u015fekilde y\u00f6netebilir ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131rabilirsiniz.  Daha temiz ve daha organize bir kod yap\u0131s\u0131, hem sizin hem de di\u011fer geli\u015ftiriciler i\u00e7in daha anla\u015f\u0131l\u0131r bir CSS yap\u0131s\u0131 anlam\u0131na gelir.  Bu da hatalar\u0131 azalt\u0131r ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.  Bu ara\u00e7lar\u0131n \u00f6\u011frenilmesi ba\u015flang\u0131\u00e7ta biraz zaman alabilir, ancak uzun vadede size b\u00fcy\u00fck fayda sa\u011flayacakt\u0131r.<\/p>\n<h2>\u00d6\u011frenme Yol Haritas\u0131: Yeni Ba\u015flayan \u2192 Orta \u2192 \u0130leri D\u00fczey<\/h2>\n<h3>Yeni Ba\u015flayan<\/h3>\n<ul>\n<li>Temel selekt\u00f6rler ve \u00f6zellikler<\/li>\n<li>Kutu modeli (box model)<\/li>\n<li>CSS ile basit d\u00fczenlemeler<\/li>\n<li>Inline, internal ve external CSS<\/li>\n<\/ul>\n<h3>Orta Seviye<\/h3>\n<ul>\n<li>Responsive design ve media queries<\/li>\n<li>CSS \u00f6ni\u015flemcileri (Sass, Less)<\/li>\n<li>Flexbox ve Grid d\u00fczenleme sistemleri<\/li>\n<li>CSS animasyonlar\u0131 ve ge\u00e7i\u015fler<\/li>\n<\/ul>\n<h3>\u0130leri D\u00fczey<\/h3>\n<ul>\n<li>CSS Architectures (BEM, OOCSS, SMACSS)<\/li>\n<li>Performans optimizasyonu teknikleri<\/li>\n<li>CSS preprocessor&#039;lar\u0131n geli\u015fmi\u015f \u00f6zellikleri<\/li>\n<li>CSS frameworks (Bootstrap, Tailwind CSS)<\/li>\n<\/ul>\n<h2>Ger\u00e7ek D\u00fcnya Senaryosu: E-Ticaret Sitesi Tasar\u0131m\u0131<\/h2>\n<p>Bir e-ticaret sitesi tasar\u0131m\u0131 d\u00fc\u015f\u00fcn\u00fcn.  \u00dcr\u00fcn kartlar\u0131n\u0131n d\u00fczenlenmesi, \u00fcr\u00fcn resimlerinin boyutland\u0131r\u0131lmas\u0131, fiyat ve a\u00e7\u0131klama metinlerinin formatlanmas\u0131 gibi bir\u00e7ok CSS gerektiren tasar\u0131m unsuru vard\u0131r.  Bu noktada, Flexbox veya Grid gibi g\u00fc\u00e7l\u00fc d\u00fczenleme sistemleri devreye girer.  Bunlar, responsif bir d\u00fczen olu\u015fturmak ve farkl\u0131 ekran boyutlar\u0131nda tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm sa\u011flamak i\u00e7in idealdir.  Ayr\u0131ca,  her bir \u00fcr\u00fcn kart\u0131 i\u00e7in \u00f6zel CSS s\u0131n\u0131flar\u0131 tan\u0131mlayarak, her bir \u00fcr\u00fcn i\u00e7in benzersiz stiller uygulayabilirsiniz.   Kullan\u0131c\u0131 dostu ve temiz bir aray\u00fcz olu\u015fturmak i\u00e7in do\u011fru renk se\u00e7imi ve tipografi kullan\u0131m\u0131 olduk\u00e7a \u00f6nemlidir.  Do\u011fru renk paleti ve font se\u00e7imiyle marka kimli\u011fini yans\u0131tan \u015f\u0131k bir tasar\u0131m elde edebilirsiniz.<\/p>\n<p>\u00d6rne\u011fin, \u00fcr\u00fcn g\u00f6rsellerinin belirli bir boyuta otomatik olarak \u00f6l\u00e7eklendirilmesi i\u00e7in CSS&#039;in <code>object-fit<\/code> \u00f6zelli\u011fini kullanabilirsiniz.  Bu sayede, her g\u00f6r\u00fcnt\u00fc y\u00fcksekli\u011fi veya geni\u015fli\u011finden ba\u011f\u0131ms\u0131z olarak d\u00fczenli bir \u015fekilde g\u00f6r\u00fcnt\u00fclenecektir. Ayr\u0131ca, \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131n\u0131n uzunluk s\u0131n\u0131rlamas\u0131 i\u00e7in <code>text-overflow<\/code> \u00f6zelli\u011fini kullanabilirsiniz.  Bu \u00f6zellikler, temiz ve d\u00fczenli bir tasar\u0131m olu\u015fturmada b\u00fcy\u00fck rol oynar.<\/p>\n<h2>Performans Kar\u015f\u0131la\u015ft\u0131rmas\u0131: Inline vs. External CSS<\/h2>\n<p>| Y\u00f6ntem       | Avantajlar                                      | Dezavantajlar                                     |<br \/>\n|--------------|---------------------------------------------------|----------------------------------------------------|<br \/>\n| Inline CSS    | Basit, h\u0131zl\u0131                                    | Bak\u0131m zorlu\u011fu, kod tekrar\u0131, okunabilirlik d\u00fc\u015f\u00fckl\u00fc\u011f\u00fc |<br \/>\n| Internal CSS  | Bir sayfaya \u00f6zel stiller, h\u0131zl\u0131                 | Bak\u0131m zorlu\u011fu, kod tekrar\u0131                         |<br \/>\n| External CSS  | Bak\u0131m kolayl\u0131\u011f\u0131, kod tekrar\u0131 \u00f6nleme, okunabilirlik |  Ek HTTP iste\u011fi                                 |<\/p>\n<div class=\"uyari\">\n<h3>Dikkat!<\/h3>\n<p>\u00c7ok fazla inline CSS kullanmaktan ka\u00e7\u0131n\u0131n.  Bu, CSS kodunun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n<\/div>\n<h2>Sonu\u00e7<\/h2>\n<p>Keith Grant ile CSS yolculu\u011fumun 9. g\u00fcn\u00fcnde, temel kavramlardan ileri d\u00fczey konulara kadar geni\u015f bir yelpazede bilgi edindim.  Bu makalede,  CSS&#039;in temel prensiplerini, uygulamal\u0131 \u00f6rneklerle birlikte anlatt\u0131m.  Responsive tasar\u0131m ve CSS \u00f6ni\u015flemcileri gibi \u00f6nemli konulara da de\u011findim.  Umar\u0131m bu rehber, CSS yolculu\u011funuza \u0131\u015f\u0131k tutmu\u015ftur.  Daha fazla bilgi ve kaynak i\u00e7in (https:\/\/fatihsoysal.com) web sitesini ziyaret edebilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li><strong>CSS nedir?<\/strong> CSS (Cascading Style Sheets), web sayfalar\u0131n\u0131n stilini kontrol etmek i\u00e7in kullan\u0131lan bir stil dilidir.<\/li>\n<li><strong>CSS \u00f6\u011frenmek ne kadar s\u00fcrer?<\/strong> Bu, bireyin \u00f6\u011frenme h\u0131z\u0131na ve \u00f6zverisine ba\u011fl\u0131 olarak de\u011fi\u015fir, ancak temel bilgileri \u00f6\u011frenmek birka\u00e7 hafta s\u00fcrebilir.<\/li>\n<li><strong>Hangi CSS \u00e7er\u00e7evelerini \u00f6\u011frenmeliyim?<\/strong> Bootstrap ve Tailwind CSS gibi pop\u00fcler \u00e7er\u00e7eveleri \u00f6\u011frenmek faydal\u0131 olabilir.<\/li>\n<li><strong>CSS performans\u0131n\u0131 nas\u0131l iyile\u015ftirebilirim?<\/strong>  CSS se\u00e7icilerini optimize etmek, gereksiz stilleri kald\u0131rmak ve CSS dosyalar\u0131n\u0131 s\u0131k\u0131\u015ft\u0131rmak performans\u0131 art\u0131rabilir.<\/li>\n<li><strong>CSS&#039;te hata ay\u0131klama nas\u0131l yap\u0131l\u0131r?<\/strong>  Taray\u0131c\u0131lar\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 kullanarak CSS hatalar\u0131n\u0131 ay\u0131klayabilirsiniz.<\/li>\n<\/ul>\n<p>Yazar: Fatih Soysal<\/p>\n<p><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"CSS Pro Yolculu\u011fum: 9. G\u00fcn &#8211; Keith Grant ile Web geli\u015ftirmede kusursuz g\u00f6rsel deneyim sunmak i\u00e7in CSS&#039;in g\u00fcc\u00fcnden&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":[126],"tags":[],"class_list":{"0":"post-30128","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>CSS Pro Yolculu\u011fum: 9. G\u00fcn - Keith Grant ile<\/title>\n<meta name=\"description\" content=\"Web geli\u015ftirmede kusursuz g\u00f6rsel deneyim sunmak i\u00e7in CSS&#039;in g\u00fcc\u00fcnden yararlanmak istiyorsunuz ama nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilmiyor musunuz? Bu makale, Keith Grant&#039;in CSS e\u011fitimiyle 9. g\u00fcn deneyimlerimi payla\u015farak, CSS yolculu\u011funuza \u0131\u015f\u0131k tutmay\u0131 ama\u00e7l\u0131yor. Temelden ileri seviyeye kadar ad\u0131m ad\u0131m ilerleyecek, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle desteklenmi\u015f bir rehber sunaca\u011f\u0131m. Haz\u0131rsan\u0131z, dalal\u0131m!\" \/>\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\/css-pro-yolculugum-9-gun-keith-grant-ile\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Pro Yolculu\u011fum: 9. G\u00fcn - Keith Grant ile\" \/>\n<meta property=\"og:description\" content=\"Web geli\u015ftirmede kusursuz g\u00f6rsel deneyim sunmak i\u00e7in CSS&#039;in g\u00fcc\u00fcnden yararlanmak istiyorsunuz ama nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilmiyor musunuz? Bu makale, Keith Grant&#039;in CSS e\u011fitimiyle 9. g\u00fcn deneyimlerimi payla\u015farak, CSS yolculu\u011funuza \u0131\u015f\u0131k tutmay\u0131 ama\u00e7l\u0131yor. Temelden ileri seviyeye kadar ad\u0131m ad\u0131m ilerleyecek, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle desteklenmi\u015f bir rehber sunaca\u011f\u0131m. Haz\u0131rsan\u0131z, dalal\u0131m!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-23T23:00:33+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=\"7 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS Pro Yolculu\u011fum: 9. G\u00fcn &#8211; Keith Grant ile\",\"datePublished\":\"2025-09-23T23:00:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/\"},\"wordCount\":1202,\"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\/css-pro-yolculugum-9-gun-keith-grant-ile\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/\",\"name\":\"CSS Pro Yolculu\u011fum: 9. G\u00fcn - Keith Grant ile\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-23T23:00:33+00:00\",\"description\":\"Web geli\u015ftirmede kusursuz g\u00f6rsel deneyim sunmak i\u00e7in CSS'in g\u00fcc\u00fcnden yararlanmak istiyorsunuz ama nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilmiyor musunuz? Bu makale, Keith Grant'in CSS e\u011fitimiyle 9. g\u00fcn deneyimlerimi payla\u015farak, CSS yolculu\u011funuza \u0131\u015f\u0131k tutmay\u0131 ama\u00e7l\u0131yor. Temelden ileri seviyeye kadar ad\u0131m ad\u0131m ilerleyecek, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle desteklenmi\u015f bir rehber sunaca\u011f\u0131m. Haz\u0131rsan\u0131z, dalal\u0131m!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Pro Yolculu\u011fum: 9. G\u00fcn &#8211; Keith Grant ile\"}]},{\"@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":"CSS Pro Yolculu\u011fum: 9. G\u00fcn - Keith Grant ile","description":"Web geli\u015ftirmede kusursuz g\u00f6rsel deneyim sunmak i\u00e7in CSS'in g\u00fcc\u00fcnden yararlanmak istiyorsunuz ama nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilmiyor musunuz? Bu makale, Keith Grant'in CSS e\u011fitimiyle 9. g\u00fcn deneyimlerimi payla\u015farak, CSS yolculu\u011funuza \u0131\u015f\u0131k tutmay\u0131 ama\u00e7l\u0131yor. Temelden ileri seviyeye kadar ad\u0131m ad\u0131m ilerleyecek, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle desteklenmi\u015f bir rehber sunaca\u011f\u0131m. Haz\u0131rsan\u0131z, dalal\u0131m!","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\/css-pro-yolculugum-9-gun-keith-grant-ile\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS Pro Yolculu\u011fum: 9. G\u00fcn - Keith Grant ile","og_description":"Web geli\u015ftirmede kusursuz g\u00f6rsel deneyim sunmak i\u00e7in CSS'in g\u00fcc\u00fcnden yararlanmak istiyorsunuz ama nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilmiyor musunuz? Bu makale, Keith Grant'in CSS e\u011fitimiyle 9. g\u00fcn deneyimlerimi payla\u015farak, CSS yolculu\u011funuza \u0131\u015f\u0131k tutmay\u0131 ama\u00e7l\u0131yor. Temelden ileri seviyeye kadar ad\u0131m ad\u0131m ilerleyecek, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle desteklenmi\u015f bir rehber sunaca\u011f\u0131m. Haz\u0131rsan\u0131z, dalal\u0131m!","og_url":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-23T23:00:33+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"7 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS Pro Yolculu\u011fum: 9. G\u00fcn &#8211; Keith Grant ile","datePublished":"2025-09-23T23:00:33+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/"},"wordCount":1202,"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\/css-pro-yolculugum-9-gun-keith-grant-ile\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/","url":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/","name":"CSS Pro Yolculu\u011fum: 9. G\u00fcn - Keith Grant ile","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-23T23:00:33+00:00","description":"Web geli\u015ftirmede kusursuz g\u00f6rsel deneyim sunmak i\u00e7in CSS'in g\u00fcc\u00fcnden yararlanmak istiyorsunuz ama nereden ba\u015flayaca\u011f\u0131n\u0131z\u0131 bilmiyor musunuz? Bu makale, Keith Grant'in CSS e\u011fitimiyle 9. g\u00fcn deneyimlerimi payla\u015farak, CSS yolculu\u011funuza \u0131\u015f\u0131k tutmay\u0131 ama\u00e7l\u0131yor. Temelden ileri seviyeye kadar ad\u0131m ad\u0131m ilerleyecek, ger\u00e7ek d\u00fcnya \u00f6rnekleriyle desteklenmi\u015f bir rehber sunaca\u011f\u0131m. Haz\u0131rsan\u0131z, dalal\u0131m!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-pro-yolculugum-9-gun-keith-grant-ile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Pro Yolculu\u011fum: 9. G\u00fcn &#8211; Keith Grant ile"}]},{"@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\/30128","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=30128"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30128\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}