Today we’re taking a break from new material and reviewing the HTML and CSS concepts we’ve covered so far. We’ll be doing this by making a single-page site with design based on an AI-generated image, produced from your choices for the following prompts:

  • person (ideally dead and famous for best AI results)
  • place
  • thing/object
  • action
  • art/design style

The featured image for this post is Kublai Khan (person) playing (action) a nintendo switch (object) on the NYC subway (place) as a woodblock print (art/design style), to give you an idea of how it’ll work.

HTML Tags/Elements Reviewed:

  • <main>
  • <figure> and <figcaption>
  • <img>
  • <h1>
  • <ul> and <li>
  • <p>

CSS Properties/Concepts Reviewed:

  • CSS reset
  • margin and padding
  • units (px and %)
  • width, min-width and max-width
  • designing and implementing color schemes
  • CSS typography
  • custom fonts (via Google Fonts)

Technical Concepts Reviewed:

  • directory and file management
  • uploading via cPanel
  • screenshots and posting to OpenLab