-
Animation with CSS starter project - https://codepen.io/anon/pen/rPJXxZ
-
Animation with CSS completed project - https://codepen.io/anon/pen/qgxeZz
-
Finished project on the web - https://ginawatanabe.github.io/css-devinar-final/
-
Box shadows: https://codepen.io/sdthornton/pen/wBZdXq
-
Font pairing article: https://www.canva.com/learn/canva-for-work-brand-fonts/
Properties, tutorials, and references - https://www.w3schools.com/css/
- This is great for a quick reference on how to create certain styles. W3Schools also offers other tutorials on HTML and JS.
CSS and animation design articles, videos, and references - https://css-tricks.com/
- Various developers contribute articles and videos ranging from design shortcuts to building cool projects.
Preset animations viewer - http://animista.net/
- Play around with already made animations. Find one that you like and use the code in your CSS.
Keyframe animation designer - http://jeremyckahn.github.io/stylie/
- Use this tool to see how different keyframe animation properties affect animation.
Google’s web design guidelines - https://material.io/
- Detailed guides, development, and tool resources.
AI color scheme picker - http://colormind.io/
- Generates colors from popular photos or themes.
Color scheme designer - http://paletton.com
- A more interactive web tool that recommends a color scheme based on colors you choose.
Color picker - https://color.hailpixel.com/
- Not sure which color to use? Mouse over the screen and click on colors that interest you.
Google Fonts - https://fonts.google.com/
- Free to use fonts.
Font pairing generator - https://www.canva.com/font-combinations/
- Pick a font and it will generate a complementary one. Looks for examples of font pairs on various websites.
List of great font pairs - https://fontpair.co/
- Curated list of font pairs.
Font pairing article - https://www.creativebloq.com/typography/20-perfect-type-pairings-3132120
- Creative bloq also has articles on graphic design, typography, art, web design, and more.
Font pair inspiration guide - https://www.canva.com/learn/canva-for-work-brand-fonts/
- Identify features that convey brands through font pairings.