{"id":3088,"date":"2021-11-24T09:35:40","date_gmt":"2021-11-24T09:35:40","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3088"},"modified":"2023-06-12T14:41:42","modified_gmt":"2023-06-12T14:41:42","slug":"css-tutorial-debugging-css","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-debugging-css\/","title":{"rendered":"CSS Tutorial &#8211; Debugging CSS"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; High five to Ahmad Shadeed for releasing his new book,\u00a0<a href=\"https:\/\/debuggingcss.com\/\" rel=\"noopener\">Debugging CSS<\/a>. I think that\u2019s a neat angle for a book on CSS. There are a ton of books on the general subject of CSS already, so not that they can\u2019t be fresh takes on that, but this feels equally important and less trodden territory.<\/p>\n<p>Browser DevTools help us a ton these days in debugging CSS, but there isn\u2019t exactly a step-by-step guide about about it that I know of. This book leans into that, showing off how to debug really practical and understandable CSS issues with the help of DevTools when appropriate.<\/p>\n<figure id=\"attachment_3089\" aria-describedby=\"caption-attachment-3089\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3089 size-full\" src=\"https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2020-12-10-at-1.59.17-PM.webp\" alt=\"CSS Tutorial - Debugging CSS\" width=\"1000\" height=\"680\" srcset=\"https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2020-12-10-at-1.59.17-PM.webp 1000w, https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2020-12-10-at-1.59.17-PM-300x204.webp 300w, https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/Screen-Shot-2020-12-10-at-1.59.17-PM-768x522.webp 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption id=\"caption-attachment-3089\" class=\"wp-caption-text\">CSS Tutorial &#8211; Debugging CSS<\/figcaption><\/figure>\n<p>I bought it because I\u2019m a CSS nerd obviously \u2014 not really because I feel like I need to bone up on my CSS debugging. I really wanna support Ahmad because he really got the #1 gold star \u2b50\ufe0f for CSS blogging this year.\u00a0<a href=\"https:\/\/ishadeed.com\/articles\/\" rel=\"noopener\">Every post of his<\/a>\u00a0was an extremely well done deep dive into some important area of CSS.<\/p>\n<h2><a class=\"button\" href=\"https:\/\/debuggingcss.com\/\">DIRECT LINK \u2192<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; High five to Ahmad Shadeed for releasing his new <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-debugging-css\/\" title=\"CSS Tutorial &#8211; Debugging CSS\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[268,197,287,103,227],"newstopic":[573,572],"class_list":{"0":"post-3088","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-grid","10":"tag-css-tutorial","11":"tag-debugging-css","12":"tag-web-design","13":"tag-web-designer","14":"newstopic-css","15":"newstopic-html"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3088"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3088\/revisions"}],"predecessor-version":[{"id":3091,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3088\/revisions\/3091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3788"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3088"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}