This is a repository of useful introductory coding resources. It was assembled for designers learning basic coding skills but it’s a handy reference for all kinds of evergreen coding resources. There are also some code snippets related to in-class projects that could be useful for learning from or for your own projects.
Feel free to refer to this, share it, use it in your own classes, suggest changes, etc.
www.jacobheftmann.com/teaching
- Starter HTML template:
code-snippets/project-template
- jQuery CDN or dowload and self-host
- jQuery UI
- Bindery.js – create a book out of a web page
- Blast.js – explode text strings
- MAMP
- Hashify Markdown translator
- Chrome DevTools
- Open Graph
- html shell – Base HTML generator
- Mozilla’s HTML Basics
- W3Schools HTML reference
- Mozilla HTML reference
- Responsive meta tag
- Learn to Code HTML & CSS
- Mozilla’s CSS Basics
- Type alternates
- W3Schools CSS Reference
- W3Schools @media Reference
- Common device widths
- CSS Specificity 1
- CSS Specificity 2
- Opening the Box Model
- CSS Shapes
- Complete Guide to Flexbox
- Flex sizing tests
- Learn CSS Layout
- CSS Positioning 1
- CSS Positioning 2
- A Complete Guide to Flexbox
- Flexbox in 5 minutes
- How Big Is That Flexible Box?
- Flexbox sizing demo
- Introduction to CSS Grid
- A Complete Guide to Grid
- CSS grid demo
- Grid by Example
- Relearn CSS layout: Every Layout
- Mozilla’s JS Basics
- jQuery Basics
- Learn jQuery in 15 minutes
- Array demos
- An Introduction to JavaScript
- Anthony Zukofsky
- John Caserta
- Computer Utopias (Chris Novello)
- Print Code (Rune Madsen)
- Paul Soulellis
- Very Interactive (Laurel Schwulst)
- Typography Summer School
- Mindy Seu
- Taeyoon Choi / SFPC
- Some type genres explained, Kupferschmid
- Evaluating the quality of a typeface, Kupferschmid
- Type terminology in multiple languages (crowdsourced)
- Butterick’s Practical Typography, Butterick
- Typographic terms in various languages
- Grilli Type Web Fonts Guide – by a type foundry but good general information
- OpenType features
- Upcoming changes to the CSS you need for variable fonts
- Get Started with Variable Fonts, Rutter
- How to use variable fonts in the real world
- The Web Fonts: Preloaded, Leatherman
- A Comprehensive Guide to Font Loading Strategies, Leatherman
- Educational Discounts for Fonts directory, Kupferschmid
- Google Fonts
- Typekit – Included in your Adobe CC license