CSS by example

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, …