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 to 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 Reference: Chakra UI is an open-source design system and component library for React that facilitates the creation of visually appealing and accessible user interfaces. With an extensive set of pre-designed components, Chakra UI accelerates UI development while maintaining design consistency through its theming and styling system. The library places a strong emphasis on accessibility, ensuring inclusivity for all users, and promotes responsive design by default, making it easy to create interfaces that adapt across different devices. Chakra UI offers a developer-friendly experience with intuitive APIs and documentation, allowing for effortless customization of components to match specific project requirements, making it a valuable tool for efficient and polished web development.

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

• Euismod: This website is to help people learn CSS grid in an interactive fashion.

• CSS-Scaler Topics: Beginner’s guide on starting with CSS (Cascading Style Sheets) With interactive Tutorials.

CSS Games

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

• Flex Box Adventure: Start a mysterious adventure and help King Arthur defeat three evil brothers using CSS Flex Box.

• 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 Attack: Demons kidnapped a powerful elf to steal his power. Go on an incredibly dangerous quest and save the world using a secret weapon – CSS Grid.

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

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

• CSS easing functions: Collection of easing functions bo be used in CSS transitions and animations.

• CSS-Doodle: A web component for drawing patterns with CSS.

• Modern CSS Solutions: A series of articles to solve old CSS problems with modern CSS solutions.

• SmolCSS: Tons of minimal snippets for modern CSS layouts and components.

• IcoMoon: IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites.

CSS Generators

• Loading.io: A site for getting loaders for your website. They provide them in CSS, SVG, png, and gif formats. Some of them are paid too.

• Favicon Generator: Generate SVG favicons for your site using text, image, or emoji.

• Get Waves: A great tool for creating wavy graphics for your website. It includes a variety of configurable features that allow you to build incredibly unique waves.

• Hero Patterns: Provides an amazing + huge collection of repeating subtle-looking SVG background patterns.

• Glassmorphism: This tool will help you add the trendy frosted glass effects to your web apps very easily.

• Neumorphism/Soft UI: A fantastic CSS code generator for the popular Soft UI design.

• 3D Book Cover Generator: Helps you create a cool 3D book to add to your landing page sites.

• Ribbon Generator: On your book element or any other element, you can easily add customized ribbons using this generator.

• Blob Generator: A very trendy art to make your site look modern.

• CSS Glow Generator: This tool will help you add a cool glowing effect (box-shadow) to the elements.

• Smooth Shadow Generator: Subtle shadows are what make an element look modern and sleek. And, to create them this is the tool you need.

• Buttons CSS Generator: Just with one click, you can get the awesome styles you need for the buttons of your project.

• Animated Keyframes Code For Icons: Experiment with your animations on icons and get code in just a few minutes.

• SVG Backgrounds: You can use this to make really cool-looking SVG backgrounds. Simply copy and paste it into your project.

• Ultimate CSS Gradient Generator: With a powerful Photoshop-like interface, you can create cool gradients as per your needs.

• CSS Grid Generator: A great tool for experimenting with CSS Grid to build dynamic layouts.

• Enjoy CSS: An all-in-one CSS generator that can help you with backgrounds, shadows, and many other properties.

• CSS Layout: Generate most popular CSS layouts and patterns easily.

• Fancy Border Radius Generator: Generate organic looking shapes by using eight values specifying border-radius in CSS.