OK, this one is probably on most people's lists. I truly refer to this every single time I'm building up a webpage, whether to remind me what HTML tags I should be using or which property values are actually valid for the CSS property I'm using. It's a treasure trove of information (and it has a dark mode display option!).
According to the link itself, "This list is to help guide and help those who are in every stage of their web-building journey on the personal web. This list is not meant to overwhelm you, but rather give you options and find tools, graphics, utilities, codes, and everything in between to help get you creating more on the independent web."
What can I say, this is truly just a really solid reference/cheat sheet for CSS syntax. It includes code generators for things like a CSS gradient background, formatting the placement of an image, box shadow generators, etc. It's truly a one-stop-shop that I actually forgot about until I startede remaking this list. It even comes with instructions on how to use it (via YouTube as well as at the bottom of the page).
OK, I added this to my list originally with the very ambitious thought that I might want to get into Frontend development as a career. I don't know if I really have any interest in that, but maybe someone reading this will. I don't know how accurate this is to the real world as I haven't tried to actually follow it.
Interactive game that teaches you how to work with CSS flexbox. This was also an invaluable resource to me when I was first starting out. I had such a hard time conceptualizing flexbox at first.
Another incredibly useful tool for Flexbox displays, I still reference this often. According to the site, "Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart."
I have used this as a starting point for a couple page layouts and now often use it to reference specific CSS stylings like setting a minmax for width and centering divs. It's honestly so simple, it feels illegal. I love it so much, I saved my follow-along files so that I have them in case this site ever goes down.
I found this HTML basic structure tempalte (boiler plate) that this person uses, where they explain the basic structure of their HTML documents and how/why he uses each. I don't follow their boiler plate directly but I have adopted the concept, where I try to name all of my elements with similar logic and include the same meta info (although tbh I forgot about this when I was coming back to this after my 2024-hiatus.
In the beginning of me making webpages, I used this site a lot for color palette ideas. I've started to veer away from it a little bit, as I now tend to pull color palettes from an image I'm using on the page instead of starting with a color palette. Regardless, I still think it can be useful!
I know W3schools is already on this list; this link is regarding their Google Fonts page specifically. I use this to copy/paste Google custom fonts' stylesheet in my css styling. I don't know why I have just never been able to get the syntax for importing custom fonts right on my own, but it is what it is.
You can enter your (or any) webpage link into this site to receive an acessibility score. This evaluates things like missing alternative text, low contrast errors that may make the site difficult to read, and structural elements.
"Web accessibility evaluation tools are software programs or online services that help you determine if web content meets accessibility guidelines. This page provides a list of such tools." I actually only found this website while writing this so I haven't used it yet at all, but it looks promising.
This is a great resource for making sure your utilization of colors is still readable. I like this resource because I can start with a color that I know I want and use it to build color palettes that will be readable. (No highlighter yellow text on a highligher pink background or two colors that are too close to one another to be easily distinguished, for example). After entering a starter color, it will generate various possible color palettes, which you can download. According to the website, "The color pairings follow WCAG 2.1 AA based on a contrast ratio of 4.5:1. The pairings have sufficient contrast for use with normal text, large text and graphics."
This resource works the same way as Venngage's color palette generator in that, you enter a hex color code for the website to generate a suggested color pairings. A difference between this and Venngage's color palette generator is that ColorSafe's also includes a lot of colors that are similar/in the same family as your original color. You can also select the WCAG Standard (AA or AAA), font-size, and font-weight to display the sample text in. The sample text does update when you select a color square.
According to Wikipedia, "Unsplash is a website dedicated to proprietary stock photography. Since 2021, it has been owned by Getty Images. The website claims over 330,000 contributing photographers and generates more than 13 billion photo impressions per month on their growing library of over 5 million photos." I get most of my background images from here.
According to Pexels' about page, "Pexels provides high quality and completely free stock photos licensed under the Pexels license. All photos are nicely tagged, searchable and also easy to discover through our discover pages." I use this as my secondary background images site
I've been getting a lot of my smaller elements from Tumblr recently. I search for things like 'transparent background png' or '[adjective/noun] png' and reblog what I plan on using. I don't use everything I reblog, but I do try to add the image credits (I am admittedly not perfect about this).
Finding CSS pattern generators has been a game changer for me because recently I've found myself gravitating towards patterns (or solid colors) for my backgrounds instead of images, which were most of my starting pages' backgrounds. I like that this generates a code that CSS recognizes and that I don't have to take up extra space by storing a background image or risk an online image reference going offline.
Favicons are the little images you sometimes see next to page titles (in the tab itself). I don't always add Favicons to my pages (because I forget) but they're a nice little detail to add on that can strengthen your page's identity (in my opinion, not to get too corporate-speak).
Similar to how colors have hex codes (and RGB codes, etc...) that you enter to customize an element's color, there are unicodes you can enter, which webpages (should?) read as instructions to display a symbol not typically found on thej keyboard. For example "& # x 2 1 9 C ;" without any spaces will display as ↜. There are other reference lists for these, but I use W3Schools for so much, that I might as well stick with them for this.