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:
- HTML – a markup language that describes the content of a webpage
- CSS – a style sheet language that describes the stye of a webpage
This class is divided as follows:
- 1st month: HTML and CSS
- 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 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:
This game is inspired on Simon, the electronic toy by Milton Bradley popular in the 70’s and 80’s.
- 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.