CSS is not easy as it looks. When building complex layouts, micro animations, or a responsive design.

I think CSS is one of the most underrated web technology. Using CSS, you can,

• Style your website and web applications.
• Add animations.
• Transform the properties of elements
• Build responsive designs.
• Design complex layouts.

To experience the magic of CSS, I have curated six websites to help you master your CSS skills.

Modern CSS

On Modern CSS, you will find valuable content related to CSS. You can learn and practice along the way.

You will find modern solutions for old CSS problems, like how to keep the footer at the bottom, CSS basic to advanced selectors.

You will find solutions on,

• Accessibility
• Animations
• Buttons
• Custom CSS properties
• Designing with CSS
• Forms
• Grids
• Images
• Responsive design
• Layouts

Defensive CSS

Defensive CSS is code snippets shared by Ahmad shaded that are very helpful in avoiding the issue in the future.

He writes on which properties to use when using css to avoid issues in the future.

To improve your CSS skills, you must check out defensive CSS.

Flexbox Froggy

Flexbox is for the rescue if you want to align the content to the center. But it is only useful when working the rows. For the columns, we can use grids, which I have linked resources to learn Grid in the later part.

On flexbox froggy, you will learn,

• What is a flexbox?
• What is justify-content?
• What is align-content?
• What is flex-direction?
• What is flex-grow?
• What is flex-basis?

There are 24 levels to complete. Once you complete all the levels, you will master the flexbox and will be comfortable using the flexbox.

You will enjoy learning flexbox. Do check it out.

100+ Beginner Level React Project Ideas

Get it for free

CSS Grid Garden

When building a layout that involves a column grid is best suitable. Using a grid, you can create blog layouts or Pinterest homepage layouts.

There are 28 levels on CSS grid garden, which helps you learn,

• Grid columns
• Grid rows
• Grid column and row templates
• Grid area
• Order
• Using fractional unit

CSS Hell

On CSS hell, you will find the collections of code snippets of common mistakes front-end developers or UI developers make while using CSS and how to avoid them.

You will get to learn new short-hand tricks and methods of using specific CSS properties, 

CSS Tricks

CSS trick is famous amongst front-end developers. You will find an ocean of articles, guides, and cheat sheets on CSS grids, SVG, flexbox, media queries, and CSS functions. 

I have used it personally and still use it when I get stuck developing responsive designs and adding CSS animations.

On CSS tricks, you will find,

• Articles covering all types of content related to CSS
• Helpful and how-to guides
• Almanac of CSS selectors and properties, 

Summary

I hope you find these resources to be helpful. I use all of that websites to improve my CSS skills. 

Most web development courses don't focus on the depth of CSS, and you will learn just the tip of the iceberg, and the real fun is under the ocean. 

Check them out, build something cool, develop your proof of work on fueler, and land an opportunity as a front-end developer.

Special thanks to Mujahid Khan for writing this blog and helping us discover these amazing websites to learn CSS.

If you are a freelance developer, you can use the #1 portfolio tool for developers to land high-quality clients and 10x more money. Showcase your work beautifully and professionally on Fueler. Create your profile on Fueler today.

#1 Portfolio tool made for Web Developers