Tools and Resources

HTML & CSS

HTML For People - If you're confused and don't remember how to start, or need an all around "how the heck do I do this" refresher, this is the resource for you. It mirrors a lot about what we talked about in class, and is a GREAT reference for everyone new to HTML & CSS.
All about the div - the most arbitrary and useful element for layouts
MDN HTML Reference - beware of some jargon here, but overall an amazing place to see all HTML elements at your disposal. It's a great reference on what they do and how you can use them. It is organized based on how elements are used.
MDN CSS Properties Reference - Easily lookup a CSS property, what values it accepts, and find new properties you've never seen before.
Interneting is Hard - a really great and linear tutorial on everything you need to know to make your own website! Expand on basic concepts you learned in class.
Jon Duckett's HTML & CSS Book - Somewhat outdated now, but not by much. An incredible resource to visually learn HTML & CSS basics.
30 CSS Selectors You Must Memorize - A bit more advanced, but this is the concept that makes you a CSS power user. Selectors get unruly fast, so remember: beware specificity.
caniuse - this website will tell you if the CSS property you are trying to use is supported by all web browsers. If not, it will tell you which browsers do and do not support it.
How to use image backgrounds

Advanced Topics

Positioning Elements & Scrollytelling in CSS
Display in CSS explained
Positioning elements explained
Flexbox Froggy - a game to learn alignment using flexbox CSS rules!
An Interactive Guide to CSS Grid by Josh W Comeau - CSS Grid is another new thing that you can use to create some crazy layouts.
Bloggable - a way to get blogging tools on your neocities site if you dont want to do it manually!
CSS Gradient Generator - there is so much more to CSS than just hex colors.
Learn how to block AI bots from accessing your content
Making an RSS feed for your site

Snippets

Prettier (VSCode Formatter) Settings in your settings.json

            
// ---- Prettier default settings ----
"prettier.printWidth": 120,
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.proseWrap": "never",
"prettier.bracketSameLine": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"prettier.tabWidth": 2,
"prettier.semi": true,
"prettier.arrowParens": "always",

// Optional: ensure Prettier is used as the default formatter
"editor.defaultFormatter": "esbenp.prettier-vscode",

// Optional: format on save
"editor.formatOnSave": true

Basic HTML Page Template


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PAGE TITLE HERE</title>
  </head>
  <body>
  <!-- Rest of Your HTML here -->

  </body>
</html>

Tools & Resources

HTML & CSS

Organization & File Structure

Utilities

Advanced Topics

Snippets

Prettier (VSCode Formatter) Settings in your settings.json

Basic HTML Page Template