Coded By Kids Match Game Exercise

Step 1: Add 3 list items (li) element. Don't forget to close the tags.

Step 2: Add an image (img) element to each list item, use src="./images/blank.png".

Step 3: Add a button (button) element with a class of "audio_trigger" and text "Play".

Step 4: Add audio (audio) element with autoplay attribute. Use type="audio/ogg" for "source" child element.

Extra credit:

• Try changing numbers and colors in the CSS file. What changed?
• Try changing values in the JS file. Does it work?
• Find the hidden 8-bit game tutorial.

Contact

Email: turn5codedbykids@gmail.com

Additional resources for HTML5 & frontend web development

• HTML5 Rocks: https://www.html5rocks.com
• Mozilla Developers Network: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
• Code Academy: https://www.codecademy.com
• How To Code: http://howtocodeinhtml.com/

Additional resources for game development

• Atari HTML5 Library: https://www.atari.com/arcade/developers/building-atari-createjs

• RPG JSv2: http://rpgjs.com/
  This is an interface that kind of introduces you to the notion of events, etc.

• Superpowers: http://superpowers-html5.com/index.en.html
  An open source tool for HTML5 game making. Requires a download.

• HTML5 Game Engines: https://html5gameengine.com/
  A list of different game engines, costs, etc.