CSS by example

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

What you'll learn
Recognize some of the most famous patterns in CSS
Slice CSS challenges into smaller manageable chunks
Learn about common components that make a modern website
Get familiar with data-attribute driven CSS
Style modern forms from scratch
Build micro and macro layouts with intent
Requirements
You should have used CSS before, it would be best if you have already taken a beginners course
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


More Info