Front-end developer

A front-end developer is someone that writes programs on the client side of the browser, i.e., the browser runs the programs in our computers instead of running them in the servers. Front-end developers need to know 3 languages:

  1. HTML – a markup language that describes the content of a webpage
  2. CSS – a style sheet language that describes the stye of a webpage
  3. Javascript – the only programming language that runs natively on a browser

This class is divided as follows:

  • 1st month: HTML and CSS
  • 2nd month: Javascript and the DOM
  • 3th-4th months: Simon Says – an online game

Content (each level takes 2 weeks)

The following are the levels; each level takes 2 sessions, i.e., about 3 hours (2 weeks).

  • Level 1: HTML5, where write the content of a webpage using tags.
  • Level 2: CSS, where we add style to a webpage; we also discuss images and colors.
  • Level 3: The syntax of Javascript (we assume that the student already know the basics of programming.
  • Level 4: The Document Object Model, a.k.a. the DOM, which is the abstraction used to represent web pages.
  • Level 5: Event driven programming, local vs. global variables, scope, event listeners, and event handlers (Simon says – 1)
  • Level 6: analog vs. digital, sound, audio formats (Simon says – 2)
  • Level 7: randomness, queues, event scheduling (Simon says – 3)
  • Level 8: the form tag, CSS, finishing the game (Simon says – 4)

The following is the game that we use in class:

Simon Says

This game is inspired on Simon, the electronic toy by Milton Bradley popular in the 70’s and 80’s.

Click the image to play

We’ll write this game in Javascript and the DOM, in about 160 lines long.

  • level 0: basic HTML, showing images, triggering actions
  • level 1: sounds and sound formats, audacity, playing sounds
  • level 2: storing the sequence in an array, playing sequences
  • level 3: the event-driven model, event handlers, recording sequences
  • level 4: CSS

Preview of the games for a future online video game class

(Fall 2016 or I might merge them with Intro to prog. II)

The following two games are not part of the front-end developer class but instead we will probably use them in a class devoted exclusively to online video games, for kids that have taken the front-end developer class. The explore aspects of video games that were not used in the Simon says game like the canvas tag, motion, collisions, colors,



This is also a very popular game; the code is based on that of Bill Mill’s tutorial. This is a DOM and canvas game. Unlike Mill’s, it does not use JQuery. About 250 lines.

  • level 0: Canvas setup, drawing on it.
  • level 1: Motion.
  • level 2: Collisions.
  • level 3: Paddle and game-over condition.
  • level 4: keyboard events and handlers.
  • level 5: Mouse events and handlers.
  • level 6: Wall data structure.
  • level 7: color.
  • level 8: Sound.
  • Light Cycles

    Light cycles

    This game is similar to the Tron arcade game based on the Disney movie of the same name. It is also a DOM and canvas game, also written in JS (no JQuery). About 530 lines.

    • level 0: Building the HTML page from JS, intro sequence and canvas.
    • level 1: Objects, creating the cycles as objects
    • level 2: Motion, collision, keyboard binds
    • level 3: Sound.