CSS Resourses

A collection of resourses to help you learn CSS and become a pro.

Table of Contents

• Websites
• Blogs
• Channels
• Courses
• Books
• Games
• Tools

Website

• mdn: provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
• freeCodeCamp: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely ...
• web.dev: take advantage of the latest modern technologies to build amazing web experiences for everyone.
• w3schools: free Tutorials with Examples of HTML, CSS, Bootstrap,...
• CSS Reference: is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
• CSS Layout: a website that collects popular layouts designed with CSS to help you easily choose the design for your website.
• Can I use: up-to-date browser support tables for front-end technologies on desktop and mobile browsers.

^{back to table of contents}

Blog

• CSS-TRICKS: daily articles about CSS, HTML, JavaScript, and all things related to web design and development.
• CSS {In Real Life}: tips, tricks and tutorials on the web’s most beautiful language.
• Smashingmagazine: have more 400 articles for make beautiful with CSS.
• Ishadeed: this is personal blog, he is write and explain deep CSS.
• Modern CSS Solution: learn and Practice Modern CSS
• codrops: collection templates build with CSS and CSS animation.
• Defensive CSS: practical CSS and design tips that helps in building future-proof user interfaces.
• DWB:
• Chrome Developer: articles at this page write by google engineer.
• CSS Weekly: CSS Weekly is a newsletter that helps developers keep up with the latest news in CSS.

^{back to table of contents}

Channels

• Kevin Powell
• The Net Ninja
• Coder Coder
• Web Conferences Amsterdam
• CSS-Tricks
• Google Chrome Developers
• DesignCourse

^{back to table of contents}

Courses

• Introduction to CSS3: one of the very useful courses. really helped me a lot to understand basics to learn how to create transitions

^{back to table of contents}

Books

^{back to table of contents}

Games

• Flexbox Froggy: in this game, you must bring the frogs home to their lilypads by mastering CSS flexbox, a powerful new module ...
• CSS Diner: a very nice place to let you learn CSS very fast. Simply just complete all 32 challenges and make sure you understand the intuition.
• CSS Speedrun: a small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible.
• Grid Attack: learn css grid in a fun and interesting way by playing css coding game where you have to defeat elves from evil monsters!
• Flexbox Zombies: in this game you control a Hoodie character with a crossbow, using Flexbox code. The goal is to learn Flexbox in order to survive the onslaught of zombies.

^{back to table of contents}

Tools

• Clippy: is an online tool that allows you to set CSS clip path properties for web pages.
• Keyframes CSS: make it possible to create basic to advanced movements with CSS keyframes.
• CSS Grid Generator: a tool that helps you create grids in CSS easily by entering the information provided by the tool.
• Color contrast checker: a web app that helps you check the contrast between two colours in web design.
• Trianglify: an online tool that helps you create a beautiful background for your website.
• CSS Filter: helps you design colours for image objects in your website using the filter property of CSS.
• Responsively: tool makes it possible to check the visibility of your website on multiple devices at the same time.
• TinyPNG: Optimizing your images with the TinyPNG algorithm brings several benefits to your website.

^{back to table of contents}