Skip to content

Latest commit

 

History

History
44 lines (23 loc) · 3.08 KB

CSSResources.md

File metadata and controls

44 lines (23 loc) · 3.08 KB
Raw

Back

CSS Resources

Resources for Learning CSS

  • CSS Reference: A visual representation, and demonstration of all native CSS3 rules and how they work, with clear documentation and examples.

  • CSS Visual Dictionary: CSS Visual Dictionary is a beginner-friendly book that takes a practical approach towards introducing web designers and developers to the basic concepts in CSS. Follow the instructions in the link above to get your copy!

  • CSS Zen Garden: A demonstration of what can be accomplished through CSS-based design. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing hundreds of different designs.

  • CSS-Tricks: One of the best sites to learn CSS and responsive design.

  • CSS-Codecademy: You will learn many aspects of styling web pages! You’ll be able to set up the correct file structure, edit text and colors, and create attractive layouts. With these skills, you’ll be able to customize the appearance of your web pages to suit your every need!

CSS Games

  • CSS diner: A fun in-browser game to help you learn and practice CSS selectors.

  • Flexbox Defense: Tower Defense with a twist: all towers must be positioned with CSS flexbox.

  • Flexbox Froggy: A fun in-browser game to help teach the powerful, complex CSS flexbox layout method.

  • Grid Garden: A fun in-browser game to help teach the powerful, complex CSS grid layout method.

  • Flexbox Zombies: A fun comprehensive in-browser game to help you learn CSS flexbox while fighting zombies.

CSS Tools

  • Clippy: A tool for creating CSS clip paths of various shapes.

  • Cubic-Bezier: A tool for generating bezier curves for CSS transitions and animations.

  • Dark-Mode Toggle Tutorial: How to build a dark-mode toggle!

  • CSS Code Generator: See and adjust colour gradient/border,shadow... visualy and get the code as outcome!

  • CSS Cheat Sheet: Interactive CSS cheat sheet - selectors, font generator, button generator, reseting codes, shadows...

  • CSS Matic: CSS Matic is a tool that generates gradients, box-shadows, border-radius, noise texture without writing CSS codes.

  • Shape Divider: Shape Divider lets you generate custom shapes to use on your web pages.

  • CSS Counters: CSS counters are used to add counts to elements. The count is added by providing variables that can be initialized (using counter-reset), and these variables can then be incremented by CSS rule