Natours

Advanced CSS, Sass
GRID: Float

-BEM: Block Element Modifier
-sibling selector
-(7-1) pattern
-checkbox hack
-Animation
-animation-fill-mode
-linear-gradient
-radial-gradient
-Semantic
-calc()
-:not()
-clip-path
-background-clip
-clearfix
-backface-visibility
-perspective
-background-blend-mode (This is just WOW)
-box-decoration-break
-filter: blur() brightness()
-video
-object-fit
-:placeholder-shown
-:focus:invalid
-cubic bezier()
-:target
-column-count/gap/rule
-hyphens
-display:table/table-cell
-verticle-align
-::selection

Responsive

-responsive with mixin (@content | $breakpoint | @if)
-only screen and (hover:none) {for touch screen}

Responsive Image

1. Resolution Switching
2. Density Switching
3. Art Direction

-picture tag | source | srcset | media

Browser Support

-@support()