What will my child learn?

HTML Planet for Kids packs a lot of knowladge and practical skills in a compact, easily digestable course format.

What makes this course special?

Thanks to the visual editor with built-in code editor your child will be able to jump straight into learning about HTML elements and CSS styling.

HTML and CSS code will be introduced along the way.

Course structure

The first section of the course consist of simple one-part adventures (lessons) dedicated to learning one particular HTML element or CSS property.

The middle section consists of mini projects that have multiple parts (adventures), so that your child will be able to combine HTML elements and CSS properties into more complex solutions such as space bubbles with aliens, a business card and styling a script for a space drama.

The last section is a 16 part project of building a real website for a Super Space Rides business. Your child will use all the skills they learned so far to create the structure, HTML layout and design for a real website.

Take a look at the finished Super Space Rides website here. Your child will learn all the required skills to build this project.

Visit the Super Space Rides website

The list of topics

If you are interested in details, please take a look at HTML and CSS topics that are covered in HTML Planet for Kids course.

HTML

  • Headings <h1>, <h2>…
  • Paragraphs <p>
  • Images <img>
  • HTML document structure
  • Links <a>
  • Grouping elements <header>, <section>, <footer>, <div>
  • Spans <span>
  • Line breaks <br>
  • Buttons <button>
  • Embedding content <iframe>
  • Page title <title>
  • Page meta fields <meta>

CSS

Text

  • Font size font-size
  • Text color color
  • Font family font-family
  • Line height line-height
  • Font style font-style
  • Font-variant font-variant
  • Font-weight font-weight
  • Text transform text-transform
  • Text align text-align
  • Letter spacing letter-spacing

Backgrounds

  • Background color background-color
  • Background image background-image
  • Background repeat background-repeat
  • Background position background-position
  • Background size background-size
  • Background attachment background-attachment

Dimensions and spacing

  • Margins margin
  • Padding padding
  • Width width
  • Max width max-width
  • Min width min-width
  • Height height

Borders

  • Borders border
  • Border radius border-radius

Layout

  • Display block, inline and inline-block
  • Float left and right float
  • Clear clear

Positioning

  • Absolute position position: absolute
  • Left, top, right and bottom left, top, right and bottom
  • Z index z-index
  • Relative position position: relative

Shadows

  • Box shadow box-shadow

CSS rules

  • Selectors element name, classes and ids
  • Mixing CSS rules with inline styles
  • Using stylesheet files
  • Base classes and subclasses
  • Priority of CSS rules
  • Styling pseudo states hover and active

Units

  • Pixels px
  • Percent %

Quick Links