{"id":38,"date":"2023-04-20T00:06:08","date_gmt":"2023-04-20T00:06:08","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/drupalista\/?p=38"},"modified":"2023-04-20T00:36:42","modified_gmt":"2023-04-20T00:36:42","slug":"css-teach-yourself-resources","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/","title":{"rendered":"CSS Teach Yourself Resources"},"content":{"rendered":"\n

General References<\/h2>\n\n\n\n

Mozilla Developer Network<\/a> (MDN) has a great reference for CSS<\/a>. Any property you want to know, it’s there. I use this for <\/p>\n\n\n\n

HTML Dog<\/a> has a CSS reference<\/a>. I like how they explain shorthand properties, such as background<\/a>. I find their layout for those more complex properties more readable.<\/p>\n\n\n\n

The CSS Cascade<\/a> is a beautiful website that explains how inheritance works in CSS. This concept is absolutely essential to understand how CSS works. It’s also important to know the cascade works especially if you are trying to override something in the Drupal theme. <\/p>\n\n\n\n

Flexbox<\/h2>\n\n\n\n

Flexbox Zombies<\/a> game is a great way to learn flexbox. It’s entertaining and has practical examples. <\/p>\n\n\n\n

Josh Comeau has written a a great interactive introduction to flexbox<\/a>. There’s kebabs, Clippy, and cocktail wieners. Very thorough and delightful.<\/p>\n\n\n\n

Flexbox.help<\/a> or the flexbox properties codepen <\/a>is quick and visual way to see the effects of changing the different properties on your layout.<\/p>\n\n\n\n

Complete Guide to Flexbox<\/a> from CSS Tricks<\/a> is great for a reference after you’ve learned it. You can <\/em>read their collapsed sections at the top about the Background and Basics and terminology. But I’ve found that those concepts are more approachable learning from videos and practicing on your own. <\/p>\n\n\n\n

Grid<\/h2>\n\n\n\n

Jen Simmons<\/a> has some examples of grid<\/a> and when to use grid vs flexbox<\/a>. She does some conceptual work on how to think about layout<\/a>, which I have found useful. <\/p>\n\n\n\n

Rachel Andrew has Grid by Example<\/a>, where she walks you through examples<\/a> in her grid video series<\/a>. <\/p>\n\n\n\n

The Best Thing to Do<\/h2>\n\n\n\n

You can watch all the videos and read a hundred Stack Overflow threads, but the best thing to do is practice. Get a CodePen<\/a> account and start creating something! Practice! Practice! Practice!<\/p>\n","protected":false},"excerpt":{"rendered":"

General References Mozilla Developer Network (MDN) has a great reference for CSS. Any property you want to know, it’s there. I use this for HTML Dog has a CSS reference. I like how they explain shorthand properties, such as background. I find their layout for those more complex properties more readable. The CSS Cascade is […]<\/p>\n","protected":false},"author":8564,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nCSS Teach Yourself Resources – Drupalista<\/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:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Teach Yourself Resources – Drupalista\" \/>\n<meta property=\"og:description\" content=\"General References Mozilla Developer Network (MDN) has a great reference for CSS. Any property you want to know, it’s there. I use this for HTML Dog has a CSS reference. I like how they explain shorthand properties, such as background. I find their layout for those more complex properties more readable. The CSS Cascade is […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/\" \/>\n<meta property=\"og:site_name\" content=\"Drupalista\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-20T00:06:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-20T00:36:42+00:00\" \/>\n<meta name=\"author\" content=\"Kelly Holcomb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kelly Holcomb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/2023\\\/04\\\/20\\\/css-teach-yourself-resources\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/2023\\\/04\\\/20\\\/css-teach-yourself-resources\\\/\"},\"author\":{\"name\":\"Kelly Holcomb\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/#\\\/schema\\\/person\\\/8088d250fb2e8241cfdacfea532d66da\"},\"headline\":\"CSS Teach Yourself Resources\",\"datePublished\":\"2023-04-20T00:06:08+00:00\",\"dateModified\":\"2023-04-20T00:36:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/2023\\\/04\\\/20\\\/css-teach-yourself-resources\\\/\"},\"wordCount\":301,\"publisher\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/#\\\/schema\\\/person\\\/8088d250fb2e8241cfdacfea532d66da\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/2023\\\/04\\\/20\\\/css-teach-yourself-resources\\\/\",\"url\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/2023\\\/04\\\/20\\\/css-teach-yourself-resources\\\/\",\"name\":\"CSS Teach Yourself Resources – Drupalista\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/#website\"},\"datePublished\":\"2023-04-20T00:06:08+00:00\",\"dateModified\":\"2023-04-20T00:36:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/2023\\\/04\\\/20\\\/css-teach-yourself-resources\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/2023\\\/04\\\/20\\\/css-teach-yourself-resources\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/2023\\\/04\\\/20\\\/css-teach-yourself-resources\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Teach Yourself Resources\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/#website\",\"url\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/\",\"name\":\"Drupalista\",\"description\":\"I do Drupal things\",\"publisher\":{\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/#\\\/schema\\\/person\\\/8088d250fb2e8241cfdacfea532d66da\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/#\\\/schema\\\/person\\\/8088d250fb2e8241cfdacfea532d66da\",\"name\":\"Kelly Holcomb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/osu-wams-blogs-uploads.s3.amazonaws.com\\\/blogs.dir\\\/6653\\\/files\\\/2023\\\/03\\\/Kelly-square.jpg?fit=300%2C300&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/osu-wams-blogs-uploads.s3.amazonaws.com\\\/blogs.dir\\\/6653\\\/files\\\/2023\\\/03\\\/Kelly-square.jpg?fit=300%2C300&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/osu-wams-blogs-uploads.s3.amazonaws.com\\\/blogs.dir\\\/6653\\\/files\\\/2023\\\/03\\\/Kelly-square.jpg?fit=300%2C300&ssl=1\",\"width\":300,\"height\":300,\"caption\":\"Kelly Holcomb\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/osu-wams-blogs-uploads.s3.amazonaws.com\\\/blogs.dir\\\/6653\\\/files\\\/2023\\\/03\\\/Kelly-square.jpg?fit=300%2C300&ssl=1\"},\"url\":\"https:\\\/\\\/blogs.oregonstate.edu\\\/drupalista\\\/author\\\/holcombk\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Teach Yourself Resources – Drupalista","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:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/","og_locale":"en_US","og_type":"article","og_title":"CSS Teach Yourself Resources – Drupalista","og_description":"General References Mozilla Developer Network (MDN) has a great reference for CSS. Any property you want to know, it’s there. I use this for HTML Dog has a CSS reference. I like how they explain shorthand properties, such as background. I find their layout for those more complex properties more readable. The CSS Cascade is […]","og_url":"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/","og_site_name":"Drupalista","article_published_time":"2023-04-20T00:06:08+00:00","article_modified_time":"2023-04-20T00:36:42+00:00","author":"Kelly Holcomb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kelly Holcomb","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/#article","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/"},"author":{"name":"Kelly Holcomb","@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/#\/schema\/person\/8088d250fb2e8241cfdacfea532d66da"},"headline":"CSS Teach Yourself Resources","datePublished":"2023-04-20T00:06:08+00:00","dateModified":"2023-04-20T00:36:42+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/"},"wordCount":301,"publisher":{"@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/#\/schema\/person\/8088d250fb2e8241cfdacfea532d66da"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/","url":"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/","name":"CSS Teach Yourself Resources – Drupalista","isPartOf":{"@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/#website"},"datePublished":"2023-04-20T00:06:08+00:00","dateModified":"2023-04-20T00:36:42+00:00","breadcrumb":{"@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/2023\/04\/20\/css-teach-yourself-resources\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.oregonstate.edu\/drupalista\/"},{"@type":"ListItem","position":2,"name":"CSS Teach Yourself Resources"}]},{"@type":"WebSite","@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/#website","url":"https:\/\/blogs.oregonstate.edu\/drupalista\/","name":"Drupalista","description":"I do Drupal things","publisher":{"@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/#\/schema\/person\/8088d250fb2e8241cfdacfea532d66da"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.oregonstate.edu\/drupalista\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/blogs.oregonstate.edu\/drupalista\/#\/schema\/person\/8088d250fb2e8241cfdacfea532d66da","name":"Kelly Holcomb","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6653\/files\/2023\/03\/Kelly-square.jpg?fit=300%2C300&ssl=1","url":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6653\/files\/2023\/03\/Kelly-square.jpg?fit=300%2C300&ssl=1","contentUrl":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6653\/files\/2023\/03\/Kelly-square.jpg?fit=300%2C300&ssl=1","width":300,"height":300,"caption":"Kelly Holcomb"},"logo":{"@id":"https:\/\/i0.wp.com\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/6653\/files\/2023\/03\/Kelly-square.jpg?fit=300%2C300&ssl=1"},"url":"https:\/\/blogs.oregonstate.edu\/drupalista\/author\/holcombk\/"}]}},"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/users\/8564"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":3,"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/posts\/38\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/drupalista\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}