Homework 1: Html, CSS, and JavaScript

Assigned: 8/30/2022; Due 9/13/2022 at 3:05pm ET


Imagine that you work for an organization where designers rule (such as Apple is reported to be), so that your job is to faithfully reproduce the design you have been given. Assume that the description below (and in future assignments) is the specification, and your job is to implement it exactly. You are not supposed to deviate from the design (and you will be graded on how well your implementation matches the specification).

In this first assignment, you will create a tiny part of a web site. The key focus is on using html and CSS, and on dynamically building a web page using JavaScript based on a data structure. The content of the page is derived from a database, which here is just a variable in memory, but which in homework 6 will be replaced by getting the data from a real remote database, as if it was a real product list. You are not allowed to use any JavaScript packages (that is, you cannot use React, Bootstrap, jQuery, Vue, or any other library) - everything should be built "from scratch" using regular JavaScript that you write. To give you an idea of the scope of this homework, In the TA's example version, this assignment requires writing about 240 lines of JavaScript in main.js, 350 lines of CSS in styles.css, and about 275 lines of html across 4 html files (865 lines total).

We are calling the web site "Scotty Shirts U Illustrate (SSUI)", and we have supplied a design for you to emulate. Therefore, this assignment does not involve designing the look of the web page, you just need to implement the design we give you. You should use appropriate, well designed, html, CSS, and JavaScript so the site renders correctly on the Chrome browser on a regular desktop computer, and the code is easy to understand and maintain.


The web site will have 4 html pages, 1 JavaScript file, 1 style file, and one database file (which is actually also a JavaScript file). You will write all of these files except the database file.  We will supply you with starter code for these files, and also with a collection of images (pictures) that you can use on the pages. To get the starter files, see the Setup section below about how to check it out of Github. The actual link will be on Canvas, so it stays private. The files included are:

In addition, you will want to rely on these pictures and the movie, which are a key part of the specifications:

example index page example products page example products quickview page example details page example not implemented page

Detailed Requirements

We expect your design to look as much as possible like the example screen shots and movie. However, it is not necessary to try to match the exact fonts, sizes, colors or spacing -- just make your site look basically the same as the pictures. Spending extra time on the design of the look will not count for extra credit. However, to be as close as possible, you can use these fonts and colors:

The styling should be defined by the CSS file, and not in the html file. Specifically, there should be no styling information in the html file, and the dynamically generated content should also reference classes in the CSS file, when useful. (Hint: but the colored buttons on the details page will need to be generated by your code based on the colors from the shirts.js file).

All of the JavaScript should be collected into the main.js file for all of the web pages.

As should be apparent from the movie and screen shots, here are the required behaviors:

Extra Credit

Setting Up Your Github Repo

To submit this (and each future) assignment, you will host your code in a Github Classroom private Github repository, host the page using Github Pages, and submit a README with the link as your submission for the homework to Canvas. The following sections will walk you through the process of setting this up.

(See pictures below. Click on a picture for a larger view.)

  1. Click the link on the HW1 entry on Canvas to accept the invite to the GitHub Classroom. This will open a new tab where you can log in or sign up to GitHub and accept the assignment.
  2. After a few seconds you can refresh and follow the link to your new repository.
  3. To setup GitHub pages, click on Settings -> Pages and select Deploy from branch for Source and main / (root) for the branch. After a few minutes you should see a link to your live website that will be updated every time you push new code.
  4. We recommend downloading Github Desktop to easily edit your code locally and commit changes to Github. Once downloaded and connected to your account, from your "SSUI-homeworks" repository click the "Code" button and "Open with Github Desktop" and follow the instructions to create a local copy of the repo on your computer.
  5. Copy the starter code into your local folder (note: do not copy the folder itself, copy only the contents, so the html files are at the top level of the repository). As you build your site, commit your changes using Github Desktop.
  6. We also suggest you use Visual Studio Code as your code editor.

Github Classroom Invite Github classroom accept

Turn In

In addition to your code, you need to have a README file, which can be in plain text, Microsoft Word, or pdf format, which should contain:

Please upload this README file to Canvas by 9/13/2022 at 3:05pm ET.

We will also check the timestamp of your last Github commit to ensure this was completed on time.