Viewing entries in
Student Projects

Student Project Feature: Breakout Game Clone

Course: Intro to Programming

Project: Work in teams to build a website/app

Amount of Training: 5 weeks of Intro to Programming

Languages/Tools Used: JavaScript, Bootstrap, HTML, CSS, SeamlessLoop, FL Studio (music)

Team Members: Will Johnson, Neil Larion, Matt Rosanio, Michael Smith

Project Description

A breakout clone using JavaScript and the HTML5 canvas element. Breakout is a video game where the object is to bounce a puck across the screen breaking all the bricks in each level. Breakout was originally designed at Atari with Steve Wozniak and Steve Jobs delivering the first prototype in just 4 days. Fitting since, with our project we only had 4 days as well.


What was the inspiration behind the project? 

The inspiration came from this talk. The speakers go over "Game Juice" in a breakout clone of their own. We thought it would be fun to try and replicate as many features in game as possible.

What are some challenges you faced in developing the project?

Collision detection was probably the hardest part and took the longest to put together. Beyond that- it was challenging, albeit rewarding, learning how to write and organize code properly instead of just using something that worked but was bulkier, and harder to rewrite later down the line. 

What kind of discoveries did you make while developing the project? 

We learned that 4 days is not enough time to get in all the features we would have wanted in the game, but it was enough time to build a solid prototype we were proud of and enjoyed playing. We also learned that simple things in the game like sliding in bricks from the top of the screen or power ups to the player paddle are no simple task when coding them.

Student Project Feature: Building a Static Website with HTML and CSS

Class: Intro to Programming

Task: Build a static website

Amount of Training: 4 weeks

Languages Used: HTML, CSS

Working in teams of four, our Intro to Programming students used their newly-minted HTML and CSS chops to create a great-looking static website. Each team needed to use Git to track their website’s progress, and each project needed to include the following elements:

  • A main page and 2-3 subpages that are linked to the main page
  • All of the HTML tags the students had learned so far (p, h, ul, ol, li, em, strong, a, img, div, span)
  • A custom made stylesheet that used selectors, properties, and values
  • Divs and spans to keep the page organized
  • At least one float
  • Use of the box model to create custom border, padding, and margins around an HTML block element
  • Nesting in the stylesheet to add different styles to each child element

The group whose project is featured here, decided to build a website for a restaurant. Using a combination of Bootstrap and their own custom stylesheet, the group built a sleek website with a rotating gallery of images on the home page and subpages for the restaurant’s menu and contact information.

You can check out the full project on GitHub Pages