web dev

documentation

• MDN Web Docs – docs for HTML/CSS/JavaScript. I keep coming back to this because it has great examples to follow–along.
• DevDocs – API docs for just about any language/framework/etc. It has a search function so you can search through all of the docs, and you can also download it offline.
• 11ty – Docs for the static site generator I used to build this website. There’s a tutorial below on how to create your site with 11ty!

tutorials

• The Odin Project recommended – The ultimate web development online course. It’s free and extensive. Teaches the basics of the basics.
  • The biggest hurdle here is that it asks you to dual–boot Linux if you’re on Windows. You can install WSL instead, but it’s not officially supported by the Project’s community.
• Interneting is Hard - web development tutorials with visual aids for the visual learner and interactive examples for the hands-on learner
• Web Design in 4 minutes - an interactive, step-by-step guide on making your own web page in 4 minutes
• Create a static site using 11ty and deploy to neocities recommended – The holy grail tutorial that helped me so I never have to use <iframe>s for navigation menus, and now you don’t have to, too.
  • Whiona’s 11ty Neocities workflow - Whiona also has a great writeup that may be easier to follow for beginners/non-coders
• The Modern JavaScript Tutorial – Great for both beginners and advanced users, though some of it may be too advanced.
• A Complete Guide to Dark Mode on the Web – CSS Tricks tutorial on implementing dark mode on your website
  • Simple dark mode with CSS variables – A quick and easy tutorial on implementing dark mode if you don’t have time for the fundamentals
  • Bonus: Theme Toggles - free SVG animated theme toggle icons
• Responsive Images - a tutorial on making your images responsive

git

If you write code, you must use version control of some kind. Git is the most common one, but there are others as well.

note Git is not the same thing as GitHub. Git is the version control system, while GitHub is where you may remotely host your repository. There are other options, like GitLab or Codeberg. Using GitHub/GitLab/Codeberg is completely optional but recommended.

• git - the simple guide - a simple reference guide to get started with git
• Git Tutorial from W3 Schools – I haven’t personally used this tutorial, but it might be helpful if you have no idea what Git version control is.
• Learn Git Branching – Interactive tutorial for Git branching. Fun to use, but not for you if you don’t already have initial knowledge about Git.
• Git commit message conventions – a blog post on writing better commit messages
  • Atomic commits – a blog post on keeping commits related to one change only, a.k.a. atomic
• deploy-to-neocities recommended – Quick setup to automatically deploy your changes to Neocities using a GitHub workflow
• Gitmoji - emoji guide for commit messages (just for fun!)

css

• The CSS Cascade recommended – Learn about the cascade of CSS, i.e., why you don’t need to use !important to make your CSS work
• Vanilla CSS - a minimal class-less baseline stylesheet
• Specialized CSS frameworks – Cool CSS stylesheets/libraries! Some of these emulate interfaces (Windows 98, XP, 7, BIOS / MS–DOS, NES, etc.)
  • Personal pick: Tufte CSS
• Common Layouts using CSS Grid recommended – MDN Docs takes you step by step on how to build some common website layouts using CSS Grid
• CSS Layout collection – Pre–made CSS layouts for common web components
• Responsive Templates (w3.css) – Free responsive CSS templates from ol’ reliable W3 Schools
• A Complete Guide to Flexbox - CSS Tricks’ comprehensive guide to Flexbox layout
• Flexbox Tutorial - tutorial on flexbox from Interneting is Hard
• Codrops Playground recommended – Demos of some cool web designs and animations
• SmolCSS – minimal snippets for modern CSS layouts and components
• Modern CSS Solutions for Old CSS Problems
• Useful :nth-child Recipes
• aspect-ratio - Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
• An Interactive Guide to Flexbox
• An Interactive Guide to CSS Grid
• CSS Loaders - CSS-only loading animations
• A (more) moden CSS reset
• broider - a collection of CSS border image art
• Fluid Responsive Design recommended - CSS tools to make your font sizes and spacing responsive with minimal use of media queries

html

• &what; - HTML entities unicode characters
• URL encoder for SVG
• Broken Link Checker - scans your website for any dead links
• LDRDS - free open-source loaders and spinners, built with web components

javascript

• Animate on scroll
• Plyr - a simple, accessible and customisable media player

accessibility

• Solaria’s Web Accessibility Guide recommended
• A Field Guide to Accessibility
• WAVE Web Accessibility Tool – This scans your website for any accessibility problems and how to fix them
• WebAIM’s Contrast Checker - Check your text/background colour contrast
• Colour Contrast Checker recommended - a more visual tool to checking colour contrast
• Randoma11y – Generate accessible colour schemes
• caniuse.com – Check browser compatibility for HTML/CSS/JS features
• whocanuse.com – caniuse but for accessible colours
• HTML5 Please - Check browser compatibility for HTML5, CSS3, etc features

typography

• Go Mono - typeface designed for the Go programming language
• Bunny Fonts - faster & GPDR friendly fonts, good alternative to Google Fonts
• Redaction recommended - free serif typeface inspired by The Redaction
• Commit Mono recommended - neat customizable monospace font
• JuliaMono Typeface recommended - free monospace font
• Comic Mono - free monospace font based on Comic Sans (but legible)
• UNCUT.wtf - a collection of free fonts
• Asterism Fonts - a collection of cute Japanese fonts
• Old School PC Font Resource
  • Personal pick: Cordata PPC-400
• Velvetyne recommended - free and open source fonts
• Cava’s Pixel Resources - video game pixel fonts
• Pixel Font Gallery - pixel fonts created from bitfontmaker2
• CSS Font Stack - a collection of web safe font stacks
• Junicode recommended - free old-style serif typeface

code editors

• VS Code – free open source IDE with lots of useful extensions
• VSCodium – a community–driven, free–licensed distribution of VS Code for the Microsoft haters
• neovim – hyperextensible vim–based text editor

best practices

These aren’t exclusive to web development in particular, and it might have terms you are not familiar with, but they are still worth a read:

• Coding Without Comments – Short blog post about writing code that doesn’t need comments to be readable
• SOLID Principles – These are more for object–oriented systems, but really, the most important here (imo) is the Single Responsibility Principle. If you don’t have time or can’t understand anything, read just that principle.
  • SOLID Principles in JavaScript archive.org – What SOLID looks like in JavaScript, with examples
  • Related: Separation of concerns
• Summary of ‘Clean Code’ by Robert C. Martin – Bullet–point summary on writing and maintaining clean code