CSS

Below are some links that provide visual explanations of these CSS properties. Understanding these properties and when to use them is very important for writing maintainable CSS!

display:

• general example: https://codepen.io/amiephipps/pen/NJmqZR

• flexbox: https://codepen.io/amiephipps/pen/aMxOea

• flexbox (three column header): https://codepen.io/amiephipps/pen/WmWQvp

margin, padding, and border

• general example: https://codepen.io/amiephipps/pen/xBNqoE?editors=1100

• padding/margin + block/inline-block: https://codepen.io/amiephipps/pen/MxRajV

height, width

• don't put set height/width on text elements: https://codepen.io/amiephipps/pen/mogepP

• height/width and responsive design https://codepen.io/amiephipps/pen/GeamEY

images

• simple example: https://codepen.io/amiephipps/pen/JzqNqL

position

• general example: https://codepen.io/amiephipps/pen/GeLJQa

• sticky: https://codepen.io/amiephipps/pen/drLoKQ

general

• only use content when using a :before or :after element - it only works with those pseudo selectors
  • pseudo selectors are basically different 'states' of elements (:hover, :active, :focus, :after, etc.)
• for accessibility, when you :hover, also set :focus at the same time