Self-Study Coding Checklist

It's not the easiest thing to teach yourself how to code, and those who do often miss certain topics and then struggle for years not understanding why. That's the reason I created this checklist. You can go through and check which topics you're already familiar with and see which one's you still need to learn or work on. I hope it helps you on your self-taught journey!

The checklist is not a complete list of every topic you should be familiar with. Rather, it's a collection of those topics that I think you might have missed while teaching yourself how to code.

The state of the checkmarks is saved as cookies in your browser.

Beginner Checklist

HTML

• HTML5 Semantic Elements (main, aside, nav, article, header, footer, strong vs b, em vs i)
• Elements details and summary (pure html show/hide element)
• HTML Entities (<, >, &, ...)
• FavIcon (small image shown in tab)
• Anchor links (jump to a section of a page)

CSS

• currentColor
• em font sizes (relative font sizes instead of px)
• Flexbox (a complete guide)
• Vertical centering (i highly recommend using flexbox)
• transform property
• Positioning elements (position property)
• How z-index behaves (not really how you expect!)
• ::selection (styling selected text)
• pointer-events: none (making the cursor ignore elements)

JavaScript

(I'm assuming you already know about variables, arrays, ifs, functions, etc. If you don't you should follow a beginner's JavaScript tutorial.)

• Variable scope
• let vs const (don't use var!)
• Converting strings to numbers
• querySelector() (search for element on page)
• .forEach (to loop over elements)
• Event Listeners (e.g. click)
• DOMContentLoaded event (You should use this all the time!)
• Don't use jQuery (if you are already using jQuery, visit youmightnotneedjquery.com)

Accessibility

• Color contrast
• alt attribute (every image needs one!)
• aria-hidden attribute (for screen readers)

Misc.

• Very basic code quality (coding standards)

Intermediate Checklist

HTML

• loading="lazy" (lazy loading images and iframes)
• Form elements (input, label, select, textarea, button, ...)
• SEO (= Search Engine Optimization, to rank higher in the google search results)
• Data Attributes (e.g. data-example="...")

CSS

• Grid (a complete guide)
• filter property
• CSS animations
• CSS attr()
• BEM (Block-Element-Modifier) (naming convention)
• Responsiveness (media queries)
• prefers-color-scheme (for dark mode)
• Browser compatibility (vendor prefixes) (not necessary if you use SCSS)
• CSS Variables (not necessary if you use SCSS)

SCSS

• SCSS Beginner's Guide
• SCSS Variables
• SCSS Mixins
• SCSS vs 'Sass' (for understanding only)

JavaScript

• Debouncing event calls (e.g. window.onscroll)
• Template literals (`...` and ${...})
• Arrow functions (a, b) => a + b
• RegEx (Regular Expressions) Also check out regexr.com!
• LocalStorage (basically cookies)
• using fetch (to read/load files such as .html and .json)
• using MutationObserver (watch for changes in the DOM tree)

Accessibility

• prefers-reduced-motion
• Keyboard navigation
• Skip-to-content links

Misc.

• IDEs (Those are the programs you can code in, such as VSCode)
• Git (version management) (My own tutorial!)
• Node.js / npm (Package manager) (My own tutorial!)
• Static Site Generators (e.g. Eleventy) (My own tutorial!)
• Webpack (My own tutorial!)
• Performance Optimization Basics (improve loading times)