A front-end developer is someone that writes programs that run on the browser, i.e., the programs run in our computers instead of run in the web 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
The goal of this class is to go over simple complete examples that can serve as templates for personal projects. We will not cover any topic in depth, and there will be many topics that we won’t cover, but with working prototypes at hand, it is relatively easy to tweak them with additional information from the web.
This class is divided as follows:
- 1st month: HTML and CSS
- 3th-4th months: Simon Says – an online game
Each level takes 2 sessions of 1.5 hours, i.e., about 3 hours every 2 weeks, so the course should takes 16 weeks.
- Level 1: HTML5, where we write the content of a webpage using tags
- Level 2: CSS, where we discuss images, colors, and add style to a webpage
- Level 4: The Document Object Model (DOM) used to represent web pages
- Level 5: Event driven programming, variables and scope, event listeners and 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:
- level 0: basic HTML, showing images, triggering actions
- level 1: sounds and sound formats, audacity, playing sounds
- level 2: using arrays to store and play sequences
- level 3: the event-driven model, event handlers, recording sequences
- level 4: CSS
Preview of other games
The following two games are not part of the front-end developer class but instead we will probably use them in a class devoted to online video games, for kids that have taken the front-end developer class. They explore aspects of video games that we didn’t use in the ‘Simon Says’ game, like the canvas tag, motion, collisions, colors,
The authors of the original ‘Breakout’ were not other than Steve Wozniak and Steve Jobs [wikipedia]. Our code is based on that of Bill Mill’s tutorial; This is a DOM and canvas game that, unlike Mill’s, doesn’t use JQuery. Its about 250 lines long.
- 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.
So let’s get started.