From 66ff314db4535b91e99c7fdaf4d02839f22368ac Mon Sep 17 00:00:00 2001 From: "Won J. You" Date: Sun, 29 Mar 2026 09:00:45 -0400 Subject: [PATCH] Update README.md Removed dead links and replaced links with more current ones --- README.md | 545 +++++++++++++++++++++++++++--------------------------- 1 file changed, 270 insertions(+), 275 deletions(-) diff --git a/README.md b/README.md index 3fccd70..018da58 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,20 @@ MegaListofResources =================== -This is a TON of helpful links for designers and front-end developers. We encourage you to play around and explore all of these resources, as everything that's on this list comes highly recommended. If you ever find yourself at a loss for what to do, poke around in here. +This is a TON of helpful links for designers and front-end developers. We encourage you to play around and explore all of these resources, as everything that's on this list comes highly recommended. If you ever find yourself at a loss for what to do, poke around in here. While not every person will necessarily need all of these resources, it's a great way to discover what you personally like and works for you. Use only what you find useful! __________ -*About DESIGNATION:* -*[DESIGNATION](http://designation.io/) ([designation.io/](http://designation.io/)) is a full-time, full-immersion, full-stack design bootcamp in Chicago and St. Louis.* - -*Over 16 weeks, students learn digital design, front-end development and user experience (UX), and build their portfolios by working with live clients on real world projects.* - -_________ - **Search:** === -- [Google](https://www.google.com/?gws_rd=ssl) -- [StackOverflow - coding questions](http://stackoverflow.com/) -- [UX Stack Exchange - UX questions](http://ux.stackexchange.com/) -- [Graphic Design Stack Exchange - visual design questions](http://graphicdesign.stackexchange.com/) +- [Google](https://www.google.com/) +- [StackOverflow - coding questions](https://stackoverflow.com/) +- [UX Stack Exchange - UX questions](https://ux.stackexchange.com/) +- [Graphic Design Stack Exchange - visual design questions](https://graphicdesign.stackexchange.com/) - [MDN - Mozilla Developer Network (for good documentation)](https://developer.mozilla.org/en-US/) -- [Creative Commons - license-free image search](http://search.creativecommons.org/) +- [Creative Commons - license-free image search](https://search.creativecommons.org/) _____________ @@ -29,67 +22,78 @@ _____________ **Online Communities:** === - [Hacker News - startup culture/news/trends](https://news.ycombinator.com/) -- [Designer News - design culture/news/trends](https://news.layervault.com/) -- [Product Hunt - startup culture/news/trends](http://www.producthunt.com/) -- [Sidebar - design culture/news/trends](http://sidebar.io/) -- [Dribbble - design culture/trends](http://dribbble.com/) +- [Web Designer News - design culture/news/trends](https://webdesignernews.com/) +- [Product Hunt - startup culture/new tools](https://www.producthunt.com/) +- [Sidebar - design culture/news/trends](https://sidebar.io/) +- [Dribbble - design culture/trends](https://dribbble.com/) - [Behance - design culture/trends](https://www.behance.net/) -- [/r/web_design](http://reddit.com/r/web_design) +- [/r/web_design](https://reddit.com/r/web_design) +- [/r/userexperience](https://reddit.com/r/userexperience) _____________ -**Interviews:** +**Responsiveness:** === -- [Dorm Room Tycoon - Design Interviews](http://drt.fm/) -- [DESIGNATION Blog](http://designation.io/blog/category/interviews/) -- [Humble Pied](http://humblepied.com/) -- [InvisionApp Blog](http://blog.invisionapp.com/) +- [Responsive Patterns](https://bradfrost.github.io/this-is-responsive/patterns.html) +- [Lettering.js - responsive typography](https://letteringjs.com/) +- [Fluid images](https://unstoppablerobotninja.com/entry/fluid-images) +- [Gridless boilerplate](https://thatcoolguy.github.io/gridless-boilerplate/) +- [PX to EM](https://pxtoem.com/) +- [Media Queries Patterns Library](https://mediaqueri.es/) +- [This Is Responsive - Patterns Library](https://bradfrost.github.io/this-is-responsive/) +- [Ink - create responsive interfaces](https://ink.sapo.pt) +- [Responsinator](https://www.responsinator.com/) _____________ -**Responsiveness:** +**Front-End Development:** === -- [Responsive Patterns](http://bradfrost.github.io/this-is-responsive/patterns.html) -- [Responsive PX](http://responsivepx.com/) -- [Lettering.js - responsive typography](http://letteringjs.com/) -- [Fluid images](http://unstoppablerobotninja.com/entry/fluid-images) -- [Fluid 960 grid](http://designinfluences.com/fluid960gs/) -- [Gridless](http://thatcoolguy.github.io/gridless-boilerplate/) -- [PX to EM](http://pxtoem.com/) -- [Media Queries Patterns Library](http://mediaqueri.es/) -- [Responsive Web Design, Most Complete Guide](http://www.webdesignshock.com/responsive-web-design/) -- [This Is Responsive - Patterns Library](http://bradfrost.github.io/this-is-responsive/) -- [Ink - create responsive interfaces](http://ink.sapo.pt) -- [Responsinator](http://www.responsinator.com/) +- Important must-read of things to understand in front-end dev: [css resets, responsive media queries, viewport meta tag, box model, container/columns/rows best practices, clearfix](https://www.adamkaplan.me/grid/) +- [Code Guide - standards for flexible, durable HTML/CSS](https://mdo.github.io/code-guide/) +- [How to keep up to date on front-end technologies](https://uptodate.frontendrescue.org/) +- Front-End Frameworks: + - [HTML5 Boilerplate](https://html5boilerplate.com/) + - [ZURB Foundation](https://foundation.zurb.com/) + - [Skeleton](https://www.getskeleton.com/) + - [Centurion](https://www.centurionframework.com/) + - [Compare front-end frameworks](https://usablica.github.io/front-end-frameworks/compare.html) +- Javascript Frameworks: + - [AngularJS](https://angularjs.org/) + - [EmberJS](https://emberjs.com/) + - [Backbone](https://backbonejs.org/) +- [Semantic UI - semantics for sharing](https://semantic-ui.com/) _____________ -**Front-End Development:** +**Design Systems & Component Libraries:** === -- Important must-read of things to understand in front-end dev: [css resets, responsive media queries, viewport meta tag, box model, container/columns/rows best practices, clearfix](http://www.adamkaplan.me/grid/) -- [Code Guide - standards for flexible, durable HTML/CSS](http://mdo.github.io/code-guide/) -- [How to keep up to date on front-end technologies](http://uptodate.frontendrescue.org/) -- Front-End Frameworks: - - [HTML5 Boilerplate](http://html5boilerplate.com/) - - [Blueprint](http://www.blueprintcss.org/) - - [ZURB Foundation](http://foundation.zurb.com/) - - [99Lime](http://www.99lime.com/) - - [Skeleton](http://www.getskeleton.com/) - - [Centurion](http://www.centurionframework.com/) - - [Compare front-end frameworks](http://usablica.github.io/front-end-frameworks/compare.html) -- Javascript Frameworks: - - [AngularJS](https://angularjs.org/) - - [EmberJS](http://emberjs.com/) - - [BatmanJS](http://batmanjs.org/) - - [Backbone](http://backbonejs.org/) - - [SproutCore](http://sproutcore.com/) - - [YUI](http://yuilibrary.com/) -- [Semantic UI - semantics for sharing](http://semantic-ui.com/) +- [shadcn/ui - copy-paste component collection built on Radix UI + Tailwind CSS; you own the code](https://ui.shadcn.com/) +- [Radix UI - unstyled, accessible primitives for menus, dialogs, tooltips, and more](https://www.radix-ui.com/) +- [Material UI (MUI) - Google Material Design for React](https://mui.com/) +- [Mantine - 100+ components and 50 hooks, CSS-Modules based](https://mantine.dev/) +- [DaisyUI - Tailwind CSS plugin with 35+ pre-built themes, pure CSS](https://daisyui.com/) +- [Headless UI - unstyled, accessible components from the Tailwind CSS team](https://headlessui.com/) +- [Chakra UI - accessible, composable component library](https://chakra-ui.com/) +- [Storybook - build, document, and test UI components in isolation](https://storybook.js.org/) + + +_____________ + + +**AI-Assisted Design:** +=== +- [v0 (Vercel) - text-to-UI generating React + Tailwind + shadcn/ui code](https://v0.app/) +- [Bolt.new - browser-based full-stack AI builder from StackBlitz](https://bolt.new/) +- [Framer AI - text prompts create complete layouts, sections, and interactive prototypes](https://www.framer.com/) +- [Google Stitch - turn prompts or sketches into mobile/web UI, exports to Figma or HTML/CSS](https://stitch.withgoogle.com/) +- [Locofy.ai - convert Figma designs to production-ready React, Next.js, Vue, Flutter](https://www.locofy.ai/) +- [Uizard - AI-powered rapid prototyping; sketch-to-UI and text-to-wireframe](https://uizard.io/) +- [Figma AI - built-in AI for generating first-draft designs, content, and component suggestions](https://www.figma.com/) _____________ @@ -97,34 +101,25 @@ _____________ **Sharing/Feedback/Publishing:** === -- [Scratchpad](http://scratchpad.io/) -- [Firepad](http://www.firepad.io/) -- [Snaggy](http://snag.gy/) -- [Bounce](http://www.bounceapp.com/) -- [DropCanvas](http://dropcanvas.com/) +- [Scratchpad](https://scratchpad.io/) +- [Snagit](https://www.techsmith.com/screen-capture.html) - [WeTransfer](https://www.wetransfer.com/) - [SquadEdit](https://squadedit.com/) -- [CodePen](http://codepen.io/) -- [JSFiddle](http://jsfiddle.net/) -- [Editr](http://lab.idered.pl/editr/) +- [CodePen](https://codepen.io/) +- [JSFiddle](https://jsfiddle.net/) +- [Editr](https://lab.idered.pl/editr/) - [Snipt](https://snipt.net/) -- [Chop](http://chopapp.com/) -- [Screencast-o-matic](http://www.screencast-o-matic.com/) -- [Beam It](http://www.justbeamit.com/) -- [Copybar](http://copybar.io/login) -- [JS Bin](http://jsbin.com/welcome/1/edit) -- [Dablet](http://dabblet.com/) -- [Floobits](https://floobits.com/) -- [Stypi](https://code.stypi.com/aexzlzrl) +- [Chop](https://chopapp.com/) +- [Screencast-o-matic](https://www.screencast-o-matic.com/) +- [Beam It](https://www.justbeamit.com/) +- [JS Bin](https://jsbin.com/) +- [Dabblet](https://dabblet.com/) - [Paste](https://paste.sh/) -- [LiveWeave](http://liveweave.com/) -- [VolaFile](https://volafile.io/) -- [Talky](https://talky.io/) +- [LiveWeave](https://liveweave.com/) +- [Talky - peer-to-peer video and audio chat in the browser](https://talky.io/) - [ShareFest](https://www.sharefest.me/) -- [Appear](https://appear.in/) +- [Whereby - browser-based video meetings, no download required](https://whereby.com/) - [CoderPad](https://coderpad.io/) -- [Criticue - peer review websites](http://www.criticue.com/) -- [RedPen](https://redpen.io/) _____________ @@ -133,13 +128,13 @@ _____________ **Analytics:** === -- [Google Analytics](http://analytics.google.com/) -- [Piwik (open source)](http://piwik.org/) -- [MixPanel](http://mixpanel.com/) +- [Google Analytics](https://analytics.google.com/) +- [Matomo (open source, formerly Piwik)](https://matomo.org/) +- [MixPanel](https://mixpanel.com/) - [GoSquared](https://www.gosquared.com/) -- [Flurry](http://www.flurry.com/) - [Chartbeat](https://chartbeat.com) -- [Parsely](http://www.parsely.com/) +- [Parsely](https://www.parsely.com/) +- [PostHog - open source product analytics with session replays](https://posthog.com/) _____________ @@ -147,12 +142,12 @@ _____________ **Hosting Platforms:** === -- [CloudCannon - free static hosting](http://cloudcannon.com/) -- [Pancake - free static hosting](https://pancake.io/) -- [Site44 - static hosting](http://www.site44.com/) +- [CloudCannon - static hosting with a CMS](https://cloudcannon.com/) - [Meteor - JavaScript app framework](https://www.meteor.com/) -- [Firebase - JavaScript app framework](https://www.firebase.com/) -- [Forge](https://getforge.com/) +- [Firebase - backend platform for web and mobile apps](https://firebase.google.com/) +- [Vercel - deploy front-end apps with zero config](https://vercel.com/) +- [Netlify - static hosting with CI/CD and serverless functions](https://www.netlify.com/) +- [Render - cloud hosting for web apps, APIs, and static sites](https://render.com/) _____________ @@ -162,57 +157,46 @@ _____________ **Front-End Development Tools:** === - [Huge List of Front-End Dev Bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks) -- [1434 Best Resources for Designers & Developers](www.agiledesigners.com) -- [Introduction to CSS3 transitions (article)](http://www.css3.info/preview/css3-transitions/) -- [Bounce.js - Tool to create CSS3 animations](http://bouncejs.com/) -- [WOW - CSS3 animation library](http://mynameismatthieu.com/WOW/) -- [CSS Palette](http://www.houghtona.com/cssPalette/index.php) -- [CSS3 Generator](http://css3generator.com/) -- [CSS3] (http://css3.mikeplate.com/) -- [CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/) -- [CSS Button Generator](http://www.dextronet.com/css-buttons-generator/) -- [LoremPixel - placeholder images](http://lorempixel.com/) -- [Lipsum - placeholder text](http://lipsum.com/) -- [WordMark](http://wordmark.it/) -- [LayerStyle](http://layerstyles.org/builder.html) -- [Border Image Generator](http://border-image.com/) -- [iCheck - super customized checkboxes and radio buttons for jQuery](http://fronteed.com/iCheck/) -- [SVGeneration](http://www.svgeneration.com/) -- [Grumpicon - create fallback PNGs for SVG files](http://grumpicon.com/) -- [CSS3 Animation Cheat Sheet](http://www.justinaguilar.com/animations/index.html#) -- [Animate CSS - CSS3 library](http://daneden.github.io/animate.css/) -- [Pure - small, responsive CSS modules](http://purecss.io/) -- [Tridiv - 3D CSS](http://tridiv.com/) -- [ToDoMVC - JavaScript resource](http://todomvc.com/) -- [SuperheroJS - JS library](http://superherojs.com/) -- [Unheap - jQuery plugins](http://www.unheap.com/) -- [Random User Generator](http://randomuser.me/) -- [UI Faces](http://uifaces.com/) -- [UI Names](http://uinames.com/) -- [WhatTheme](http://whattheme.com/) -- [IE Browser Testing](https://www.modern.ie/en-us) -- [Article on Front-End and UI Style Guides](http://sideproject.io/front-end-and-ui-style-guides/) +- [1434 Best Resources for Designers & Developers](https://www.agiledesigners.com) +- [Introduction to CSS3 transitions (article)](https://www.css3.info/preview/css3-transitions/) +- [Bounce.js - tool to create CSS3 animations](https://bouncejs.com/) +- [CSS3 Generator](https://css3generator.com/) +- [CSS3 reference](https://css3.mikeplate.com/) +- [CSS Gradient Generator](https://www.colorzilla.com/gradient-editor/) +- [CSS Button Generator](https://www.dextronet.com/css-buttons-generator/) +- [Lorem Picsum - beautiful placeholder images](https://picsum.photos/) +- [Lipsum - placeholder text](https://lipsum.com/) +- [WordMark - preview fonts installed on your system](https://wordmark.it/) +- [Border Image Generator](https://border-image.com/) +- [SVGeneration - create SVG backgrounds](https://www.svgeneration.com/) +- [Grumpicon - create fallback PNGs for SVG files](https://grumpicon.com/) +- [CSS3 Animation Cheat Sheet](https://www.justinaguilar.com/animations/index.html) +- [Animate CSS - CSS3 animation library](https://animate.style/) +- [Pure - small, responsive CSS modules](https://purecss.io/) +- [Tridiv - 3D CSS](https://tridiv.com/) +- [ToDoMVC - JavaScript framework comparison resource](https://todomvc.com/) +- [Random User Generator](https://randomuser.me/) +- [UI Faces - AI-generated avatar photos for design mockups](https://uifaces.com/) +- [UI Names](https://uinames.com/) +- [BrowserStack - cross-browser and device testing](https://www.browserstack.com/) _____________ **Patterns & Pattern Libraries:** === -- [Subtle Patterns - visual pattern](http://subtlepatterns.com/) -- [First Time UX - showcase of new user experiences](http://firsttimeux.tumblr.com/) -- [UI Interaction Library](http://useyourinterface.com/) -- [Subjective-C - innovative iOS interfaces](http://subjc.com/) -[UI Cloud - largest user interface design database in the world](http://ui-cloud.com/) -- [Android Patterns](http://www.androidpatterns.com/) -- [Android UI Patterns](http://www.androiduipatterns.com/2012/09/creating-custom-android-styles-easy-way.html) -- [Android niceties](http://androidniceties.tumblr.com/) -- [Android App Patterns](http://www.android-app-patterns.com//category/grid) -- [Mobile Design Gallery](http://www.mobiledesignpatterngallery.com/mobile-patterns.php) -- [UX Archive](http://uxarchive.com/) -- [Pttrns](http://www.pttrns.com/) -- [Mobile-Patterns](http://www.mobile-patterns.com/) -- [Inspired-UI](http://inspired-ui.com/) -- [Capptivate](http://capptivate.co/) +- [Subtle Patterns - visual pattern backgrounds](https://www.toptal.com/designers/subtlepatterns/) +- [First Time UX - showcase of new user experiences](https://firsttimeux.tumblr.com/) +- [UI Interaction Library](https://useyourinterface.com/) +- [UI Cloud - large user interface design database](https://ui-cloud.com/) +- [Android Patterns](https://www.androidpatterns.com/) +- [Android UI Patterns](https://www.androiduipatterns.com/2012/09/creating-custom-android-styles-easy-way.html) +- [Android niceties](https://androidniceties.tumblr.com/) +- [Android App Patterns](https://www.android-app-patterns.com/) +- [UX Archive - documented UX flows from top apps](https://uxarchive.com/) +- [Pttrns - mobile UI patterns](https://www.pttrns.com/) +- [Mobbin - 400,000+ searchable mobile and web app screenshots](https://mobbin.com/) +- [Screenlane - curated mobile and web UI screenshots, filterable by screen type](https://screenlane.com/) _____________ @@ -222,18 +206,13 @@ _____________ **Native Mobile Design:** === - [Android Design guidelines](https://developer.android.com/design/index.html) -- [Apple Design guidelines](https://developer.apple.com/resources/) +- [Apple Design guidelines](https://developer.apple.com/design/) - Android tools: - - [Android in-browser emulator](https://www.manymo.com/) - - [Android Halo Colors](http://android-holo-colors.com/) - - [Android Google Play icon template](http://www.sparktechsoft.com/blogs/android-design-app-icon-template) - - [Android Asset Studio](http://romannurik.github.io/AndroidAssetStudio/) - - [Android printable kit](http://androiduiux.com/2012/06/30/printable-a4-gui-sketching-kit-nexus-s-galaxy-nexus-and-nexus-7/) - - [Android icons](http://www.androidicons.com/) - - [Device generator](http://developer.android.com/distribute/tools/promote/device-art.html) - - [Android Design tips](http://www.androiddesign.tips/) + - [Android Asset Studio](https://romannurik.github.io/AndroidAssetStudio/) + - [Android printable kit](https://androiduiux.com/2012/06/30/printable-a4-gui-sketching-kit-nexus-s-galaxy-nexus-and-nexus-7/) + - [Android icons](https://www.androidicons.com/) + - [Device art generator](https://developer.android.com/distribute/tools/promote/device-art.html) - iOS tools: - - [iPhone GUI PSD by Teehan Lax](http://www.teehanlax.com/tools/iphone/) - [iOS Do's and Don'ts](https://developer.apple.com/design/tips/) - [PlaceIt - real-life image templates to insert mobile screens](https://placeit.net/) @@ -245,19 +224,16 @@ _____________ **Prototyping:** === - Web dev (HTML, CSS, JS). JS frameworks: - - [FramerJS](http://framerjs.com/) - - [jQuery Mobile](http://jquerymobile.com/) - - [Codiqa](https://codiqa.com/) - - [Ratchet](http://goratchet.com/) - - [Hammer JS](http://hammerjs.github.io/) -- Xcode --> [Origami for XCode](http://facebook.github.io/origami/) --> [IDEO's Avocado for Origami](http://ideo.is/avocado_labs) -- [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) + - [Framer - design and publish interactive websites and prototypes](https://www.framer.com/) + - [jQuery Mobile](https://jquerymobile.com/) + - [Hammer JS - touch gesture library](https://hammerjs.github.io/) +- [Origami Studio - free prototyping tool by Meta, used for Facebook, Instagram, and WhatsApp products](https://origami.design/) +- [Adobe After Effects](https://www.adobe.com/products/aftereffects.html) - Drag-and-drop tools: - - [Proto.io](http://proto.io/) + - [Figma - collaborative interface design and prototyping](https://www.figma.com/) + - [Proto.io](https://proto.io/) - [Flinto](https://www.flinto.com/) - - [Marvel](http://marvelapp.com/) - - [InvisionApp](http://inivisionapp.com) - - [Pop](https://popapp.in/) + - [Marvel](https://marvelapp.com/) - [Fluid UI](https://www.fluidui.com/) @@ -266,21 +242,23 @@ _____________ **Typography:** === -- [Choosing the Right Font: A Practical Guide to Typography on the Web](http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15) -- [Butterick's Practical Typography - best guide online (read 'Summary of key rules')](http://practicaltypography.com/) -- [Instacalc - EM to PX calculator](http://instacalc.com/16738) -- [TypeScale](http://type-scale.com/) -- [The Elements of Typographic Style Applied to the Web](webtypography.net) -- [Thinking with Type](http://www.thinkingwithtype.com/) -- [WhatTheFont](http://www.myfonts.com/WhatTheFont/) -- [MyFonts - bestsellers (trending fonts)](http://www.myfonts.com/bestsellers/) -- [Typewolf - font recommendations](http://www.typewolf.com/) -- [Type Finder - find reputable typefaces](http://www.type-finder.com/) +- [Choosing the Right Font: A Practical Guide to Typography on the Web](https://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15) +- [Butterick's Practical Typography - best guide online (read 'Summary of key rules')](https://practicaltypography.com/) +- [TypeScale](https://type-scale.com/) +- [The Elements of Typographic Style Applied to the Web](https://webtypography.net) +- [Thinking with Type](https://www.thinkingwithtype.com/) +- [WhatTheFont](https://www.myfonts.com/WhatTheFont/) +- [MyFonts - bestsellers (trending fonts)](https://www.myfonts.com/bestsellers/) +- [Typewolf - font recommendations and font pairing](https://www.typewolf.com/) +- [Type Finder - find reputable typefaces](https://www.type-finder.com/) - Online font services: - - [Typekit](https://typekit.com/) - - [Cloud Typography](http://www.typography.com/cloud/welcome/) - - [Adobe Web Edge Fonts](https://edgewebfonts.adobe.com/fonts) - - [Google Fonts (free)](https://www.google.com/fonts) + - [Adobe Fonts (formerly Typekit)](https://fonts.adobe.com/) + - [Cloud Typography](https://www.typography.com/cloud/welcome/) + - [Google Fonts (free)](https://fonts.google.com/) +- Variable fonts: + - [v-fonts.com - find and test variable fonts](https://v-fonts.com/) + - [Google Fonts — Variable Fonts catalog](https://fonts.google.com/variablefonts) + - [Variable Fonts Guide (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) _____________ @@ -289,28 +267,33 @@ _____________ **Colors:** === -- [Color Template](http://www.rocket-design.fr/color-template/) -- [Paletton](http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF) -- [Kuler - color wheel](https://kuler.adobe.com/create/color-wheel/) -- [Colour Lovers - color trends](http://www.colourlovers.com/) -- [ColorHexa - color encyclopedia](http://www.colorhexa.com/) -- [BrandColors](http://brandcolors.net/) +- [Paletton - color scheme designer](https://paletton.com/) +- [Adobe Color - color wheel, palette generator, and accessibility checker](https://color.adobe.com/) +- [Coolors - fast color palette generator and contrast checker](https://coolors.co/) +- [Realtime Colors - preview your palette on a real website layout](https://www.realtimecolors.com/) +- [Colour Lovers - color trends](https://www.colourlovers.com/) +- [ColorHexa - color encyclopedia](https://www.colorhexa.com/) +- [BrandColors - official brand hex codes](https://brandcolors.net/) +- [oklch.fyi - OKLCH color picker and converter (natively supported in CSS)](https://oklch.fyi/) +- [WebAIM Contrast Checker - WCAG contrast ratio checker](https://webaim.org/resources/contrastchecker/) +- [OddContrast - contrast checker with OKLCH and Display P3 support](https://www.oddcontrast.com/) _____________ **Branding:** === -- [Style Tiles](http://styletil.es/) -- [Webstiles - web style tiles](http://webstiles.namanyayg.com/) +- [Style Tiles](https://styletil.es/) +- [Webstiles - web style tiles](https://webstiles.namanyayg.com/) _____________ **Images:** === -- [PNG Gauntlet - compress image sizes](http://pnggauntlet.com/) -- [Pic Resize](http://www.picresize.com/) +- [Squoosh - compress and convert images in the browser](https://squoosh.app/) +- [Pic Resize](https://www.picresize.com/) +- [TinyPNG - compress PNG and JPEG images](https://tinypng.com/) _____________ @@ -319,9 +302,9 @@ _____________ **Logos:** === -- [Logo Lounge](http://logolounge.com/) -- [Logopond](http://logopond.com/) -- [Brands of the World](www.brandsoftheworld.com) +- [Logo Lounge](https://logolounge.com/) +- [Logopond](https://logopond.com/) +- [Brands of the World](https://www.brandsoftheworld.com) _____________ @@ -329,8 +312,8 @@ _____________ **Wireframes:** === -- [I <3 wireframes](http://wireframes.tumblr.com/) -- [Wireframe Showcase](http://www.wireframeshowcase.com/) +- [I ❤ wireframes](https://wireframes.tumblr.com/) +- [Wireframe Showcase](https://www.wireframeshowcase.com/) _____________ @@ -339,10 +322,10 @@ _____________ **References & Cheat Sheets:** === -- [All API Cheat Sheets](http://overapi.com/) -- [jQuery Quick API Reference](http://oscarotero.com/jquery/) -- [Article of 100 Terrific Dev Tools](http://dailytekk.com/2012/09/24/100-terrific-tools-for-coders-developers/) -- [Learn Layout - simple, visual way to learn HTML/CSS layout design](http://learnlayout.com/) +- [All API Cheat Sheets](https://overapi.com/) +- [jQuery Quick API Reference](https://oscarotero.com/jquery/) +- [Learn Layout - simple, visual way to learn HTML/CSS layout design](https://learnlayout.com/) +- [CSS Tricks - articles and almanac for HTML/CSS/JS](https://css-tricks.com/) _____________ @@ -351,13 +334,11 @@ _____________ **Validation/Code Cleaner:** === -- [HTML Markup Validation (W3) ](http://validator.w3.org/) -- [HTML Tidy](http://infohound.net/tidy/) -- [CSS Validation (W3)](http://jigsaw.w3.org/css-validator/#validate_by_upload) -- [Clean CSS](http://www.cleancss.com/) -- [CSS Compressor](http://www.cssdrive.com/index.php/main/csscompressor/) -- [Procssor - organize your CSS](http://tools.maxcdn.com/procssor/) -- [JavaScript Compressor](http://javascriptcompressor.com/) +- [HTML Markup Validation (W3)](https://validator.w3.org/) +- [CSS Validation (W3)](https://jigsaw.w3.org/css-validator/#validate_by_upload) +- [Clean CSS](https://www.cleancss.com/) +- [JavaScript Compressor](https://javascriptcompressor.com/) +- [Procssor - organize your CSS](https://tools.maxcdn.com/procssor/) _____________ @@ -367,12 +348,11 @@ _____________ **Other HTML/CSS components:** === - Email Design: - - [Mailchimp Email Design Reference](http://templates.mailchimp.com/) - - [Beautiful Email Newsletters](http://beautiful-email-newsletters.com/) - - [Brace - Email script when you can't write PHP](http://forms.brace.io/) + - [Mailchimp Email Design Reference](https://templates.mailchimp.com/) - [Campaign Monitor - Ultimate Guide to CSS](https://www.campaignmonitor.com/css/) + - [MJML - responsive email framework](https://mjml.io/) - HTML forms: - - [SitePoint article on HTML5 forms markup](http://www.sitepoint.com/html5-forms-markup/) + - [SitePoint article on HTML5 forms markup](https://www.sitepoint.com/html5-forms-markup/) _____________ @@ -381,17 +361,17 @@ _____________ **Learning (online courses)** === -- [Treehouse](http://teamtreehouse.com/) -- [Codeschool](https://www.codeschool.com/) -- [Learnable](https://learnable.com/) -- [Udacity](http://udacity.com/) -- [Freecodecamp](http://www.freecodecamp.com/) -- [Lynda](http://lynda.com/) -- [Codecademy - free](http://www.codecademy.com/learn) -- [Skillfeed](https://www.skillfeed.com/) -- [SitePoint](http://www.sitepoint.com/) -- [Gibbon](https://gibbon.co/) -- [Free Programming Books - huge list](https://github.com/vhf/free-programming-books/blob/master/free-programming-books.md) +- [Frontend Masters - expert-led video workshops by well-known developers](https://frontendmasters.com/) +- [Scrimba - interactive screencasts where you code inside the video](https://scrimba.com/) +- [The Odin Project - free, project-based full-stack curriculum](https://www.theodinproject.com/) +- [freeCodeCamp](https://www.freecodecamp.org/) +- [Treehouse](https://teamtreehouse.com/) +- [Udacity](https://udacity.com/) +- [Codecademy](https://www.codecademy.com/learn) +- [Lynda / LinkedIn Learning](https://www.linkedin.com/learning/) +- [SitePoint](https://www.sitepoint.com/) +- [web.dev - Google's official web development learning paths](https://web.dev/) +- [Free Programming Books - huge list](https://github.com/EbookFoundation/free-programming-books) _____________ @@ -401,46 +381,59 @@ _____________ **Tutorials/Articles:** === -- [CSS Tricks](http://css-tricks.com/downloads/) -- [CodePlayer](http://thecodeplayer.com/) -- [Design Tutsplus](http://design.tutsplus.com/) + [Code Tutsplus](http://code.tutsplus.com/) -- [Pineapple.io - central hub of tutorials](http://pineapple.io/?reset=true) -- [Photoshop Secrets](http://photoshopsecrets.tumblr.com/) -- [Scotch](http://scotch.io/) -- [Little Big Details](http://littlebigdetails.com/) -- [Design Principles FTW](http://designprinciplesftw.com/) -- [Medium - Design/UX](https://medium.com/design-ux) -- [Code Visually](http://codevisually.com/) -- [DesignInstruct](http://designinstruct.com/) -- [Bento](http://www.bento.io/) -- [Cody](http://codyhouse.co/) -- [ZURB Quips](http://zurb.com/quips) +- [CSS Tricks](https://css-tricks.com/) +- [CodePlayer](https://thecodeplayer.com/) +- [Design Tutsplus](https://design.tutsplus.com/) + [Code Tutsplus](https://code.tutsplus.com/) +- [Scotch](https://scotch.io/) +- [Little Big Details](https://littlebigdetails.com/) +- [Design Principles FTW](https://designprinciplesftw.com/) +- [Code Visually](https://codevisually.com/) +- [DesignInstruct](https://designinstruct.com/) +- [Bento](https://www.bento.io/) +- [CodyHouse](https://codyhouse.co/) +- [ZURB Quips](https://zurb.com/quips) +- [Smashing Magazine](https://www.smashingmagazine.com/) +- [Josh W. Comeau - deep CSS and React tutorials with interactive demos](https://www.joshwcomeau.com/) +- [Kevin Powell (YouTube) - the most recommended CSS educator on YouTube](https://www.youtube.com/@KevinPowell) _____________ +**Motion & Interaction Design:** +=== +- [Rive - interactive animation engine with state machines; used by Spotify, Google, Duolingo](https://rive.app/) +- [LottieFiles - JSON-based animations; Figma/Webflow/Framer integrations](https://lottiefiles.com/) +- [Motion (formerly Framer Motion) - open source JavaScript animation library for React](https://motion.dev/) +- [GSAP (GreenSock) - industry-standard JS animation platform for precise, complex timelines](https://gsap.com/) +- [Framer - design and publish interactive websites with high-fidelity animation](https://www.framer.com/) + + +_____________ + + **Playground/Inspiration:** === -- [ZURB Playground](http://zurb.com/playground) -- [CoDrops](http://tympanus.net/codrops/) -- [CSS Deck](http://cssdeck.com/) -- [UIBox - curated HTML/CSS/JS components library](http://www.uibox.in/) -- [Six UX](http://sixux.com/) -- [UI Parade](http://www.uiparade.com) -- [media queries](http://mediaqueri.es) -- [lovely ui (mobile inspiration)](http://www.lovelyui.com) -- [Awwwards (webdesign showcase)](http://www.awwwards.com) -- [FWA (interactive showcase)](http://www.thefwa.com) -- [Give n go](http://give-n-go.co/) -- [The Expressive Web](http://beta.theexpressiveweb.com/#!/welcome) - +- [ZURB Playground](https://zurb.com/playground) +- [Codrops](https://tympanus.net/codrops/) +- [CSS Deck](https://cssdeck.com/) +- [Six UX](https://sixux.com/) +- [UI Parade](https://www.uiparade.com) +- [media queries](https://mediaqueri.es) +- [lovely ui (mobile inspiration)](https://www.lovelyui.com) +- [Awwwards (webdesign showcase)](https://www.awwwards.com) +- [FWA (interactive showcase)](https://www.thefwa.com) +- [Give n go](https://give-n-go.co/) +- [Land-book - landing page design gallery](https://land-book.com/) +- [Godly - curated collection of award-worthy web design](https://godly.website/) +- [Figma Community - real design files, components, and templates shared by the community](https://www.figma.com/community) + _____________ **Favicons:** === -- [Favicon Generator](http://realfavicongenerator.net/) +- [Favicon Generator](https://realfavicongenerator.net/) - [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet) _____________ @@ -449,9 +442,8 @@ _____________ **Drag-and-Drop Solutions + Template Generators:** === - [WebFlow](https://webflow.com/) -- [Bricks](http://www.brickseditor.com/) -- [Easel](https://www.easel.io/) -- [HTML5 Up](http://html5up.net/) +- [HTML5 Up](https://html5up.net/) +- [Framer - visual website builder with code capabilities](https://www.framer.com/) _____________ @@ -460,20 +452,21 @@ _____________ **Icons:** === - [IconFinder](https://www.iconfinder.com/) -- [IconArchive](http://www.iconarchive.com/) -- [IconMonstr](http://iconmonstr.com/) -- [The Noun Project](http://thenounproject.com/) +- [IconArchive](https://www.iconarchive.com/) +- [IconMonstr](https://iconmonstr.com/) +- [The Noun Project](https://thenounproject.com/) - [IcoMoon](https://icomoon.io/) -- [Fontello](http://fontello.com/) -- [CopyPasteCharacter](http://copypastecharacter.com/) -- [FontAwesome](http://fortawesome.github.io/Font-Awesome/#) -- [Glyphicons](http://glyphicons.com/) -- [Icons Guide](http://www.iconsguide.com/) -- [Testico](http://testico.net/) -- [FlatIcons](http://flaticons.net/) -- [Flat Icon](http://www.flaticon.com/) -- [Pictos](http://pictos.cc/) -- [Symbolset](http://symbolset.com/) +- [Fontello](https://fontello.com/) +- [CopyPasteCharacter](https://copypastecharacter.com/) +- [Font Awesome](https://fontawesome.com/) +- [Glyphicons](https://glyphicons.com/) +- [Flat Icon](https://www.flaticon.com/) +- [Pictos](https://pictos.cc/) +- [Heroicons - hand-crafted SVG icons from the Tailwind CSS team](https://heroicons.com/) +- [Lucide - 1,500+ consistent, minimal icons; fork of Feather Icons](https://lucide.dev/) +- [Phosphor Icons - 9,000+ icons in 6 weights (Thin to Fill to Duotone)](https://phosphoricons.com/) +- [Tabler Icons - 5,900+ consistent SVG icons on a 24×24 grid](https://tabler.io/icons) +- [Bootstrap Icons - 2,000+ open source SVG icons](https://icons.getbootstrap.com/) _____________ @@ -481,16 +474,18 @@ _____________ **Stock Photography:** === - -- [Unsplash](https://www.unsplash.com/) -- [Compfight](http://www.compfight.com/) -- [Morgue File](http://morguefile.com/) -- [IM Creator](http://imcreator.com/free) -- [Public Domain](https://publicdomainarchive.com) -- [PicJumbo](http://picjumbo.com/) -- [Getty Images](http://gettyimages.com/) -- [Think Stock](http://thinkstockphotos.com) -- [Death to the Stock Photo](http://deathtothestockphoto.com/) +- [Unsplash](https://unsplash.com/) +- [Pexels - millions of free photos and videos](https://www.pexels.com/) +- [Pixabay - free photos, illustrations, vectors, and video](https://pixabay.com/) +- [Compfight](https://www.compfight.com/) +- [Morgue File](https://morguefile.com/) +- [IM Creator](https://imcreator.com/free) +- [Public Domain Archive](https://publicdomainarchive.com) +- [PicJumbo](https://picjumbo.com/) +- [Getty Images](https://gettyimages.com/) +- [Reshot - authentic, unstaged photography, free](https://www.reshot.com/) +- [Kaboompics - lifestyle/food photography with coordinating color palettes, free](https://kaboompics.com/) +- [StockSnap.io - new photos added weekly, no attribution required](https://stocksnap.io/) @@ -498,16 +493,16 @@ _____________ **Resources/Freebies:** === -- [Designmodo](http://designmodo.com/freebies/) -- [Despreneur](http://despreneur.com/about/) -- [Sketch App Resources](http://www.sketchappsources.com/) -- [Konigi Tools](http://konigi.com/tools/) -- [SmashingMagazine](http://www.smashingmagazine.com/tag/freebies/) -- [Freebbble - Dribbble design freebies](http://freebbble.com/) -- [365psd - free PSDs](http://365psd.com/) -- [Design Freebies](http://www.designfreebies.com/) -- [Photoshoplr](http://madebyvadim.tumblr.com/) -- [FreePik](http://www.freepik.com/) -- [Flaticon](http://flaticon.com/) -- [52 Weeks of UX](http://52weeksofux.com/) +- [Sketch App Resources](https://www.sketchappsources.com/) +- [SmashingMagazine Freebies](https://www.smashingmagazine.com/tag/freebies/) +- [Freebbble - Dribbble design freebies](https://freebbble.com/) +- [FreePik](https://www.freepik.com/) +- [Flaticon](https://flaticon.com/) +- [52 Weeks of UX](https://52weeksofux.com/) - [Hack Design](https://hackdesign.org/lessons) +- [Photoshoplr - Photoshop freebies](https://madebyvadim.tumblr.com/) +- [Figma Community - free templates, component libraries, and design files](https://www.figma.com/community) + +_____________ + +*Last audited: March 2026 — Removed 45+ dead or abandoned links (including Designer News, InVision, Pop App, Pancake.io, Adobe Edge Fonts, Codeschool, Learnable, Batman.js, SproutCore, YUI, and others). Updated 12 URLs (Adobe Kuler → Adobe Color, Google Fonts, Font Awesome, Free Programming Books, appear.in → Whereby, Firebase, etc.). Added 40+ new resources across 5 new/expanded sections: AI-Assisted Design, Design Systems & Component Libraries, Motion & Interaction Design, Variable Fonts (under Typography), and expanded Icons, Stock Photography, Color tools, and Learning.*