online resources
- W3C (World Wide Web Consortium)
- Html and Css the Book
- codecademy.com
- Don’t Fear the Internet
- FreeCodeCamp
- Free Frontend (thanks: Jake Z)
- Khan Academy
- lynda.com
- .
- css-tricks.com
- 6 CSS properties nobody is talking about
- CSS Transitions and Transforms for Beginners
- CSS Keyframe Animation Syntax
- .
- Smashing Magazine’s Comprehensive Guide to CSS Principles
- CSS Selectors Cheat Sheet by Nana and Ryan Yu
- alistapart.com
- CodePen
learning html + css
- “A Beginners Guide to CSS Grid Layout” by Tony Thomas
- CSS Grid Layout (Rachel Andrew)
- CSS Grid (Jen Simmons)
- CSS Grid Generator by Brad Woods
- CSS Grid Generator by Sarah Edo
- Flexbox
- Flexbox Cheat Sheet
- GRID by Malven Co. (visualizes grid properties)
- “How to Align Things in CSS” by Rachel Andrew
- Jen Simmons’ Experimental Layout Lab
- LayoutIt by LenioLabs (grid generator)
layout help
- RandomA11y: Accessible color combo generator
- Accessibility Checker
- Adobe Color Contrast accessibility checker
- Designing for Accessibility: The Complete Guide
- UserWay
- The A11y Project: Web Content Accessibility Guidelines (WCAG) Checklist
design accessibility
- Awwwards
- mediaqueri.es
- CSS Design Awards
- CSS Zen Garden
- muuuuu (Japanese)
- One Page Love
- siteinspire
design inspo: collections of sites
- basilgloo.com
- bearskinrug.co.uk
- Book of Beards
- catalogtree.net
- Jen Simmons’ Experimental Layout Lab
- Jongmin Kim’s Form Follows Function css animation demo site
- jasonsantamaria.com
- Owltastic (Meagan Fisher Couldwell)
- RoomFive (Andrew Couldwell)
- This Is Responsive
- Trent Walton
- Ty from the Internet
- Ueno (design agency)
design inspo: individual sites
- 30 Seconds of CSS (30 useful user interface micro-interaction code snippets)
- Animated UI code snippets by Emil Kowalski
- Animation: “KeyFrames” (a keyframe animation generator/tool)
- Animation: The Ultimate Guide to Proper use of Animation in UX
- Animista: CSS Animations On Demand
- WAIT! Animate by Will Stone
- Blend Mode: Background Blend Mode via css-tricks.com
- Blend-mode: Mix-blend-mode (get to know this property!)
- CSS Shades Generator by Omatsuri
- CSS Dutone Generator by Ricky Metz
- CSS Gradient Maker
- CSS Gradient Animator
- HueMint Color Generator
- CSS Background Pattern Generator
- CSS Button Generator
- CSS Cursor Generator
- CSS Doodles: a web component for drawing patterns with css
- CSS Filter generator (for images)
- CSS Page Dividers by Web.Dev
- CSS Page Dividers by Omatsuri
- CSS Pattern Generator
- CSS Blob Maker
- Working with Blobs
- CSS Shape Generator
- CSS Shadow Generator by Phillip Brumm
- CSS Triangle Generator by Omatsuri
- CSS Wave Generator
- Design Checklists
- Fancy Border Radius by 9 Elements
- Favicon generator
- Hover.css by Ian Lunn (a hover and link effect library)
- Create an Absolute Basic Mobile CSS Responsive Navigation Menu (Treehouse tutorial)
- Style Tiles: a design process communication tool for web design
- Microinteractions.co (Webflow-specific)
- 2D & 3D CSS Transform functions visualizer by Jorge Moreno (shows and generates code for the transform property)
- “Clippy” — Css3 Clip Path Maker (easy-to-use shape generator by Bennett Feely)
design tools + code generators
- Adobe Color: palette creation tool
- Color & Contrast (interactive color theory tool)
- coolors.co
- ColorLibrary (shows Risograph-based test palettes applied to a variety of images)
- Colormind (shows test palettes applied to a variety of photos and design elements)
- Defining Your UI Colors: A Comprehensive Guide
- How to Create the Best UI Color Palette
- Palette Maker (shows test palettes applied to a variety of graphic design style types)
color help
- Adobe Originals
- Google Web Fonts
- The League of Movable Type
- Type Network
- Variable Fonts
- Interactive animations with variable fonts (written by Google)
- Type foundry agencies [dozens of these out there]
web font sources
- Webflow University: How transforms work
- Webflow Demo page (with how-to): Getting started with image hover effects
- Webflow Demo page (with how-to): Build 3D Transforms Visually
- Webflow Feature: Build animations and interactions visually
- Webflow Feature: Triggers and Animations
- Webflow Community Files: Made in Webflow
webflow resources
- Adobe Firefly (image gnerator)
- OpenAI* (Could use DALLE for prototype images, ChatGPT/GPT-4 for written content, code and tools such as user flows)
- Will AI Replace All Coders?
- *The US Copyright office has ruled that AI-generated images CANNOT be copyrighted.
ai
- Webflow
- Webflow University
- An Introduction to Web Components
- Duckett’s Javascript & JQuery book
- CSS Subgrid
- CSS Subgrid News and Demos
- Scroll-Linked Animations (workgroup draft; not yet available, but coming!)