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
andsummary
(pure html show/hide element) - HTML Entities (<, >, ...)
- FavIcon (small image shown in tab)
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!)
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
vsconst
(don't usevar
!) - 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
- Form elements (input, label, select, textarea, button, ...)
- SEO (= Search Engine Optimization, to rank higher in the google search results)
CSS
- Grid (a complete guide)
-
filter
property - CSS animations
- 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
- 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)
Accessibility
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 (I will link a tutorial written by myself once it's done!)
- Performance Optimization Basics (improve loading times)
I spend hours of my free time writing pages like these that I publish for free. If you'd like to say thanks, please share this tutorial with others and/or buy me a coffee!
If you have questions about this page feel free to contact me via my guestbook or my neocities profile. I promise I don't bite!