CSS Resources4:40 with Guil Hernandez
With all the new CSS features, selectors, properties and values available, how do we stay current? In this video, we'll cover helpful resources for learning and staying up-to-date with CSS.
With all the new CSS features, selectors, properties and 0:00 values available, how do we stay current and keep on top of everything? 0:03 Are we expected to memorize every CSS selector, property and value out there? 0:08 The simple answer is no, we're not. 0:12 Now if you're anything like I was when learning how to code, 0:15 there might be a point where you'll feel stuck, when working on your first HTML and 0:18 CSS projects. 0:23 So, before we begin writing CSS, I'm going to quickly cover helpful resources that 0:24 will always have the most important and 0:29 up to date information you'll need, on a given CSS topic. 0:31 One of the resources I constantly visit, is the Mozilla Developer Network, or 0:36 MDN Docs, particularly the CSS reference. 0:41 A you can see here, it's an extensive list of all the standard CSS properties, 0:45 selectors, and CSS concepts in alphabetical order, and 0:50 it gives us detailed information for each of them. 0:55 So, for example, say I'm stuck on how to style a link on hover. 0:58 Well, I can click on hover in this list, and 1:03 then I'm presented with a summary on the hover selectors. 1:07 Then a few examples below that. 1:11 There's even a browser compatibility chart at the bottom of the page. 1:13 So it's a really handy reference you should keep close by, 1:18 when working on projects. 1:21 Another comprehensive source is the Web Platform Docs. 1:24 Again, a lot of helpful information here, about CSS topics. 1:28 So, let's say down the road, I hear about this cool new CSS function for 1:32 making images gray scale. 1:38 Well, I can go over to the CSS function section, 1:40 then click gray scale and all the information for 1:43 the gray scale function comes up, along with other related topics. 1:48 Now, over on the left of the page, you'll notice these readiness markers. 1:55 This one indicates that it's ready to use, so that means the reference material on 2:00 this page is complete, and the information is accurate. 2:05 Now you might come across some that say almost ready, like we're seeing here, and 2:09 this simply means that it's mostly complete and 2:14 good of quality, but it's still missing a few things. 2:17 Now the neat thing about the web platform docs, 2:20 is that it's a community driven site. 2:24 So you can actually contribute to it, if you'd like. 2:27 And if you're looking for really specific information about CSS. 2:31 You can read the actual specs from the World Wide Web Consortium, or 2:35 WC3 for short. 2:40 The W3C is the group that develops and maintains web standards. 2:42 So all the standard CSS features we use today, had to be written up in a spec, 2:47 like we're seeing here, and approved by the WC3. 2:52 Even though these specs are mostly written for the browser implementors. 2:55 It can still be a valuable resource, for CSS authors and developers. 3:00 Now, what's great about the Mozilla developer network docs, and 3:05 the web platform docs is that they distill a lot of that information for us. 3:09 Finally, one of the most important parts about building for 3:16 the web, is keeping up with browser support. 3:20 I'd say the canonical source for 3:23 browser support information these days, is caniuse.com. 3:24 It provides up to date browser support information, for 3:28 all the front-end web technologies on desktop and mobile web browsers. 3:32 So, say I wanna know what the latest support for CSS Gradients is. 3:37 Well, I can find Gradients in the list below, or I can go up here and 3:42 start typing. 3:46 Gradients and there we have all the browser support information we need to 3:48 know, about CSS gradients. 3:53 There's even a tab for notes, known issues, and 3:55 helpful resources at the bottom of each chart. 3:58 Throughout our exciting, ongoing learning journey, 4:03 it's important to have good self-initiative. 4:06 That means being able to find answers on your own, 4:09 working on small projects that will help you retain what you're learning, and 4:11 knowing when and how to ask for help when you're stuck. 4:15 Self-initiative is one of the most valuable assets a web designer and 4:17 developer can have. 4:21 So what's the biggest take away here? 4:23 Don't worry about memorizing every selector, property, or 4:26 css value available. 4:29 A solid understanding of the concepts, and a reliable reference, 4:31 combined with patience and an energetic self-initiative, will get you pretty far. 4:34
You need to sign up for Treehouse in order to download course files.Sign up