Skip to content
PlayOwl

Coding · Grade 7

HTML and CSS for Interface Construction

Learners build the structure of a coding-club web page in HTML (elements, nesting, attributes, head and body), choose semantic elements that work for keyboard and screen-reader users, style pages with CSS selectors while predicting which rule wins in the cascade, and calculate box-model sizes. Accessible design (alt text, labels, contrast and focus) runs through the whole course.

  • 4 lessons
  • About 80 minutes
  • Check what you learned: 8 questions
  • Ways to answer: fill in the blanks, choose an answer, put code in order, match pairs, type a number and sort into groups
See plans Included with Family, Teacher and School plans. Open in PlayOwl

What learners will discover

  • Describe and build HTML structure: elements, tags, attributes, nesting, head and body.
  • Choose semantic elements and write alt text and labels so pages work for keyboard and screen-reader users.
  • Use element, class and id selectors and predict which CSS rule wins using specificity and order.
  • Calculate box-model sizes and apply accessible visual design: contrast, size, focus and not relying on colour alone.

Lessons

  1. How HTML describes a page 6 steps3 practiceabout 20 min
  2. Meaningful HTML for everyone 5 steps3 practiceabout 20 min
  3. Styling with CSS 6 steps4 practiceabout 22 min
  4. The box model and accessible design 6 steps2 practiceabout 18 min
  5. Check what you learned 8 questions at the end

Keep exploring

Games to practice with

  • Bug DetectiveA robot program almost works. Run it, spot the buggy block, and fix it.
  • Sorting FactoryTurn a work order into if/else rules and watch the conveyor sort every item.
  • Garden AutomationProgram a garden robot with sensor rules — then watch a whole day play out.

More 7th grade coding

Guide for grown-ups