Mostly tools but also guides / tutorials / courses, always updating it.
๐ Course (๐ Read,
๐ Book
๐ Tutorial / blog post / guide
๐ง Newsletter / tutorials by email
- Sections:
- Design - Development - Others
- ๐น Subsections
- โ Specific Topics
- ๐น Subsections
- Design - Development - Others
โ Learn:
-
โถ๏ธ Improving web and mobile typography - 5 guidelines - by Sketch Together Youtube -
Beautiful Type - inspiration and font pairings examples
-
Font Pair - font pairings inspiration from googlefonts
โ Assets:
โ Tools:
-
๐ง Modular Scale
-
๐ง Type-Scale
โ Converters:
- Convert A Color - inputs and outputs a single color in hex, rgb, hsl and cmyk, 900-50 complete palette
โ Palettes:
-
Color Review - test accessibility, contrast
-
Accessible Brand Colors - test
-
Material Palettes - good when a complete palette is needed, multiples tones.
-
Material Design Color Tool - uses the material design palette, has accessibility testing, limit of 8 colors
-
Color Hunt - for inspiration, interesting colors, base for a palette
-
Color Koala - for inspiration, interesting colors, base for a palette, has a filter for light/bright/dark colors and a desired hue
-
SchemeColor - interesting color palettes by concepts / brands, get a palette from image
-
Color Spark - single color/gradient inspiration
โ Gradients:
-
uiGradients - inspiration, interesting colors
-
Web Gradients by Itmeo - inspiration, interesting colors, can copy the css in hex
-
CSS Gradient - visual gradient generator for complex gradients, outputs the css code in rgba
-
Gradient Hunt - inspiration, interesing colors, copies css in rgba
โ Others:
-
Khroma - AI to explore colors and their combinations with typography, poster, gradient, images. Still in beta
-
๐ง Cool Backgrounds - Generate backgrounds with effects
-
๐ง Blob Maker
โ Icons:
-
๐ง Favicon - to create an .ico file to use as a website's icon
โ Videos:
-
๐ ๐ Hack Design - Design course with many resources
-
๐ How my design came to live - design process and struggles
โ Courses:
- The Gymnasium - Courses about design and development
- ๐
โถ๏ธ UX Fundamentals ~ 3-6h - ๐
โถ๏ธ Information design and visualization fundamentals ~ 3-6h - ๐
โถ๏ธ Writting for web and mobile ~1h - ๐
โถ๏ธ Atomic design and pattern lab ~1h - ๐
โถ๏ธ Prototyping for digital products and websites ~1h
- ๐
- Balsamiq Learn - has UI/UX courses and resources
- ๐ ๐ Intro to UI Wireframing
- ๐
โถ๏ธ Psychology of UI Design ~ 3h
- Design Code - has mostly paid courses on design and code.
- ๐
โถ๏ธ Design System in Figma
- ๐
โ Books:
- ๐ Atomic Design
โ Guides:
-
Women Made It - design tools, books, podcasts, blogs made by women
-
Humane by Design - design best practices
-
Ind.id Labs - guides, projects and practices for good and ethical design
-
๐ฎ Method of Action - games to learn design
โ Articles:
-
๐ Is your product designed to be calm? - designing unobtrusive and with respect, guidelines to follow
-
Dark Patterns - BAD design examples
- ๐ Web design crash course - by Ali Spittel
- Lapa Ninja - collection of free design resources, books, inspiration
-
UX Booth - articles for everything UX
-
Style Guide - resources, examples, tools
-
Protorypr - resources, blog - CONSTANTLY CHECK
-
Design Systems - Examples made by figma
-
UI Goodies - resources, tools
-
Design System Manager - Learn - by InVision
-
UX Tricks - blog and some free/paid ebooks
โ Tools:
- ๐ง Checklist Design - collection of UI/UX best practices
-
๐ง Overflow - turn your designs into playable user flow diagrams that tell a story
-
One Page Love - inspiration
-
Awwwards - top websites
-
FFF - interesting web animations
โ Learn:
โถ๏ธ Structuring and Organizing HTML5 Forms - The Gymnasium - HTML ~ 1h
โ Others:
-
๐ง HTML Escape - outputs escaped html, useful for pasting code, website has other of tools too
-
HTML5 UP - free templates, good for inspiration
โ Learn:
-
Daily CSS Design - Amazing illustrations made with CSS
-
๐ง Daily CSS Images - 50 day CSS challenges, it seems to be discontinued
-
๐ CSS skeleton screens
- Bugsnag Blog - Various tutorials and guides about web development
-
๐ Rachel Andrew's Blog - everything CSS
-
๐ Custom Property (CSS Variables) controlled fluid type sizing
-
๐ง Piccalilli - email newsletter about UI
-
๐ฎ CSS Diner - learn and practice css selectors
-
๐ฎ CSSBattle
-
๐ฎ CSS Surgeon - learning css transformations
โ Flexbox & Grid
-
๐ฎ Flexbox Zombies
-
๐ฎ Flexbox Froggy
-
๐ฎ Flexbox Defense
-
Grid to Flex - practical uses for flexbox and css grid, comparations between them
-
๐ Enhancing CSS Layouts: floats, flexbox, grid - tutorials, examples, patterns
- ๐geddski - creator of flexbox zombies & other games, articles about css, ui, etc
โ Animations:
โ Challenges:
-
โซ Frontend Mentor
-
โซ Frontloops Markup - challenges without solutions are free
-
โซ 100 Days Of CSS
-
โซ CSS Zen Garden
โ Preprocessors:
- Getting Sassy with CSS - slides and exercises
โ Assets:
โ Shapes:
-
๐ The shapes of CSS -> guide to create multiple shapes with css
-
๐ CSS border radius can do that? - to create interesting figures with border radius
โ Libraries:
โ Articles:
-
Avataaars - svg avatars generator
โ Courses:
-
Scotch - courses, tutorials, guides, books and blog. free and premium content
- ๐ ๐ 10 Need to know JS concepts
- ๐
โถ๏ธ Getting started with JS for web dev ~5h - ๐ ๐ Javascript Algorithms
- ๐
โถ๏ธ Javascript Foundations - The Gymnasium - JS ~ 3-6h
โ Books:
- ๐ You Don't Know JS Series
- ๐ Up & Going
- ๐ Scope & Closures
- ๐ this & Object Properties
- ๐ Types & Grammar
- ๐ Async & Performance
- ๐ ES6 & Beyond
- ๐ Eloquent Javascript
- ๐ Javascript Grammar - visual guide (release was free)
โ Tutorials:
-
JavaScript the Right Way - javascript guide for all levels, tips and good practices
-
JavaScript Teacher - tutorials, guides, videos
โ Challenges:
- โซ Codewars
- โซ Edabit
โ Tools:
- ๐ง JSHint - analyses js code for best practices / errors
โ Service Workers:
-
๐ฎ Service Workies
โ Node
โถ๏ธ Introduction to Node.js - The Gymnasium - JS ~ 1h
โ Testing
โ React
- ๐ Semantic JSX
โ Libraries
- Marked.js -> parser and compiler to handle markdown data and rendering
-
RegexOne - regex interactive tutorial
-
Regexr - test, visualize, understand regex
-
regex101 - test, visualize, understand regex
-
RegExper - regex visualization
-
๐ Converting objects keys from snake_case to camelCase with JavaScript
-
๐
โถ๏ธ Modern Web Design - The Gymnasium - HTML, CSS, JS ~ 3-6h -
๐
โถ๏ธ Responsive Web Design Fundamentals - The Gymnasium - HTML, CSS, JS ~ 3-6h -
โซ Frontloops Elements - challenges without solutions are free
-
SuperHi tutorials - video and tutorials section, superhi has paid courses on development with design
-
Little Snippets - code snippets
-
This is Responsive - pattens and resources for creating responsive web experiences
-
Accssible - writing about CSS and design, tutorials and articles
-
Pintab - design and development resource list
-
The Gymnasium - Courses about design and development
- App Academy Open - free full stack curriculum, based on videos and interactive exercises
- ๐
โถ๏ธ Welcome To Coding - ๐
โถ๏ธ Intro to Programming - ๐
โถ๏ธ Software Engineering Foundations - ๐
โถ๏ธ Ruby - ๐
โถ๏ธ SQL - ๐
โถ๏ธ Rails - ๐
โถ๏ธ JavaScript - ๐
โถ๏ธ React - ๐
โถ๏ธ Full Stack Project - ๐
โถ๏ธ Job Search - ๐
โถ๏ธ GraphQL
- ๐
-
DevDojo - Has paid courses but some free videos, articles and tutorials
-
Material Design Developer Tutorials - codelabs
-
Alison - Some free courses with certifications but seems to be outdated
- Fullstack Academy - offers paid bootcamps, got the prep for free
- ๐
โถ๏ธ Prep Workshop
- ๐
- web.dev - still in beta
-
๐ Smashing Magazine - Articles on everything web dev and design
-
๐ A List Appart
-
Code Talks - last talks about development
-
Coderwall - reddit for coders
- TodoMVC - examples for building todo apps in various frameworks, some with database examples too
-
โญ Webaud.it - checklist to follow form proper formating, performance, accessibility and security
- Insomnia - OS REST client and APIs debugger
-
npm
โ Build
-
createapp.dev - generates package.json and webpack.config.js for webpack, for parcel it generates the package.json. also generates the other dependencies files (like the .babelrc file)
- The Gymnasium - Courses about design and development
- ๐
โถ๏ธ Intro to Git and GitHub
- ๐
-
Gitbook - free hosting for documentation-like websites from github, good for notes, resources and allows more styling
- Interview Cake - paid guidance for programming interview
- ๐ง 7 day email course + weekly programming problem
- Deployment with Codepen Projects hosting - free but can't choose domain name with free accounts
- Namecheap
-
User Testers - earn money testing websites
-
๐ Guide to Freelancing - by Bonsai and InVision
-
Women Who Design - job board and design ladies to follow
- The Gymnasium - Courses about design and development
- ๐
โถ๏ธ Defeating busy - learn to plan, manage, etc
- ๐
- Notist - slide maker
-
Buildvisible - blog and resources about SEO mostly