HTML and CSS Notes

These are my own notes from the HTML and CSS portion of the Odin Project curriculum. This is just a place for me to put them so I can refer back.  I may edit this entry.

W3C HTML validator

W3C CSS validator

Note firefox also provides some useful hints in the console.

Advanced CSS selectors

CSS resets and the reasoning behind them

And for cheating, CSS generators

Headings – h1 and so forth – are used by search engines

html5 uses semantic tags to divide up the page.  It is important to use semantically meaningful tags, not just divs to separate different page elements.

Good practices for managing html syntax:

  • use lowercase letters within element names, attributes, and values
  • indent nested elements
  • use double quotes, not single
  • remove the forward slash at the end of br and other self closing elements
  • Omit the values on boolean attributes
  • Use practical ID and Class values – values should relate the content, not the attribute of the content.  EG, don’t use “red” for red text because if the style changes you will need to change the class and ID names as well.
  • Use alternative text on images
  • class names shoudl be all lowercase and use hyphens, not snake case or camel case
  • use hexadecimal for colors, and always use lowercase

And a useful guide to best practices and some good links here.

Finally, wfthtmlcss!

Leave a Reply

Your email address will not be published. Required fields are marked *