11 practical CSS learning tools_html/css_WEB-ITnose

1. Box model slideshow

An interactive slideshow generated through 3D transformation effects. Press the left or right arrow key to switch to full screen viewing for better results.

2. CSS Diner

Learn CSS selector through a simple mini-game. Enter the correct selector to complete each level. You can also select levels through the menu.

3. CSS Selectors interaction

This is a simple visual CSS selector. Select the selector in the left menu and the selected item will appear on the right.

4. Front-end Web Development Test

Are there case differences for CSS properties?

5. The Magic of CSS

There are 6 chapters of CSS tutorials here, and more in-depth tutorials will be released slowly.

6. Enjoy CSS

A holy place to learn CSS, it focuses on CSS.

6

7. CSS Guidelines

Harry Roberts has updated his open source. It used to be just a library on GitHub, but now it has its own domain name, and many resources have been optimized and updated.

8. CSS Triggers…

Chrome developer Paul Lewis created a reference to page parsing when a given CSS property changes. will play its role. For example, some properties will trigger redrawing and compositing, but not layout. We can easily detect these changes through CSS Triggers.

9. Coding Guidelines Contributed by mdo

Bootstrap's Mark Otto has put together his own style guide for HTML and CSS. These suggestions include attributes order, order of HTML attribute selectors, etc.

10. Flexplorer

This is a simple application for playing around with the various flexbox features and viewing them in real time as they appear on the page The complete code. It has a cool feature that also allows you to edit text boxes on the page, allowing you to see how those changes affect other content.

11. CSS Selectors: Targeting HTML Like a Pro

Russ Weakley’s new course, a sister site to SitePoint, has over 20 This video introduces the Selector element of CSS. This is not just a minimalistic plugin, but works like a true CSS pro. So if you're just getting started with CSS and haven't mastered selectors yet, this might be a good choice.

Summary

No matter what your CSS level is, I can guarantee that these things will definitely help you, if you have an ongoing related project, or Other good resources can be brought out and shared with everyone.

Geek Tag - Professional and accurate sharing, follow the geeks you are interested in, the community provides excellent quality tutorials, interactive teaching

To learn about front-end technology, please visit the Geek Interactive Course Library and code recording

Read the original text: 11 practical CSS learning tools