Academics · Middle School · Grades 6–8

Type the code.
See the page appear.

Ten lessons, each one idea and one task: tags, headings, lists, links and pictures, then CSS rules, classes, the box model, readable text, flexbox and small screens. Then build a page of your own and download it.

Start lesson 1What you get
10lessons and a project
42checks on the real page
3pictures built in

The playground

Read the idea, do the task in the editor and watch the checks. Stuck: read the problems under the editor, or show a solution. Load the example to see a finished page.

Loading the playground. If nothing appears, turn on JavaScript.

What the browser does with your code

The preview runs these three steps every time you stop typing. The checks read the result of step 3, the same page you see.

1 · Read

HTML becomes a tree

The browser reads the tags from top to bottom and builds a tree of elements. A tag inside another tag becomes its child. A tag left open swallows what follows it, which is why the problem finder cares.

2 · Match

CSS rules find their elements

Each rule’s selector is matched against the tree. When two rules set the same property on one element, the more specific selector wins, and between equals the later rule wins.

3 · Draw

Every element becomes a box

The browser works out each box’s size from its content, padding, border and margin, stacks or lines the boxes up, and paints them. Change one number and the whole page is laid out again.

What you get

Academics · Middle SchoolFree

What you finish with
Ten finished lessons covering the HTML and CSS a first page needs, a page of the student’s own that passes a nine-point checklist including alt text and readable contrast, and that page as a real .html file.
Who it is for
Students in grades 6 to 8 writing their first web page in a technology class, a club or at home; teachers who want a no-install, no-account lab; and older beginners who want the basics without setup.
Format
Browser code playground with ten lessons and a project. Works on a computer, tablet or phone; a keyboard makes typing code easier. Downloads the page as an .html file and prints the code.
Access
Free. No account and no sign-in. Code is saved only in this browser; the preview cannot load from or send to the internet, and nothing typed is sent to Caveat.
Where it lives
The Middle School space in Caveat Academics.
Support
Questions, a correction or a request: team@caveatacademic.com.

How to use it

  1. Read the idea at the top left, then do the task in the editor. The preview and the checks update when you stop typing.
  2. If something breaks, read the problems under the editor and tap one to jump to its line.
  3. When every check passes, go on to the next lesson. Use the HTML and CSS tabs to switch between the two kinds of code.
  4. Finish with the project: a page about anything you like. Download it and open the file in a browser.

Start lesson 1

How the playground works

What gets checked, what the problem finder looks for, and why the preview cannot reach the internet.

How the playground works

  • You type the inside of the page. The playground wraps it in the outer shell every page needs (the doctype line, <html>, <head> with your CSS in a <style> tag, and <body>). Download the page to see all of it.
  • Checks read the finished page, not your typing: the elements the browser built and the styles it worked out. Any correct way of writing the answer passes.
  • The problem finder looks for tags that are misspelled, never closed or closed in the wrong order, missing brackets and quotes, missing semicolons, and CSS properties or values the browser does not know. It asks the browser itself whether a property and value are valid.
  • Contrast is the ratio between the brightness of the text and of what is behind it, from 1 to 21, as the accessibility guidelines define it. Normal-size text needs 4.5 or more.
  • The preview is sealed. Scripts are off, and pictures, fonts and links to other sites do not load there, so nothing you type can reach the internet. Three pictures are built in. Links work in the page you download.

For teachers and families

Each lesson is five to ten minutes: read the idea, do the task, watch the checks. The ten lessons fit two or three class periods; the project can fill as many more as a student wants to give it.

Show a solution is there on purpose. A student who is stuck learns more from reading a working answer line by line, then starting the step again, than from guessing.

The downloaded file is an ordinary web page. Open it in any browser, or in a text editor to keep working on it without this playground. Nothing here needs an account, and no names are asked for.

The ten lessons and the project

StepIdeaThe taskChecks
1Tags wrap contentAdd a paragraph under the heading: type <p>, a sentence about Saturn, then </p>.3
2Headings make an outlinePut an <h2> heading above each paragraph: one about the rings, one about the moons.3
3ListsTurn the three facts into a bulleted list: one <ul> holding three <li> items.3
4Links and picturesAdd the picture planet.svg with alt text. Then make the words NASA’s Saturn page a link to https://science.nasa.gov/saturn/.4
5Your first CSS ruleIn the CSS tab, write a rule for h1 that changes its color and makes its font-size at least 40px.3
6ClassesGive the second paragraph the class note. Then give .note a background-color and at least 8px of padding.4
7The box modelGive .card a border, at least 16px of padding, a border-radius, and at least 20px of margin-bottom.4
8Text people can readSet a font-family on body, give p a line-height of at least 1.5, and darken the paragraph color until the contrast check passes.3
9Side by side with flexboxMake .row a flex container with a gap of at least 12px, so the three cards sit side by side.3
10Fit small screensGive main a max-width of 600px or less and center it with auto margins. Then add a media query that makes h1 smaller on screens up to 600px wide. Use the Phone button above the preview to test it.3
ProjectYour own pageWrite the HTML and the CSS for a page of your own, then download it. Load the example to see one finished page about Saturn.9

Sources

  1. WHATWG, HTML Living Standard: the elements and attributes taught here, which elements have no closing tag, and the alt attribute on images.
  2. World Wide Web Consortium (W3C), CSS specifications: selectors and the cascade, the box model, flexible box layout and media queries.
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2, success criterion 1.4.3 Contrast (Minimum): a contrast ratio of at least 4.5 to 1 for normal text, and the definition of relative luminance behind the ratio; criterion 1.1.1 Non-text Content for alt text.
  4. MDN Web Docs (Mozilla): reference pages for each element and property, a good next stop after these lessons.
  5. NASA Science, Saturn: Facts (science.nasa.gov/saturn): the facts in the lesson text and the example page (sixth planet, a day of about 10.7 hours, a year of about 29 Earth years, rings of mostly water ice about 10 meters thick in most places, Titan larger than Mercury, a density below that of water).

A first course in writing a page by hand. It does not cover JavaScript, forms or publishing a site. The three built-in pictures are original to Caveat; in the preview, pictures and links from other sites are switched off. Support: team@caveatacademic.com.