Discovery-Based Learning HTML Creation Games

HTML cannot be learned in a vacuum. It is very project-based, so there are a number of various modules that can be plugged in to a live-preview online HTML/CSS editor. The various modules will be used in different stages, with each stage increasing the amount of involvement and body of knowledge required. The following modules are discovery-based, with no formal instruction. Instead, the student is to allow their curiosity to guide them through modifying parts of the HTML and CSS. In tinkering, they should be able to intuit information about HTML and CSS.

1. Meme Maker

• The student uses HTML and CSS to modify the image source and top and bottom caption texts of a meme.
• Student Actions:
  • Modify the text content of existing tags. (i.e. changing the text of the meme)
  • Modify the attributes of existing tags. (i.e. changing the src to another image)
  • Modify the existing tags to transform them to different tags. (i.e. changing <h1> to <h3>)

2. Comic Creator

• The student uses HTML and CSS to create a multi-paneled webcomic with images and differently styled caption boxes.
• Student Actions:
  • Use <div>, <p>, <u>, <i>, <b> tags. (i.e. making a comic panel with a rich text caption)
  • Use inline CSS styling. (i.e. changing the color of a caption)

3. Blog Publisher

• The student uses HTML and CSS to create a mock blog about one of their interests.
• Student Actions:
  • Use <div>, <table>, <ul>, <ol>, <p>, <h?>, and other ways of organizing information. (i.e. making a chart)

With this idea in mind, I created the HTMLearn website for TeCanal, which can be viewed here.