{"id":281338,"date":"2019-01-22T08:10:58","date_gmt":"2019-01-22T15:10:58","guid":{"rendered":"http:\/\/css-tricks.com\/?p=281338"},"modified":"2019-01-22T08:10:58","modified_gmt":"2019-01-22T15:10:58","slug":"the-secret-weapon-to-learning-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-secret-weapon-to-learning-css\/","title":{"rendered":"The Secret Weapon to Learning CSS"},"content":{"rendered":"

For some reason, I\u2019ve lately been thinking a lot about what it takes to break into the web design industry and learn CSS. I reckon it has something to do with Keith Grant\u2019s post earlier this month on a CSS mental model<\/a> where he talks about a \u201ccommon core for CSS\u201d:<\/p>\n

We need common core tricks like this for CSS. Not \u201ctricks\u201d in the old sense (like how to fake a gradient border), but mental patterns: ways to frame the problem in our heads, so we can break problems into their constituent parts and notice recurring patterns. Those of us who deeply understand the language do this internally. We need to start working on distilling out these mental patterns we use for understanding layout and positioning and working with relative units, so that we can articulate them to others.<\/p><\/blockquote>\n

<\/p>\n

On this note, Rachel Andrew also wrote about how to learn CSS<\/a>, but in this case, she focuses more on technical CSS specifics:<\/p>\n

For much of CSS, you don\u2019t need to worry about learning properties and values by heart. You can look them up when you need them. However, there are some key underpinnings of the language, without which you will struggle to make sense of it. It really is worth dedicating some time to making sure you understand these things, as it will save you a lot of time and frustration in the long run.<\/p><\/blockquote>\n

This ties in nicely with Andy Bell’s “CSS doesn\u2019t suck”<\/a> argument. Andy says that perhaps the reason why people attack CSS so often is because they simply don\u2019t fundamentally understand it and thereby don\u2019t respect why it works the way it does:<\/p>\n

It\u2019s getting exhausting spending so much of my time defending one of the three pillars of the web: CSS. It should sit equal with HTML and JavaScript to produce accessible, progressively enhanced websites and web apps that help everyone achieve what they need to achieve.<\/p><\/blockquote>\n

As I read these and other posts, I couldn\u2019t stop thinking about the advice that I would give to a fledgling developer who’s interested in web design and CSS\u2014where would I recommend that they start? There\u2019s so much to cover that merely thinking about it gives me a headache.<\/p>\n

\n

Personally, I often start with the basics of HTML and slowly introduce folks to CSS properties like color<\/code> or font-family<\/code>. But this sort of advice is generally only useful if you\u2019re sitting right next to someone and have the time to explain everything about HTML and CSS: how to lay out a page, how to handle performance, how to think about progressive enhancement, etc. These topics alone are worthy of a month-long workshop—and that\u2019s only the beginning!<\/p>\n

Where to get started then? What sort of advice would help a student in the long run?<\/strong><\/p>\n

\n

My experience in the industry probably matches that of a lot of other web designers: I didn\u2019t go to school for this. I figured things out by myself while using referential sites like CSS-Tricks and Smashing Magazine to fill in the gaps. I would start with a project (like making a website for my high school band—and no, I will tell you the name of it), and in the process, I would haphazardly learn about typesetting, Sass, build tools, as well as accessible, hand-written markup.<\/p>\n

Hear me out, but I don\u2019t think the best<\/em> way to get started in the web design industry is to learn the latest doodad or widget. Yes, you\u2019ll have to get to that eventually. Or maybe not. At some point, getting a firm handle on flexbox and grid and memorizing a few properties is a good thing to do. But I want to teach web designers to fish and make sure that they can set themselves up for the future. And the best way to fish for CSS probably won’t be found in a particular book or classroom curriculum. Instead, I think it\u2019s best to recommend something else entirely.<\/p>\n

My advice can be summarized in just four words: Get an RSS reader.<\/strong><\/p>\n

After thinking about this, I figured out that the most useful advice I can give is to get involved with the community—and, for me, that has been via RSS. Find a ton of blogs and subscribe to them. Over time, you\u2019ll not only learn about the craft, but have a hefty (and hopefully organized) set of resources that cover basics, tricks, standards, personal struggles, and news, among many, many other things.<\/p>\n

\n

This is still how I learn about web design today. RSS is the most important tool I have to help me continue learning about the web—from working with tiny CSS properties to giant frameworks. Sure, Twitter is a good place to learn from (and even connect with) heavy hitters in the web design industry quickly, but there\u2019s no better technology than RSS to constantly keep yourself informed of how people are thinking about CSS and web development.<\/p>\n

With that, I encourage you (yes, you<\/em>) to get an RSS reader if you don’t already have one, or dust off the one you do have if it’s been a while. I use Reeder 3<\/a> on OSX and iOS and pair that with Feedbin<\/a>. From there, subscribe to a ton of blogs or follow a lot of folks on Twitter to find their websites. There’s no shortage of material or sources out there!<\/p>\n

This sounds like a silly thing to recommend but fitting yourself into the web design community is more important than learning about any cool CSS trick. You\u2019ll be creating an environment where you can constantly learn new things for the future. And I promise that, once you start, finding people who care about web development and, ultimately, learning about CSS, isn\u2019t as intimidating as it could be on your own.<\/p>\n

\n

Which websites should you subscribe to? Well, Stuart Robson made a wonderful list<\/a> of all the websites that he subscribes to via RSS\u2014you should be able to download that file and drop it straight into your RSS reader. Also, Rachel Andrew made a great list of websites a while back when she asked what\u2019s happening in CSS<\/a>? And of course our very own newsletter, This Week in Web Design and Development<\/a>, is certainly a good place to start, too. Speaking of email and newsletters\u2014Dev Tips<\/a> by Umar Hansa is another great resource where I\u2019m constantly learning new things about Chrome\u2019s DevTools. <\/p>\n

What websites do you like though? What\u2019s the best resource for keeping up with CSS? Let us know in the comments below!<\/p>\n","protected":false},"excerpt":{"rendered":"

For some reason, I\u2019ve lately been thinking a lot about what it takes to break into the web design industry and learn CSS. I reckon it has something to do with Keith Grant\u2019s post earlier this month on a CSS mental model where he talks about a \u201ccommon core for CSS\u201d: We need common core […]<\/p>\n","protected":false},"author":223806,"featured_media":269686,"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":"How does someone crack into CSS? Robin has some ideas, including an oldie but goodie.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[870],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/rss-pattern.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":359234,"url":"https:\/\/css-tricks.com\/the-vite-ecosystem\/","url_meta":{"origin":281338,"position":0},"title":"The Vite Ecosystem","date":"December 15, 2021","format":false,"excerpt":"Matias Capeletto covers the breadth of Vite, from the technological shoulders it stands on, to the peers exploring similar territory, to the other technologies it supports, to the frameworks that now use it primarily, and more. The fact that that a post that is this thick like this exists is\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/vite-ecosystem.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325536,"url":"https:\/\/css-tricks.com\/css-background-patterns\/","url_meta":{"origin":281338,"position":1},"title":"CSS Background Patterns","date":"November 16, 2020","format":false,"excerpt":"Nice little tool from Jim Raptis: CSS Background Patterns. A bunch of easy-to-customize and copy-and-paste backgrounds that use hard stop CSS gradients to make classy patterns. Not quite as flexible as SVG backgrounds, but just as lightweight. Like this: CodePen Embed Fallback Speaking of cool background gradient tricks, check out\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-3.58.15-PM.png?fit=1200%2C916&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366468,"url":"https:\/\/css-tricks.com\/web-development-books-you-can-get-for-free\/","url_meta":{"origin":281338,"position":2},"title":"Great (and Free!) Web Development Books You Can Get Online","date":"June 27, 2022","format":false,"excerpt":"Right after \"Where is the best place to learn?\" perhaps the most commonly asked question I hear from folks getting into code is \"What web development books should I get to learn?\" Well, consider this an answer to that question as I've curated a list of books that are not\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/books-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367158,"url":"https:\/\/css-tricks.com\/implicit-grids-repeatable-layout-patterns-and-danglers\/","url_meta":{"origin":281338,"position":3},"title":"Implicit Grids, Repeatable Layout Patterns, and Danglers","date":"August 2, 2022","format":false,"excerpt":"Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content we throw at it? The specific situation is when a layout grid expects an even number of items, but is supplied with an\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/boxes-gap.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305081,"url":"https:\/\/css-tricks.com\/a-few-background-patterns-sites\/","url_meta":{"origin":281338,"position":4},"title":"A Few Background Patterns Sites","date":"March 18, 2020","format":false,"excerpt":"If I need a quick background pattern to spruce something up, I often think of the CSS3 Patterns Gallery. Some of those are pretty intense but remember they are easily editable because they are just CSS. That means you could take these bold zags and chill them out. CodePen Embed\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/chevron-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311785,"url":"https:\/\/css-tricks.com\/the-many-bad-and-good-patterns-for-close-buttons\/","url_meta":{"origin":281338,"position":5},"title":"The Many Bad (and Good!) Patterns for Close Buttons","date":"May 27, 2020","format":false,"excerpt":"Manuel Matuzovi\u0107 details 10 bad HTML patterns for a close button. You know, stuff like this: \u00d7<\/a> Why is that bad? There is no href there, so it really isn't a link (close buttons aren't links). Not to mention the missing href makes this \"placeholder link\" unfocusable. Plus,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/htmlhell.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/rss-pattern.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/281338"}],"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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=281338"}],"version-history":[{"count":14,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/281338\/revisions"}],"predecessor-version":[{"id":281705,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/281338\/revisions\/281705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/269686"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=281338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=281338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=281338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}