Code: Advanced CSS and SASS Flexbox Grid Animations and More!

This README will be acting as short & speedy notes for the above-mentioned course. The notes which you can see below are being prepared by myself & Vedant. Feel free to create a PR to add new notes if these notes get deprecated. Thank you! 😇

---

Building the Header - Part 1

• box-sizing: border-box;
• background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 131, 0.8) ), url(../img/hero.jpg);
• background-size: cover;
• background-position: top;
• clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

---

Building the Header - Part 2

The easiest way to transorm anything with the transform, top and left properties.

• absolute & relative positioning

• block level elements

• span is by default an inline element

• display: block;

• text-transform: uppercase;

• letter-spacing: 35px;

• transform: translate(-50%, -50%);

---

Creating Cool CSS Animations

• animation

• animation-name: moveInLeft;

• animation-duration: 2s;

• animation-delay: 3s;

• animation-iteration-count: 3;

• animation-timing-function: ease-out;

• All combined

  animation: moveInRight 1s ease-out;

• backface-visibility: hidden;

---

Building a Complex Animated Button - Part 1

• pseudo class in CSS

---

Building a Complex Animated Button - Part 2

---

How CSS Works : A Look Behind The Scenes

Three Pillars of Writing Good HTML and CSS

• Responsive design

  • Fluid layouts
  • Media queries
  • Responsive images
  • Correct units
  • Desktop-first vs mobile-first

• Maintainable and scalable code

  • Clean
  • Easy-to-understand
  • Growth
  • Reusable
  • How to organize files
  • How to name classes
  • How to structure HTML

• Web performance

  • Less HTTP requests
  • Less code
  • Compress code
  • Use a CSS preprocessor
  • Less images
  • Compress images

---

How CSS Works Behind The Scenes: An Overview

What happens to CSS when we load up a webpage?

Things to note:

Visual Formatting Model

---

How CSS is Parsed. Part 1: The Cascade and Specificity

Author declaration: CSS by the coder or developer

User declaration: CSS by the user. Example, when user changes default browser font-size.

Browser (user agent) declaration: CSS by the browser. Example, anchor tag in HTML has deafult color purple and an underline.

---

Specificity in practice

---

How CSS is Parsed. Part 2: Value Processing

---

How CSS is Parsed. Part 3: Inheritance

---

resources

http://codingheroes.io/resources/