This is a list of the topics regarding this specific project, covered by Jason Schmedtmann in his Advanced CSS and Sass course, available on Udemy.
The project is written in Sass and follows the 7-1 CSS Architecture.
· Basic reset using the universal selector · How to set project-wide font definitions · How to clip parts of elements using clip-path
· The easiest way to center anything with transform, top and left properties
· How to create CSS animations using @keyframes and the animation property
· What pseudo-elements and pseudo-classes are · How and why to use the ::after pseudo-element · How to create a creative hover animation effect using the transition property
· Thinking about components · How and why to use utility classes · How to use the background-clip property · How to transform multiple properties simultaneously · How to use the outline-offset property together with outline · How to style elements that are not hovered while others are
· How to include and use an icon font · Another way of creating the "skewed section" design · How and when to use the direct child selector
.png)
· How to build an amazing, rotating card · How to use perspective in CSS · How to use the backface-visibility property · Using background blend modes · How and when to use box-decoration-break
.png)
· How to make text flow around shapes with shape-outside and float · How to apply a filter to images · How to create a background video covering an entire section · How to use the
· How to implement "solid-color gradients" · How the general and adjacent sibling selectors work and why we need them · How to use the ::input-placeholder pseudo-element · How and when to use the :focus, :invalid, :placeholder-shown and :checked pseudo-classes · Techniques to build custom radio buttons
.png)
· How to design a simple website footer
· What the "checkbox hack" is and how it works · How to create custom animation timing functions using cubic bezier curves · How to animate "solid-color gradients" · How and why to use transform origin · In general: create an amazingly creative effect! :)
.png)
· How to build a nice pop-up with only CSS · How to create the :target pseudo-class · How to create boxes with equal height using display: table-cell · How to create CSS text columns · How to automatically hyphenate words using hyphens
Advanced Responsive Design
· How to use a powerful Sass mixin to write all the media queries · How to use the @content and @if Sass directives · Taking advantage of Chrome DevTools for responsive design