{"id":311790,"date":"2020-05-26T15:15:35","date_gmt":"2020-05-26T22:15:35","guid":{"rendered":"https:\/\/css-tricks.com\/?p=311790"},"modified":"2020-05-26T15:15:36","modified_gmt":"2020-05-26T22:15:36","slug":"css-tips-for-new-devs","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-tips-for-new-devs\/","title":{"rendered":"CSS Tips for New Devs"},"content":{"rendered":"\n

Amber Wilson has some CSS Tips for New Devs<\/a>, like:<\/p>\n\n\n\n

It’s not a good idea to fix shortcomings in your HTML with CSS. Fix your HTML first!<\/p><\/blockquote>\n\n\n\n

And…<\/p>\n\n\n\n

You can change CSS right in your browser’s DevTools (to open them, right-click the browser window and choose “inspect” or “inspect element”). The great thing is, none of the styles will be saved so you can experiment here! Another great thing about the DevTools is the “computed styles” tab, because this shows you exactly what styles are currently applied to an element. This can be really helpful when it comes to debugging your CSS!<\/p><\/blockquote>\n\n\n\n

There are 24 tips there. I “counted” by using DevTools to change the <ul><\/code> to an <ol><\/code>. 😉<\/p>\n","protected":false},"excerpt":{"rendered":"

Amber Wilson has some CSS Tips for New Devs, like: It’s not a good idea to fix shortcomings in your HTML with CSS. Fix your HTML first! And… You can change CSS right in your browser’s DevTools (to open them, right-click the browser window and choose “inspect” or “inspect element”). The great thing is, none […]<\/p>\n","protected":false},"author":3,"featured_media":311814,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/lighbulbs-in-squares.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":251777,"url":"https:\/\/css-tricks.com\/set-timed-debugger-web-inspect-hard-grab-elements\/","url_meta":{"origin":311790,"position":0},"title":"Set a Timed Debugger To Web Inspect Hard-To-Grab Elements","date":"February 22, 2017","format":false,"excerpt":"Triggering a debugger; statement at just the right moment can help you select a DOM element that is really hard (or impossible) to get selected in DevTools. You can do that directly in your code, or, through a setTimeout right in the console, so you can get the DOM just\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":317687,"url":"https:\/\/css-tricks.com\/whats-new-in-devtools-2020\/","url_meta":{"origin":311790,"position":1},"title":"A Look at What’s New in Chrome DevTools in 2020","date":"July 31, 2020","format":false,"excerpt":"I\u2019m excited to share some of the newer features in Chrome DevTools with you. There\u2019s a brief introduction below, and then we\u2019ll cover many of the new DevTools features. We\u2019ll also look at what\u2019s happening in some other browsers. I keep up with this stuff, as I create Dev Tips,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":377264,"url":"https:\/\/css-tricks.com\/some-cross-browser-devtools-features-you-might-not-know\/","url_meta":{"origin":311790,"position":2},"title":"Some Cross-Browser DevTools Features You Might Not Know","date":"March 22, 2023","format":false,"excerpt":"I spend a lot of time in DevTools, and I\u2019m sure you do too. Sometimes I even bounce between them, especially when I\u2019m debugging cross-browser issues. DevTools is a lot like browsers themselves \u2014 not all of the features in one browser\u2019s DevTools will be the same or supported in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?fit=1200%2C862&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":207175,"url":"https:\/\/css-tricks.com\/six-tips-for-chrome-devtools\/","url_meta":{"origin":311790,"position":3},"title":"Six Tips for Chrome DevTools","date":"August 28, 2015","format":false,"excerpt":"The following is a guest post by Umar Hansa. Umar has a newsletter I'm a fan of and graciously offered to write this guest post in that style. I'll let him introduce himself. Hey, I'm Umar. I like to share web development related tips on Twitter (@umaar) and also through\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253132,"url":"https:\/\/css-tricks.com\/using-devtools-tweak-designs-browser\/","url_meta":{"origin":311790,"position":4},"title":"Using DevTools to Tweak Designs in the Browser","date":"March 28, 2017","format":false,"excerpt":"Let's look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy! Toggling Classes With Checkboxes This is useful when trying to pick a design from different options or to toggle the active state of an\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/firefox-screenshot.jpg?fit=1200%2C950&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":319499,"url":"https:\/\/css-tricks.com\/comparing-browsers-for-responsive-design\/","url_meta":{"origin":311790,"position":5},"title":"Comparing Browsers for Responsive Design","date":"September 1, 2020","format":false,"excerpt":"There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing CSS and making sure it's working across all the viewports in a single glance. They are all very similar. For\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/Screen-Shot-2020-08-26-at-11.16.23-AM.png?fit=1200%2C748&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/311790"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=311790"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/311790\/revisions"}],"predecessor-version":[{"id":311871,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/311790\/revisions\/311871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/311814"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=311790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=311790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=311790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}