In this unit, studios will take the form of ongoing running projects, just like the FlickList series in Unit 2. There will be two projects: Mario, and FlickList (again!)


In this series, we will build and make incremental additions to a simple page that displays a "pyramid" of # symbols on the screen, and allows the user to specify how big to make the pyramid. This simple exercise will provide a nice, stripped down vehicle to get comfortable with the basics of Javascript syntax, and the process of writing Javascript code to interact with the user by manipulating, and responding to events from, the HTML document.

Mario 1

Practice basic JS syntax by building a dynamically sized pyramid and printing it to the developer console.

Work on Mario 1

Mario 2

Display your pyramid for the user by inserting it into the DOM.

Work on Mario 2

Mario 3

Use an event handler callback to respond to user input and allow the user to decide the height of the pyramid.

Work on Mario 3

Mario 4

Perform client-side validation on the user's form submission.

Work on Mario 4

Mario 5

Refactor to use the jQuery library for DOM manipulation.

Work on Mario 5


Back by popular demand, it's everybody's favorite movie app. This time, we will focus on different things, such as making a more interactive, nicer-looking user-interface, and pulling data from an API so that users can browse real movies. In order to focus in on this new material, we will limit our scope to making a static page consisting of just HTML, CSS and Javascript... in other words, "just the front-end". This means that our app will not have user accounts or the ability for users to save their lists, but we can pretend.

FlickList 0

Grab the starter-code and register for a key for the API we'll be using.

Work on FlickList 0

FlickList 1

Carve out the main functionality: a browseable list of real movies that can be added to the user's watchlist in a separate section below.

Work on FlickList 1

FlickList 2

Add some rudimentary CSS, and add a "search by title" feature.

Work on FlickList 2

FlickList 3

Incorporate Bootstrap to quickly make things responsive and nicer-looking.

Work on FlickList 3

FlickList 4

Improve the search feature to query for movies by topic rather than title.

Work on FlickList 4

FlickList 5

Create a Bootstrap grid layout.

Work on FlickList 5