Lesson 1: Setting Up the First Sprite

This video will likely be best viewed in fullscreen mode.  It's about 7 minutes long.  You can download the resulting file below.

In this lesson we introduce a few basic HTML tags, CSS selectors, and some JavaScript to position our hero on the screen.

HTML is made up of elements - these look like <html> or </div>.  We usually have an opening element and a closing element - for example, "<body>" is an opening element, and "</body>" is a closing element.  HTML tags can be used for lots of things - dividing our content, specifying special styling information, displaying images, and lots of others.  HTML is used to display basic content on the screen.

In this lesson we also use CSS; this is specified within our <style> element.  CSS allows us to modify visual styles for our HTML elements.

We also modify our styles using JavaScript; JavaScript is a language for adding some logic, interaction, and animation to our page.  We use JavaScript to modify our styles to set the position of our hero in this game.

JavaScript is made up of statements, variables, and functions.  In this lesson, we use a function to set the position of our hero sprite.  This function manipulates a variable that represents our HTML element, and uses statements to modify the properties of this HTML element.

Timothy James,
Jul 20, 2015, 6:29 PM