General Web Development
W3Schools' How-to Page:
I don't always agree with their approach, but they do demonstrate how to achieve some common web features:
CSS
General Reference:
W3Schools has a great reference page that outlines all the selectors, combinators and pseudo classes/elements:
I think this MDN page explains the different combinators a little more clearly:
CSS-Tricks' Flexbox Guide:
CSS Tricks has a great Flexbox guide that includes some visuals:
CSS-Tricks' CSS Grid Guide:
CSS Tricks also has a great CSS Grid guide that includes some visuals:
Javascript
MDN's Re-introduction to JS:
A great refresher on the Javascript programming language. I'd say it's even a great starting point for someone looking to learn the Javascript programming language:
Closures:
An advanced topic in Javascript that boils down to functions (which are objects in JS) returning other functions that, among other things, can give access to the local variables declared in the encapsulating function. It's a concept that draws parallels to private fields/methods in other object-oriented programming languages (e.g. getters/setters for private fields in Java). MDN's page on closures explains it pretty well:
React
FreeCodeCamp's React Course for Beginners
This is an excellent introductory course put together by Bob Ziroll that covers everything you need to know to get started with React. This is where I'd recommend starting if you're interested in learning React:
React Docs
Once you're through the tutorials, the 'Advanced Guides' section of React's documentation is great for diving into some more advanced topics:
Accessibility
Designing and building accessible web applications is a difficult task, but I do try to maintain a certain level of accessibility in my designs. By incorporating a few relatively simple additions to your code, you can go a long way in making your site that much more accessible.
The tabindex HTML Attribute
Typically, only HTML elements with which people can interact are focus-able (links, form inputs, etc.), which means, ordinarily, only those HTML elements can have the :focus pseudo class applied. However, if you add the tabindex attribute to an HTML element, it becomes focus-able, which means you can style it appropriately when users focus on it (e.g. by adding a custom outline property). It can also make it a little easier to traverse your pages without using a mouse (by tabbing).
MDN's page that covers this attribute explains it pretty well:
ARIA in HTML
The ARIA attributes are useful in making your pages more screen-reader-friendly. I like to use the aria-haspopup and aria-expanded attributes for hidden/expandable content. I also like to use the aria-label attribute to control how screen readers orate certain content that may make sense visually, but may make less sense when spoken aloud.
You can find all the ARIA attributes documented on W3.org's site here:
W3.org also offers some great tutorials around how to make critical web features and components more accessible. You can find that here: