/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!

The Odin Project – The ultimate web development online course. It’s free and extensive. Teaches the basics of the basics. Highly recommend!
- 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 – 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

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

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 – Quick setup to automatically deploy your changes to Neocities using a GitHub workflow
Gitmoji - emoji guide for commit messages (just for fun!)

The CSS Cascade – 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 – 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 – 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

Solaria’s Web Accessibility Guide
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 - 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

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

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 – 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