Links
Overview
A collection of links, references, and footnotes for the book.
Materials from the text
- Code repository https://github.com/criticalwebdesign/book
- Wiki https://criticalwebdesign.github.io/wiki
- Index https://criticalwebdesign.github.io/index/
- Errata https://criticalwebdesign.github.io/wiki/resources/errata/
Design
Section titled “Design”Inspiration
Section titled “Inspiration”Websites to reference for design inspiration, patterns, and best practices
- Design inspiration siteinspire.com, awwwards.com and dribbble.com/shots/popular
- Design patterns uipatterns.io and ui-patterns.com/patterns
Branding
Section titled “Branding”Branding, identity, logos
- Paula Scher Great design is serious, not solemn (2008) (21:35)
- Aaron Draplin Takes On a Logo Design Challenge (16:20)
- Pro Logo Designer Rebrands The LA Clippers (18:19)
- 60-30-10 Color Rule (6:17)
- Figma file from Critical Web Design Chapter 3
- Charli Marie Figma tutorial (18:34)
- Figma How to wireframe (2019)
- Figma Tutorial: Creating Styles(6:00)
- Design an App Screen in Designlab’s Figma 101 course
- Figma Support
UX Design
Section titled “UX Design”Usability
Section titled “Usability”- Jakob Nielsen Usability 101: Introduction to Usability 2012
- digital.gov Usability
- WAVE Web Accessibility Evaluation Tools
- MDN What is accessibility?
- Dmitry Fadeyev 10 Usability Findings and Guidelines
- Jakob Nielsen Top Ten (Enduring) Mistakes in Web Design
Web Development
Section titled “Web Development”- W3 School Web Development Roadmap
- Beginner’s Roadmap to Web Development
- roadmap.sh front end and back end
- W3Schools Git Tutorial
- Codecademy Learn Git
- Github Codespaces
- Awesome GitHub Wikis
HTML CSS
Section titled “HTML CSS”- Codecademy lessons on HTML / CSS / Javascript
- W3 Schools lessons on HTML / CSS / Javascript
Javascript
Section titled “Javascript”- Codecademy Learn Intermediate JavaScript and other Javascript courses
- Marijn Haverbeke Eloquent JavaScript, 4th edition (2024)
- javascript.info The Modern JavaScript Tutorial
- youmightnotneedjquery.com
- jsonlint.com
- W3Schools JSON tutorial
Libraries
Section titled “Libraries”Bootstrap
Section titled “Bootstrap”- getbootstrap.com
- W3Schools Bootstrap 5 Tutorial
- Sam Norton Understanding Bootstrap 5 Layout
- https://get.foundation/
- https://vanillacss.com/
- https://purecss.io/
- https://pudding.cool/process/introducing-scrollama/
Visualization
Section titled “Visualization”Debugging
Section titled “Debugging”Assets
Section titled “Assets”Placeholder Text
Section titled “Placeholder Text”- https://fakerjs.dev/
- https://twinery.org/
- https://fonts.google.com/
- https://loremipsum.io/
- https://saganipsum.com/
- https://hipsum.co/
- https://cupcakeipsum.com/
- https://pirateipsum.me/
Images
Section titled “Images”- https://thenounproject.com/
- https://fontawesome.com/search?m=free&o=r
- https://patterns.helloyes.dev/
- https://commons.wikimedia.org/
- https://openverse.org/
Command Line
Section titled “Command Line”Node.js
Section titled “Node.js”Databases
Section titled “Databases”MongoDB
Section titled “MongoDB”- https://www.mongodb.com/
- https://www.mongodb.com/products/platform/atlas-database
- https://www.w3schools.com/mongodb/
- https://github.com/vercel/mongodb-starter/blob/main/lib/mongodb.ts
- https://github.com/mongodb-developer/jumpstart-series/blob/quick-demo/lib/mongodb.js
- https://github.com/mongodb-developer/nextjs-with-mongodb/blob/main/lib/mongodb.ts