Useful HTML Tags SEO Headers 3x3 Grid Box Model Font Sizes Positioning

HTML + CSS + JavaScript self assessment

10 most useful HTML tags

  1. div
  2. section
  3. a
  4. p
  5. h1
  6. ul
  7. li
  8. button
  9. ol
  10. img

Important headers for SEO

Sources: siteground.com, searchenginejournal.com

3x3 without table or CSS

Just divs and spans

Box Model Gallery

Rows show which property changes; columns show 0px, 5px, 10px.

Property \ Value
0px
5px
10px
Margin
Content
Content
Content
Padding
Content
Content
Content
Border
Content
Content
Content

CSS: Itemized List with 6 Font Sizes

Same sentence, each with inline font-size using a mix of absolute and relative units. Each item explains when to use that unit.

  • The quick brown fox jumps over the lazy dog — px: precise control for tiny UI elements (e.g., 12px badge counter).
  • The quick brown fox jumps over the lazy dog — pt: print-focused sizing (e.g., 14pt body text in print stylesheet).
  • The quick brown fox jumps over the lazy dog — em: scales with parent; great inside components (e.g., button text 1.5em of card text).
  • The quick brown fox jumps over the lazy dog — rem: scales with root; ideal for global headings that respect user zoom.
  • The quick brown fox jumps over the lazy dog — %: small relative tweaks (e.g., subheading at 120% of body text).
  • The quick brown fox jumps over the lazy dog — vw: responsive hero text (e.g., hero title sized by viewport width).

CSS: Creative Positioning (4 options)

Sticky: sticks to the viewport edge once reached (e.g., a section header that stays visible while this section scrolls).
Relative: offset without leaving flow (e.g., nudge an icon by 10px).
Absolute: pinned to the nearest positioned ancestor (e.g., a corner badge on a card).

Relative: Use for small, contextual nudges or to create a positioning context for absolute children.

Absolute: Use for overlays and corner pins within a card/container. The container should be positioned (e.g., the dashed stage).

Sticky: Great for in-page subheaders or CTA bars that should stick while the user scrolls through a section.

Fixed: Use for global UI that must always be visible (e.g., footer or a help button). This page’s footer is fixed to the bottom of the screen.