| Codecademy | I know, I know, bad form starting out with a paid platform. I just really like how their learning modules are set up. It splits your screen into 3, and you have one window showing your instructions, one window where you're writing code, and one window where you can see what the code is doing. I've used it so far to learn HTML and CSS, and I'm currently working on JavaScript. They have everything from Python to C# to PHP to shit I've never heard of. Highly recommend. |
| MDN Web Docs | Where would we be without Mozilla tbh? This database contains everything you'd ever need to know about HTML, CSS, JavaScript, HTTP, web APIs, and web extensions. There are tons of guides, and they also have a "play" area where you can try out code and see what it does right there on their webpage. I find it more approachable than some of the other resources that are out there. |
| Google Fonts and Adobe Fonts | Free fonts with the ability to just copy/paste the information you need to connect those fonts to your HTML document. Very handy, very easy. |
| Favicon.ico | You see how I have the little symbol in the tab on your browser look like a lesbian flag? I did it using this website. Again, very easy to use, gives you a file to unzip into your root folder for your website & some HTML to copy/paste into your <head> element. |
| Coolors | (This is an affiliate link!) An easy to use website that lets you easily make and save color palettes. It gives you the hex color codes for the colors so you can easly use them in your HTML docs (or anywhere else you're able to use hex color codes!) This website does have a contrast checker, but it's behind a paywall. Use Webaim's contrast checker instead! |
| RapidTables HTML character codes | There are some characters that, while writing your HTML document, you can't just type out or it's going to mess up your code. Most notably, the characters you use in elements: < and >. "But Max," you're saying, "you just used them." I know! But I had to do it the hard way, with a character code. Showing you the character code is also a little tricky because if you just type it out, the user agent (generally speaking, your browser) will recognize it as a code and render the symbol. ☭. See? Anyway, the codes look like some version of �, where you replace the 00 with anything between 0 and 65535, or for a select few, &abc;, where the abc is replaced with a name code. For instance, the name code for "&" is & (like "ampersand"), the name code for "<" is < (like "less than"), and the code for ">" is > (like "greater than). All of that's to say, you can go to this link and find the codes and name codes of any character you could ever want, including emojis! |
| Microsoft Visual Studio Code | This is the program I use to write code! Easy to get set up and to use in my opinion. Plus it catches stuff when I make mistakes (unlike doing this just in notepad), and it auto-closes elements when applicable! |