11 个CSS学习工具和资源

jopen 8年前

1. Unfolding the Box Model

Interactive slides that explore CSS 3D Transforms. Press left or right arrow key to advance. Watch in full-screen for best results.

11 个CSS学习工具和资源

2. CSS Diner

A nicely designed little game to help you learn CSS selectors. Type in the correct selector to complete each level. You can also jump to a level by opening the menu with the hamburger icon on the right.

11 个CSS学习工具和资源

3. Learn CSS Selectors Interactively

A simple visualization of selectors in CSS. Choose the selector in the menu on the left, and the correctly selected items will appear on the right, with a brief description of the selector under the menu.

11 个CSS学习工具和资源

4. Front End Web Development Quiz

A frontend coding quiz and it’s not easy. The first section is on CSS.

11 个CSS学习工具和资源

5. The Magic of CSS

A 6-chapter tutorial on the basics of CSS, with more chapters to come. Some good in-depth stuff here.

11 个CSS学习工具和资源

6. Enjoy CSS

A CodePen-like playground for learning CSS. The interesting part of this is that it’s focused on CSS, with a menu where you can choose a CSS feature and then use a GUI to edit that feature in the document.

11 个CSS学习工具和资源

7. CSS Guidelines

Harry Roberts has updated his CSS Guidelines. Previously just a GitHub repo, the Guidelines now have their own domain and have been expanded and improved. Harry has also implemented a “pay what you want” model to help support development.

11 个CSS学习工具和资源

8. CSS Triggers…

Chrome Dev Relations guy Paul Lewis has created a quick reference for those interested in what is triggered on a page when a given CSS property changes. For example, some properties will trigger repaints and compositing, but will not trigger layout. This reference covers all properties and is easy to search.

11 个CSS学习工具和资源

9. Code Guide by @mdo

Bootstrap’s Mark Otto has put together his own HTML and CSS style guide with lots of tips including order of properties, order of HTML attributes, selectors, comments, and lots more.

11 个CSS学习工具和资源

10. Flexplorer

A simple app to fiddle with the various flexbox features and see the results appear in real-time on the page along with the full code. What’s cool about this is that you can also edit the text in the boxes on the page, allowing you to see how the changes affect different amounts of content.

11 个CSS学习工具和资源

11. CSS Selectors: Targeting HTML Like a Pro

Russ Weakley’s new course on CSS selectors on SitePoint’s sister site, Learnable, with more than 20 videos introducing the different ways you can select elements with CSS. And this is not just a shameless plug; I know Russ – he’s a true CSS expert. So if you’re just getting started with CSS and haven’t mastered selectors yet, this might be a good choice.

11 个CSS学习工具和资源