At a Glance

Starting from Scratch:

Alternatively, have your JS and CSS in external files:

HTML Basics

• Useful tags: header, main, footer
• <strong> vs <b> and <em> vs <i>: using strong and em are like soft-coding: browser interprets as bold and italics but can refer from region. b and i are like hard-coding: it MUST be bold/italic
• Attributes: <a href="google.com">: href is an attribute
• External Links: If linking to an external site, make sure to use https:// or http:// at the beginning of the url in the <a href="..."> or <img src="..."> to signal that it is external
• Img alt attribute: <img src="..." alt="sad cat in a box">. Always put an alt attribute on img tags for accessibility reasons. Be descriptive of the intent of the image, but don't put "an image of...". Can use empty alt if the image is just decorative or doesn't provide meaning
• Recommend <button type="button">Click Me</button> over <input type="button" value="Click Me"/>. However, make sure to explicitly declare type, otherwise it is assumed to be "submit". Also, some old browsers may not support the newer button tag and there may be security risks with the inner text
• Mobile browsers will default shrink your site to fit their screen. For a webpage designed to be responsive, include the following meta tag so the mobile browser doesn't try to load your full-size page instead: <meta name="viewport" content="width=device-width, initial-scale=1" />