Skip to content

Latest commit

 

History

History
63 lines (32 loc) · 5.06 KB

CSSResources.md

File metadata and controls

63 lines (32 loc) · 5.06 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-Animations: Learn CSS animations using unique courses from Scrimba which involve interactive screencasts so that you can learn along with the teacher. This is a short 2-hour course.

  • CSS-Tailwind CSS: You can learn Tailwind CSS, one of the most popular CSS frameworks at Scrimba. This is best suited for intermediate-level programmers who are familiar with the fundamentals of CSS. Tailwind CSS is a utility-first framework, which focuses on speed and conciseness of code.

  • CSS-Bulma: Bulma is a free, open source CSS framework based on Flexbox. You can learn Bulma CSS at Scrimba in a 1 hour lesson that includes 14 short videos.

  • W3Schools CSS Tutorials: CSS covered, comes with tests and documentations, along with over 300 examples! Basic to Advanced!

  • MDN Web Docs - CSS: This provides many links to learning CSS and also has its own resources which can start with the basics and then become advanced.

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 Nector:CSS Nectar is a css website design showcase for web designers and developers. Every day we select the best of the web design and add it to our gallery.

  • SEGA LOGO FONT: The logo of Sega is simply its logotype in dark blue with a white line running through the middle of each letter, which is similar to the logo of CNN. A font called Sega is very similar to the lettering of its logotype. The font is available only in capital letters. You can download the font for free here.

  • 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.

  • CSS Minifier: CSS Minifier is an easy way to Minify/Compress your CSS Files. Simple Quick, Fast and absolutely FREE.

  • CodeBeautify: A set of tools for improving the quality of CSS code, including "minifying" and beautifying tools.