A place to house helpful links relating to all things front-end
- Responsive
- Visual Tools
- Tools
- UI
- Plugins
- HTML
- CSS
- Design/CSS Systems
- Data Visualization
- Javascript
- SVG
- Git
- Checklists/Guidelines
- Accessibility
- CDNs
- Browser Caching
- Hosting/Deployment
- Front-End Interview Questions
- Min-Max-Value Interpolation (Clamp)
- Fluid typography with clamp generator
- Type Scale Clamp Generator
- Responsive Tables
- Math and Front-End (responsive typography with viewport units)
- Responsive Typography with Calc
- Fun Tip: Use calc() to Change the Height of a Hero Component
- CSS Media Queries - Quick Reference Guide
- Responsive Iframes
- Find your player - Video and audio player themes built with Media Chrome, for every web player and every web app framework.
- Fallback Font Generator
- Section Divider Generator
- Omatsuri - Open source browser tools for everyday use
- Smooth Shadows with multiple layers
- Shadow Palette Generator - Create a set of lush, realistic CSS shadows
- CSS Animation tool with keyframes
- CSS Box Shadow editor with multiple layers
- CSS Clip-Path Maker
- Fancy Border Radius
- Mixkit - Authentic video footage & animation, licensed for free
- Create SVG waves
- Test common easing curves on a range of interfaces. Or generate your own custom bezier curve.
- FFFuel - a collection of color tools and free SVG generators for gradients, patterns, backgrounds & decorative graphics
- Wicked Backgrounds - Create beautiful backgrounds waves for yourdesigns
- Basic Pattern Repo - just SVG
- Cool Background
- Subtle Patters
- Pattern Ninja
- Patterns.CSS - CSS only library to fill your empty background with beautiful patterns.
- CSS Background Patterns
- BGjar - Free svg background generator for your websites, blogs and app
- Pattern Generator
- Free loaders & spinners for your next project. Built with HTML, CSS and a soupçon of SVG.
- transition.css - Drop-in CSS transitions
- AnimatiSS - Nice collection of CSS animations for your awesome web projects
- CSS Filter Playground
- filters.css - CSS only library to apply color filters.
- Advanced effects with CSS background blend modes
- 83 CSS Text Effects
- Glassmorphism Generator
- Highly Customizable Background Gradients
- Gradient Text Generator
- CSS Shadow Gradients
- FFFuel - a collection of color tools and free SVG generators for gradients, patterns, backgrounds & decorative graphics
- Gradient Generator - Beautiful, lush gradients by Josh W Comeau
- CSS Gradient Generator
- Color Gradient Generator
- Linear Web Gradient Generator
- Gradient Shape Editor
- UI Gradients
- Gradpad - CSS Color Gradients
- Gradient Magic - A Gallery of Fantastic and Unique CSS Gradients
- FFFuel - a collection of color tools and free SVG generators for gradients, patterns, backgrounds & decorative graphics
- Coolor - Color Scheme Generator
- Adobe Color CC
- UI Goodies - A directory of UI Resources
- Refactoring UI - Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.
- Custom Scrollbar Generator
- Cleanup Photos - Remove any object, people, text or defects from your pictures.
- Wavy Dividers Generator
- Omatsuri - Open source browser tools for everyday use
- Webdesign Toolbox - a human-curated collection of tools for web designers, coders, and web strategists
- Support Details - Send to people that have technical bugs to help get info about their browser setup
- Tiny Helper - A collection of free single-purpose online tools for web developers
- Git Command Explorer
- JavaScript Array Explorer
- MailTo Link Generator
- Meta Tags Checker
- Copy Special Characters
- HTML Symbols, Entities and ASCII Character Codes
- RegExr is an online tool to learn, build, & test Regular Expressions
- Free for Dev - This is a list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers.
- How to create pure CSS illustrations and animate them
- Responsive Animations for Every Screen Size and Device
- Making Sense Of WAI-ARIA: A Comprehensive Guide
- Best Practices for Images
- The Surprising Truth About Pixels and Accessibility
- Deep Dive into Text Wrapping and Word Breaking
- Creative List Styling
- CSS Reference - free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
- CSS in Depth
- CSS Layout Cookbook Recipes
- 30 Seconds of CSS
- How to Create Printer-friendly Pages with CSS
- Web Field Manual
- CSS grid generator - a tool that helps developers create custom CSS grid layouts more easily. The generator allows users to specify the number of columns, rows, the gutter size.
- How to build complicated grids using CSS grid
- A Simple Visual Cheatsheet for CSS Grid Layout
- CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.
- Create your design system, part 1: Typography
- Create your design system, part 2: Grid & Layout
- Create your design system, part 3: Colors
- Create your design system, part 4: Spacing
- Create your design system, part 5: Icons
- Create your design system, part 6: Buttons
- Creating the “Perfect” CSS System
- Interactive SVG Reference
- Tips for Creating and Exporting Better SVGs for the Web
- Animate a Blob of Text with SVG and Text Clipping
- ICONSVG is a tool to simplify the process of finding and generating common icons for your project.
- SVG Arista - Super handy SVG drawing animation tool
- Warp SVG - SVG text by warping, bending or distorting it
- SVG Cropper Tool - remove blank space easily
- Tablr Icons - Over 4600 pixel-perfect icons for web design
- IconBuddy - Download, Customize, Edit, and Personalize. Over 180k open source icons
- A pretty good SVG Icon System - CSS Tricks
- The guide to integrating and styling icon systems — inline SVG and icon components
- The guide to integrating and styling icon systems — SVG sprites, SVG symbols and icon fonts
- The Front-End Developer's Guide to the Terminal
- The Front-End Checklist
- The Front-End Design Checklist
- A collection of the best UX and UI practices
- A list of everything that could go in the head of your document
- Front-end Guidelines Questionnaire
- Making Sense Of WAI-ARIA: A Comprehensive Guide
- The Surprising Truth About Pixels and Accessibility
- Code Examples and Other Accessibility Resources
- Accessibility for Teams - Gov
- Accessibility for Teams - This is a starter guide for teams about delivering accessible websites. Each person on your team has their own responsibilities, this guide tells you what everybody needs to do.
- Inclusive Web Design Checklist
- How do you mark up an accordion?
- How to Keep Your CSS Grid Layouts Accessible
- Conversational Semantics with HTML and ARIA
- Contrast Ratio
- A11Y Style Guide
- Accessibility Strategies for Your Content Team
- How to make external links accessible
- What is a CDN and how does it work?
- ImageKit - Intelligent real time image optimization, resizing, cropping and super fast delivery
- Amazon Cloudfront - Highly programmable, secure content delivery network (CDN)
- CDN - Improve performance by using a content delivery network.
- A Web Developer’s Guide to Browser Caching
- Best practices for cache control settings for your website
- Cache-Control for Civilians
- The State of Browser Caching, Revisited