Listopia
Handy list of useful learning materials, cheatsheets and resources for all things frontend.
Stock images
- unsplash.com: Beautiful, free images and photos that you can download and use for any project
- gratisography.com: Quirky, creative, always free photos
- littlevisuals.co: Free, high resolution images. Use them anyway you want - free for commercial use
- mazwai.com: Stunning free stock footage clips, hand-picked by our in-house team of video professionals. Simple licensing, and no sign-up required
- negativespace.co: Beautiful, high-resolution free stock photos. For personal or commercial use, all of our CC0 licensed images are completely free to use
- nos.twnsnd.co: Vintage photos from the public archives. Free of known copyright restrictions
- picsum.photos: The Lorem Ipsum for photos
Icons & SVGs
- thenounproject.com: Icons for everything. Over 2 Million curated icons, created by a global community.
- svgicons.sparkk.fr: Ready to use SVG icons for the web
- Material Design Icons: Material design icons by Google
- jam-icons.com: More than 800 MIT licensed icons available to use through JavaScript, CSS/Font or SVG technique
- undraw.co: Open-source illustrations for any idea you can imagine and create
- humaaans.com: Mix-&-match illustrations of people with a design library. Available on Figma, Sketch, InVision Studio and Adobe XD
- illlustrations.co: Designed 100 awesome illustrations during 100 days of illustration challenge
Cheatsheets, references & code snippets
- caniuse.com: Provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers
- cssvalues.com: CSS Values is a simple infoapp that lets you search for almost any CSS property and get a simple list of possible values
- htmlhead.dev: A free guide to HTML5
headelements - Typography trivia about quotes, apostrophes, dashes and hyphens: A comprehensive guide to using proper typographic characters, including correct grammatical usage
- HTML symbol, entities and codes: Need the copyright sign HTML code? Or the degrees Celsius HTML entity? Scroll on for dingbats, circled numbers, script letter HTML codes, the angstrom sign, biohazard sign, alef symbol, HTML checkmark entity and even a heavy black heart.
- overapi.com: Cheatsheet library of various frontend technologies and programming languages
- CSS 3 animation library: CSS3 animations cheatsheet
- easings.net/en: Cheatsheet of popular CSS easings functions
- cubic-bezier.com: A better tool for
cubic-bezier()easing - animista.net: Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use
- cssgradient.io: Besides being a css gradient generator, the site is also chock-full of colorful content about gradients from technical articles to real life gradient examples like Stripe and Instagram
- https://uigradients.com: A uiGradients is a community contributed collection of beautiful multi-color gradients
- colorhunt.co: An open collection of color palettes
- www.colourlovers.com: COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles
Design Inspirations
- Behance: Behance is a social media platform owned by Adobe which aims to showcase and discover creative work
- Dribbble: Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals
- Pinterest: A visual discovery engine for ideas, artworks and projects
Online publications
- A List Apart: explores the design, development, and meaning of web content, with a special focus on web standards and best practices
- Smashing Magazine: Delivers reliable, useful, but most importantly practical articles to web designers and developers
- CSS Tricks: CSS-Tricks is really about building websites and all that entails, mostly from a front-end perspective
- 24 Ways: For twenty-four days each December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer
Tools
- squoosh.app: Compress and compare images with different codecs, right in your browser
- svgomg.firebaseapp.com: An SVG optimizer based on SVGO
- google-webfonts-helper: Get eot, ttf, svg, woff and woff2 files + CSS snippets
Learning resources
Free
- UX Conference Talks
- UX Crash Course: 31 Fundamentals by Joel Marsh
- Laws of UX by Jon Yablonski
- Design Systems by Figma
- Design Better by InVision
- web.dev by Google Developers
- Web Accessibility by Google
- You don’t know JS by Kyle Simpson
- Eloquent JavaScript by Marijn Haverbeke
- Atomic Design by Brad Frost
- Magic of CSS by Adam Schwartz