Homework 1: Html, CSS, and JavaScript

Assigned: 9/1/2020; Due 9/10/2020 at 1:30pm ET


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, 330 lines of CSS in styles.css, and about 225 lines of html across 4 html files.

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. Imagine you are the software engineer at a company tasked with carrying out the design provided by the UX department. 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. You will download the SSUI-hw1.zip file which will contain the following starter files:

In addition, we have supplied the following for your reference, in the examples folder of the zip file:

example index page example products page example products quickview page example details page example index page

Detailed Requirements

We expect your design to look generally like the example screen shots and movie, but you do not need to be pixel-perfect. For example, it is not necessary to try to match the exact fonts, sizes, colors or spacing -- just make your site look nice. Spending extra time on the design of the look will not count for extra credit.

The styling should be generally defined by the CSS file, and not in the html file. Specifically, there should be no styling information in the html file, and the dynamicly 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

Turn In

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

To submit this assignment, you will host your code in a private Github repository, post it to a public link using Netlify, and submit this link to Canvas. The following sections will walk you through the process of doing this.

Setting Up Your Github Repo

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

  1. Go to Github and Sign In/Sign Up.
  2. On the left side bar, click the "new" button next to "repositories".
  3. Name your repository "SSUI-homeworks", set it's visibility to private, and add a README file (this will be the README file mentioned at the beginning of this section).
  4. Click the settings button for the repository, then from there click "Manage access" on the left navigation bar, and click "Invite a Collaborator". Add the following usernames: bradamyers, cemery1, lxieyang. (Hint: you need to add each of us separately, and you need to click twice - once to confirm who it is, and a second time to actually add us.)
  5. 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.
  6. 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.

github step 1: make a new repo github step 2: set up the repo github step 3: go to settings github step 4: got to manage access github step 5: invite collaborators github step 6: connect to github desktop

Hosting Your Site on Netlify

  1. Once you finish your site, go to Netlify. (You can also start doing this much earlier as a way to test your site if you want.)
  2. Log in to Netlify using your Github account. (Hint: use the Log in button on the first page even if you haven't used Netlify before. Then use the black GitHub button. Then "Authorize netlify" when asked.)
  3. Click on "New Site from Git", select "Github" under "Continuous Deployment" and allow access to your Github account (again). You may be prompted to install Netlify.
  4. Search for your repository name, and click on it. Then click "Deploy Site".
  5. Find your site's URL, and submit this to Canvas by the deadline.

github step 1: make a new repo github step 2: set up the repo github step 3: go to settings github step 4: got to manage access github step 5: invite collaborators

Turning In to Canvas

Turn in the following things to Canvas by 9/10/2020 at 1:30pm ET:

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