No description, website, or topics provided.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

#Slideshow Example

Each incrementally numbered branch shows progress towards building a slideshow from scratch.

The purpose of this example is to introduce the following concepts:

  • HTML as a representation of content
  • CSS as a means of defining appearance of the content
  • using the web inspector to alter CSS
  • using JS to change the style of HTML elements
  • adding event listeners to the document

This example could be extended to illustrate:

  • using JS to create HTML elements within the document (building the slideshow from an array of src paths)
  • adding event listeners to elements (clicking on navigation, rather than using arrow keys)
  • how to make it loop back to the start
  • the power of CSS to alter appearance
  • how a library such as jQuery could be used
  • how a plug-in could replace this code


  • Write the accompanying text for each stage (Goal, Step, Explanation)
  • Generate an HTML version of the tutorial