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 (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.
- StackOverflow - coding questions
- UX Stack Exchange - UX questions
- Graphic Design Stack Exchange - visual design questions
- MDN - Mozilla Developer Network (for good documentation)
- Creative Commons - license-free image search
- Hacker News - startup culture/news/trends
- Designer News - design culture/news/trends
- Product Hunt - startup culture/news/trends
- Sidebar - design culture/news/trends
- Dribbble - design culture/trends
- Behance - design culture/trends
- /r/web_design
- Responsive Patterns
- Responsive PX
- Lettering.js - responsive typography
- Fluid images
- Fluid 960 grid
- Gridless
- PX to EM
- Media Queries Patterns Library
- Responsive Web Design, Most Complete Guide
- This Is Responsive - Patterns Library
- Ink - create responsive interfaces
- Responsinator
- 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
- Code Guide - standards for flexible, durable HTML/CSS
- How to keep up to date on front-end technologies
- Front-End Frameworks:
- Javascript Frameworks:
- Semantic UI - semantics for sharing
- Scratchpad
- Firepad
- Snaggy
- Bounce
- DropCanvas
- WeTransfer
- SquadEdit
- CodePen
- JSFiddle
- Editr
- Snipt
- Chop
- Screencast-o-matic
- Beam It
- Copybar
- JS Bin
- Dablet
- Floobits
- Stypi
- Paste
- LiveWeave
- VolaFile
- Talky
- ShareFest
- Appear
- CoderPad
- Criticue - peer review websites
- RedPen
- CloudCannon - free static hosting
- Pancake - free static hosting
- Site44 - static hosting
- Meteor - JavaScript app framework
- Firebase - JavaScript app framework
- Forge
- Huge List of Front-End Dev Bookmarks
- 1434 Best Resources for Designers & Developers
- Introduction to CSS3 transitions (article)
- Bounce.js - Tool to create CSS3 animations
- WOW - CSS3 animation library
- CSS Palette
- CSS3 Generator
- [CSS3] (http://css3.mikeplate.com/)
- CSS Gradient Generator
- CSS Button Generator
- LoremPixel - placeholder images
- Lipsum - placeholder text
- WordMark
- LayerStyle
- Border Image Generator
- iCheck - super customized checkboxes and radio buttons for jQuery
- SVGeneration
- Grumpicon - create fallback PNGs for SVG files
- CSS3 Animation Cheat Sheet
- Animate CSS - CSS3 library
- Pure - small, responsive CSS modules
- Tridiv - 3D CSS
- ToDoMVC - JavaScript resource
- SuperheroJS - JS library
- Unheap - jQuery plugins
- Random User Generator
- UI Faces
- UI Names
- WhatTheme
- IE Browser Testing
- Article on Front-End and UI Style Guides
- Subtle Patterns - visual pattern
- First Time UX - showcase of new user experiences
- UI Interaction Library
- Subjective-C - innovative iOS interfaces UI Cloud - largest user interface design database in the world
- Android Patterns
- Android UI Patterns
- Android niceties
- Android App Patterns
- Mobile Design Gallery
- UX Archive
- Pttrns
- Mobile-Patterns
- Inspired-UI
- Capptivate
- Android Design guidelines
- Apple Design guidelines
- Android tools:
- iOS tools:
- PlaceIt - real-life image templates to insert mobile screens
- Web dev (HTML, CSS, JS). JS frameworks:
- Xcode --> Origami for XCode --> IDEO's Avocado for Origami
- Adobe After Effects
- Drag-and-drop tools:
- Choosing the Right Font: A Practical Guide to Typography on the Web
- Butterick's Practical Typography - best guide online (read 'Summary of key rules')
- Instacalc - EM to PX calculator
- TypeScale
- The Elements of Typographic Style Applied to the Web
- Thinking with Type
- WhatTheFont
- MyFonts - bestsellers (trending fonts)
- Typewolf - font recommendations
- Type Finder - find reputable typefaces
- Online font services:
- Color Template
- Paletton
- Kuler - color wheel
- Colour Lovers - color trends
- ColorHexa - color encyclopedia
- BrandColors
- All API Cheat Sheets
- jQuery Quick API Reference
- Article of 100 Terrific Dev Tools
- Learn Layout - simple, visual way to learn HTML/CSS layout design
- HTML Markup Validation (W3)
- HTML Tidy
- CSS Validation (W3)
- Clean CSS
- CSS Compressor
- Procssor - organize your CSS
- JavaScript Compressor
- Email Design:
- HTML forms:
- Treehouse
- Codeschool
- Learnable
- Udacity
- Freecodecamp
- Lynda
- Codecademy - free
- Skillfeed
- SitePoint
- Gibbon
- Free Programming Books - huge list
- CSS Tricks
- CodePlayer
- Design Tutsplus + Code Tutsplus
- Pineapple.io - central hub of tutorials
- Photoshop Secrets
- Scotch
- Little Big Details
- Design Principles FTW
- Medium - Design/UX
- Code Visually
- DesignInstruct
- Bento
- Cody
- ZURB Quips
- ZURB Playground
- CoDrops
- CSS Deck
- UIBox - curated HTML/CSS/JS components library
- Six UX
- UI Parade
- media queries
- lovely ui (mobile inspiration)
- Awwwards (webdesign showcase)
- FWA (interactive showcase)
- Give n go
- The Expressive Web
- IconFinder
- IconArchive
- IconMonstr
- The Noun Project
- IcoMoon
- Fontello
- CopyPasteCharacter
- FontAwesome
- Glyphicons
- Icons Guide
- Testico
- FlatIcons
- Flat Icon
- Pictos
- Symbolset
- Unsplash
- Compfight
- Morgue File
- IM Creator
- Public Domain
- PicJumbo
- Getty Images
- Think Stock
- Death to the Stock Photo