OCS Semantic HTML & Typography Grammar HW

Lesson: https://pages.opencodingsociety.com/sass/typography

Rule: HTML for meaning, ocs_ classes for role. No custom CSS, no inline styles, no <style> block.

Popcorn Hack (in-class) — refactor to semantic HTML

My Notes: Bad pattern was <div class="title-text"> + <p class="bold"> with custom CSS. Fixed below: one h1 + one supporting subheading + one p with ocs_lead, semantic em for emphasis.

All About Cats

Why Gentle Handling Matters

Never pull a cat's tail - gentle touches keep cats happy and calm.

Challenge

Typography Popcorn — edit the HTML below and press Run to preview it.

Lines: 1 Characters: 0
UI Output

What changed: div.title-text → h1.ocs_section-title, plain div subheading → h2.ocs_badge, p.bold → p.ocs_lead with <em> instead of visual-only bold. Deleted the <style> block entirely; the SASS theme now styles it.

Homework Hack — How to Pat a Cat refactor

What I did: Removed all 5 custom classes (.title-font, .section-font, .body-text, .very-important, .list-item) and the <style> block. Applied heading hierarchy (h2 → h3 → h4), paragraphs, one real <ol> with three <li> items, <strong> for the important line, and ocs_card + ocs_section-title theme classes.

How to Pat a Cat

Have you ever wanted to...

Pat a cat? Well good for you — we will give step by step instructions on how to pat a cat!

How to pat a cat:

  1. Put out your hand
  2. Touch the cat
  3. Move your hand back and forth

Congrats! You pat a cat :D

Challenge

Typography Homework — edit the HTML below and press Run to preview it.

Lines: 1 Characters: 0
UI Output

(My Mental Check) Validation checklist

  • %%html + UI_RUNNER present: yes
  • Custom classes / inline styles / <style> / span-emphasis: absent
  • Headings + p + ol/li: present (h2/h3/h4, 2 paragraphs, 3 list items)
  • ocs_ classes: ocs_card, ocs_section-title, ocs_badge, ocs_text, ocs_status
  • Semantic emphasis: <strong> + <em> (popcorn)