Curriculum introducing enhancing web pages with JavaScript (outdated)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
slideshow
README.md
footprint.png
hascss.html
hascss_de.html
index.html
index_de.html
inspecting-film-roll.png
nocss.html
nocss_de.html
page1.html
page1_de.html
page2.html
page2_de.html
page3.html
page3_de.html
page4.html
page4_de.html
style.css

README.md

Curriculum — JavaScript for web pages

Please note: The curriculum is a bit outdated as it contains animations implemented with JavaScript that would rather be implemented with CSS today. It used to be part 2 (day 2) of the JavaScript for absolute beginners workshop but is not actively being used any more.

This curriculum introduces enhancing web pages with JavaScript. You should have some very basic knowledge of programming with JavaScript like variables, loops, and functions.

The purpose of the example slideshow 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
  • using JS to edit HTML of elements in the document

This example could be extended to illustrate:

  • adding event listeners to elements (clicking on navigation, rather than using arrow keys)
  • how to make the scrolling loop back to the start
  • the power of CSS to alter appearance
  • how a library such as jQuery could be used
  • how a library or plug-in to one could replace this code