CSS by example

Learn CSS by solving everyday challenges, from styling buttons to creating complex layouts

Description

Do you know the basics, but writing CSS is still challenging?
Then this is the right course for you!

“CSS by example” is designed to take you on a journey through many concepts, components, and layouts that modern websites use and recreate them from scratch so you get a better understanding.

Even if you plan on using CSS libraries such as Tailwind or Bootstrap, you will find valuable information in this course because it will help you to understand the foundation of these libraries and immediately recognize the patterns they are using.

And the best part is: This course will be extended in the future.

Maybe you didn’t grasp a concept, or you came across a component on a website, and you wonder how they built that? We are counting on your feedback to further advance this course and answer your questions about modern CSS.

As of now, there are more modules in the pipeline about upcoming features such as Container Queries, Nesting, and new HTML capabilities such as popovers, dialogs, and search forms.

What to expect?

In each chapter, we talk about crucial parts of a website and their patterns:

In Basics, we cover handling CSS Algorithms, Positioning, and everything global

Typography is about styling Text

In Overlays, we talk about Modals, Notification bars, Fading sections, and relative positioning of overlays

We also have chapters where we talk about Avatars, Buttons, Cards, and Tags. These seemingly small components can come with one or another surprise!

In Progress Indicators, we do animations and transitions of loading indicators

Coming soon…

Of course, we have a full chapter on Forms, where we recreate many interesting patterns, such as Floating Labels, Star Ratings, Toggle Switches, and many more.

We packed in a chapter on Navigations, where we show how to build a navigation and how to work and animate with a navigation icon

Last but not least, we talk about Layouts on the page level, for instance: The Holy Grail layout, two and twelve-column grids, …

Who this course is for:

• Intermediate CSS users