UI DESIGN

Color Schemes

• coolors
• UI Gradients
• Visme: Color Schemes

Design Templates

• Cruip: Landing page templates for startups
• Mashup Templates
• Creative Tim
• mdbootstrap
• 10 Best Website Templates for Your Online Portfolio 2020

Design Tools

• Polygon
• CSS Patterns
• CSS Specificity Calculator

Logo

• Logo File
• Transparent background
  • Online PNG tools
  • Lunapic
  • Remove bg

Images

• Lorem Picsum
• unDraw: Open-source illustrations
• Robohash: GENERATE UNIQUE IMAGES FROM ANY TEXT

CSS RESPONSIVE

• Freecodecamp: Responsive Web Design Exercises
• Masonry: Cascading grid layout library

Media Queries

• Media Query

CSS Layouts

Flexbox

• Flexbox guide
• Flexbox Cheatsheet
• FlexboxFroggy Exercise

Grid Layout

• Grid: a simple visual cheatsheet
• Grid Layout
• CssGridGarden Exercise

CSS ANIMATIONS

• Thoughtbot: Animation for beginners
• Animate.css
• React Particles
• Animation Tools
• 20 Useful react animation libraries

CSS Transitions and Transformations

• Thoughtbot: Transition and transforms

OTHER RESOURCES

Tutorial

• illustrated.dev UI

Exercise

• CSS Selector Exercise
• Codepip: Learn to code by playing games

CSS 3RD Party Libraries

• Bootstrap SCSS Repo
• Tachyons: lightweight CSS library

Naming Convention for CSS Classes

• The BEM naming convention | Official website