Semantic HTML & OCS Typography Grammar Homework

Refactor the bad code so it uses semantic HTML for meaning and ocs_ classes for roles, with no custom styling.

Submission safety rules

  • Submit only your final semantic HTML for each hack
  • No custom CSS, inline styles, <style> blocks, or extra classes. Use only the provided ocs_ classes
  • Keep %%html and the UI_RUNNER comment line in the cell
  • Allowed tags: h1-h4, p, ul/ol/li, strong, em, div

Homework Hack: How to Pat a Cat

Refactor the code block:

  • Remove all custom CSS and classes
  • Use correct headings (h2-h4) and keep descriptive text in p tags
  • Turn the three fake numbered lines into one real ol with three li items
  • Turn the visual-only emphasis (very-important span) into <strong>
  • Apply OCS classes such as ocs_card and ocs_section-title

Popcorn Hack: Why Cats Purr

Description: Refactor the starter code so it uses semantic HTML and OCS classes instead of custom CSS. Semantic tags say what each piece of text is, and the ocs_ classes give it a role in the SASS theme.

Task:

  • Replace the non-semantic div and span elements with semantic tags
  • Remove the custom <style> block
  • Apply at least one OCS class (like ocs_lead)

Expected result: one heading, one supporting heading, and one paragraph using OCS grammar.

Code Runner Challenge

Typography Popcorn Hack - Why Cats Purr

View IPYNB Source 
%%js

// CODE_RUNNER: Typography Popcorn Hack - Why Cats Purr

// Clear the output
outputElement.innerHTML = "";

// Semantic tags for structure, OCS classes for the role, no custom CSS
outputElement.innerHTML = [
  '<h2 class="ocs_section-title">Why Cats Purr</h2>',
  '<h3 class="ocs_lead">A Sign of Happiness</h3>',
  '<p class="ocs_text">Cats usually purr when they feel safe, cozy, and ready for a nap.</p>'
].join("");
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Code Runner Challenge

Typography Homework - How to Pat a Cat

View IPYNB Source 
%%js

// CODE_RUNNER: Typography Homework - How to Pat a Cat

outputElement.innerHTML = "";
outputElement.innerHTML = [
  '<h2 class="ocs_section-title">Why Cats Purr</h2>',
  '<h3 class="ocs_lead">A Sign of Happiness</h3>',
  '<p class="ocs_text">Cats usually purr when they feel safe, cozy, and ready for a nap.</p>',
  '<div class="ocs_card">',
  '  <h2 class="ocs_section-title">How to Pat a Cat</h2>',
  '  <h3 class="ocs_lead">Have you ever wanted to...</h3>',
  '  <p class="ocs_description">pat a cat? Well good for you we will give step by step instructions on how to pat a cat!</p>',
  '  <p class="ocs_text"><strong>How to pat a cat:</strong></p>',
  '  <ol>',
  '    <li>put out your hand</li>',
  '    <li>touch the cat</li>',
  '    <li>move your hand back and forth</li>',
  '  </ol>',
  '  <h3 class="ocs_section-title">Congrats! You pat a cat :D</h3>',
  '</div>'
].join("");
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...