Handy dandy table of contents:
- Accessibility
- Blogs
- Books
- Branding & Logo Design
- Copywriting
- CSS
- Visual Design
- Git + Github + Terminal
- HTML
- Email Newsletters
- Freelancing
- Front-End Development
- Javascript
- Job Resources
- Podcasts
- Portfolio Resources
- Research & Testing
- Student Work Examples
- Troubleshooting
- Typography
- UX Design
- Videos
- Wireframing
- WordPress
- Other
Accessibility
- Dos and don'ts on designing for accessibility
- The A11Y Project - A community-driven effort to make web accessibility easier.
- Web Accessibility Evaluation Tool
Blogs
- Frontend Masters Blog (Boost)
- Smashing Magazine
- CSS Tricks - All things web design and development
- 52 Weeks of UX - A discourse on the process of designing for real people
Branding/Logo Design
Resources to help you with the logo design & branding checkpoint.
- Micai Logo Design Process work
- How to price a logo design (explains logo design process)
- The Ultimate List of The Best Logo Design Resources (link list post)
- Logo Design Strategies
- Aaron Draplin Takes On a Logo Design Challenge
Visual Design
Resources to help you with design research for your logo designs, and projects.
- Squint Test
- Land Book - Gallery of landing pages
- Logopond - Logo, Brand & Identity Inspiration
- Dribbble is where designers get inspired and hired.
- Awwwards - The awards of design, creativity and innovation on the internet
- User Interface Patterns
- Landbook - the finest hand-picked website inspirations
- A comprehensive guide to design systems
- Jessica Hische talks about her process and craft as an illustrator and type designer
Troubleshooting
Stuck on a html/css/js/coding issue? These are resources that will help you learn how to use the web inspector and troubleshoot problems.
- How to be great at asking coding questions
- Stack Overflow - A community of 7.0 million programmers, just like you, helping each other.
- Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts.
- UX Stack Exchange is a question and answer site for user experience researchers and experts.
- Chrome DevTools
- Webkit Inspector Tutorial
- Get Started with Debugging JavaScript in Chrome DevTools
- DevTools Tips
Git + Github + Terminal
Resources to help you get up to speed with Git and Github.
- The Front-End Developer's Guide to the Terminal
- Command line crash course
- Git Gud - video playlist of foundational git concepts
- 📹 Starting a new git repo from Github.com
- Github Desktop App
- What is Github (video)
- Learn Git
- Try Git
- Git commands to know
- Which characters are illegal within a branch name?
- How to resolve merge conflicts from the command line?
- Command Line Crash Course
- Oh shit, git! - solutions to common problems in git
- .DS_Store problems
- Learn Enough Command Line to Be Dangerous
Books
Remember those printed things you can hold in your hand and read? These are books that I personally own and have read.
- Design Systems by Alla Kholmatova
- HTML and CSS Book
- Javascript & jQuery Book
- Design is a Job
- Don't Make Me Think - A Common Sense Approach to Web Usability by Steve Krug
- Rocket Surgery Made Easy - The Do-It-Yourself Guide to Finding and Fixing Usability Problems by Steve Krug
- Design is a Job by Mike Monteiro
- Just Enough Research by Erika Hall
- Design Systems Handbook
Newsletters
I'm not a huge fan of getting more email, but these are the few email newsletters I'm currently subscribed to.
- (Chrome DevTools) Dev Tips - A developer tip, in the form of a gif, in your inbox each week
- Sidebar.io - 5 design related links every day
Design Tools
A list of handy resources to help you get better at using photoshop, sketch, and other design tools.
- Facebook Design Devices: Images and Sketch files of popular devices
- Sketch Viewer
- Mural - Remote Design, Online brainstorming, synthesis and collaboration
- Photoshop Etiquette
- Photoshop User Guide
- Marvel - Simple design, prototyping and collaboration
- Archetype App - Digital Typography Tool
- The Bezier Game (a game to help you master the pen tool)
- Facebook.design devices - Images and Sketch files of popular devices.
- Figma for Beginners
Front-end Development
Javascript
- {JSON} Placeholder - Free fake and reliable API for testing and prototyping
- Event bubbling
- Event Delegation
- Mastering DOM manipulation with vanilla JavaScript
- Pratical Javascript - build a todo app
- Get Started with Debugging JavaScript in Chrome DevTools
- A Re-introduction to Javascript
- Debugger
- Beyond Console Debugging Tricks
- Wes Bos - es6 for everyone (transcribed video text)
- Modern JavaScript Cheatsheet
- childNodes, firstChild, and nodeValue - oh my!
- Dot Notation vs. Bracket Notation
CSS
- Grid Critters CSS Game
- Visual Cheatsheet: CSS Grid Layout
- Visual Cheatsheet: Flexbox
- Calculating flex-basis for items when the parent flex item uses gap
- Defensive CSS - Practical CSS and design tips that helps in building future-proof user interfaces.
- Web.dev Learn CSS course
- CSS Basics
- CSS Grid Garden - Grid Garden - A game for learning CSS grid layout
- Learn CSS Layout - This site teaches the CSS fundamentals that are used in any website's layout.
- All about floats
- How CSS pseudo-classes work, explained with code and lots of diagrams
- How Flexbox works — explained with big, colorful, animated gifs
- CSS Specificity & Inheritance
- Grid By Example - Everything you need to learn CSS Grid Layout
- Flexbox Froggy - A game to help you learn flexbox properties
- What the flexbox - A simple, free 20 video course that will help you master CSS Flexbox!
HTML
Portfolio
A list of resources to help you design your portfolio and a list of Bloc student portfolios
- Devooged.com
- jovanlaurencio.github.io/
- christinarichardson.ca
- franceslee.io
- andreahinkle.com
- zoeene.design
- iamsamhankins.com
Typography
- Pratical Typography
- Google Web Fonts in Action
- The Elements of Typographic Style Applied to the Web
- The No-Nonsense Guide to Font Pairing
Student Work Examples
A list of student projects from code/ux bootcamps.
Copywriting
Job Resources
Freelancing
Podcasts
- The CSS Podcast
- User Defenders - Inspiring Interviews with UX Superheroes
- Pagebreak Podcast - A book review podcast for designers, freelancers, and other nerds
- ShopTalk: A Web Design and Development Podcast with Chris Coyier and Dave Rupert
- Hacking UI Podcast
- UX Podcast
- Developing Up Podcast - A podcast focused on the non-technical side of being a developer, because your career is about more than the code you write.
- Syntax - A Tasty Treats Podcast for Web Developers.
- Design Better Podcast
- Code Newbie Podcast
Workflow
UX Design
User experience design resources
- Chatting about UX failures — Facebook Messenger
- Pattern Tap - a collection of design patterns
- UI-patterns.com - User Interface Design patterns
- A guide to paper prototyping & testing for web interfaces
- The 9 States of UI Design
- Best UX practices for site search design
- Why is Online Checkout So Difficult?!
Wireframing
- Wirify - turn any site into a wireframe
- Sneakpeekit - Printaable grids for design wireframing
- Responsive Sketch Sheets
- Wireframe Examples from UX Designers
Research + Testing
- Iterate - Simple, beautiful surveys
- Helio - a suite of testing tools to gather user feedback
- Fivesecondtest.com - Five second usability tests.
- Vischeck - simulates colorblind vision
- Contrast Checker
- Funkify is a brand new plugin for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities.
- /r/SampleSize - a subreddit for surveys