CSS Summary

Topics

• Image Overlay
  • Example
  • Code


• Clip path
  • Example
  • Code


• Header with logo
  • Example
  • Code


• Animation
  • Animation of header text
    • Example
    • Code
  
  
  • Animation of button in the header
    • Example
    • Code


• CSS Grid
  Grid

Tips

• margin vs text-align

  margin: 0 auto; - if you are trying to center a element with a known width
  
  text-align: center; - If you are trying to center the content of an element (images, text...)
  

Tools

• clippy - CSS clip-path maker

Resources

• Bootstrap 5 CheatSheet
• CSS Selectors
• Centering in CSS: A Complete Guide
• Great Resources