Flexbox

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

// Optional
main {
  margin: 0 auto;
  // or: align-self: center
  max-width: 80ch;
}

Grid

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

// Optional
main {
  margin: 0 auto;
  max-width: 80ch;
}

Reusable svg shapes

A list of known issues with flexbox and how to solve them if possible

Some css effects on images with code. It is great to have some examples !

A list of css patterns such as floating label, breadcrumb, media object, notification ...

I didn't notice that ! What a cool tool. There are challenges too

Some games to learn CSS tools. Currently playing at Flexbox zombies.

edit: I have finished flexbox zombie and that's great !

TL;DR

  display: flex;
  justify-content: center;
  align-items: center;

Much easier than previous methods

Priority order :

• Importance
  1. transition
  2. !important
  3. animation
  4. normal rules
• Origin
  1. Website
  2. User
  3. Browser
• Specificity
  1. inline (within a style HTML property)
  2. id
  3. class | attribute | pseudo-class
  4. type | pseudo-element
• Position --> Order of the rules (rules defined later are first applied)

Good idea ! Blur all images that doesn't have a alt attribute.

img:not([alt]) {
    filter: blur(5px);
}
Or you can set a `border: 5px solid red` too.
Feel free to highlight accessibility problems :)