Skip to main content

Lab 2: HTML & CSS

in-class Wednesday, Jan 27 at 10:50AM, accepting submissions until Friday, Jan 29 10:00AM

Setup

Before starting this lab, ensure that you have:

Introduction

Now that you've reviewed some of the basics of HTML and CSS in the pre-lab, let's take a look at an example scenario. Gusteau's Restaurant is planning on holding a Music Night but they haven’t figured out what music to play for their customers. They have found a database of over 2.5+ million music CDs which they want to search through. For each CD, there is the title, the artist name, and the list of tracks. Each track has a song name and an artist name. Other information (e.g. length of tracks, genre, notes) is available as well. Your job is to create and design a frontend for this using dummy information of your choosing.

Part 1: Sketching

You will be returning to the main class session before rejoining your Breakout Room to complete the next step of the lab.

Part 2: Front-end

Now that you have the sample sketches, your group will be responsible for creating at least 2 pages:

  1. A cdsearch.html home page for input (query).
  2. A cdresults.html page that displays a list of possible CD outputs (can be static results regardless of unique queries and come up with fake data for a couple CDs).
  3. A cdsingle.html (OPTIONAL) At least one CD html page, the result of clicking on one of the CD outputs in the results page. This page should have all of the information about the selected CD in it (also using dummy information).

In addition, you are expected to:

You may use Bootstrap for this lab if you’d like, but it is not required.

Collaboration on Lab

Collaboration is encouraged in labs. You will be assigned a team during synchronous lecture via Breakout Rooms on Zoom. Only one handin is required for each group, see handin instructions for how to add team members to a submission. To collaboratively work on the lab together, one team member should share their screen and invite the other users to edit the files using the Live Share extension on VSCode that we set up as part of Assignment 0. With Live Share, you can all work on different files but still be editing the code on a single member's machine. We encourage you to each work on a separate file, say one doing CD search, one doing the results page, and one doing the CSS. Instructions for starting a Live Share session are below:

Also, if you find that you are stuck, you may refer back to the prelab or flag down a TA for help. We allow uses of Google for questions such as "how to center a div vertically" and, additionally, MDN Web Docs is a great source of information.

Handin Instructions

Hand in your code for this lab via Gradescope. Please create a zip file of the stencil code root directory and hand in this zip file in your handin. Only one team member should upload their local version of the code and then assign group members after submission. Remember that the CD single page is optional, so your final handin should minimally have a cdsearch.html page that takes you to the cdresults.html page and displays dummy CD information, and both these pages should be styled. IMPORTANT: Please do NOT change the filenames or file structure

Lab Handins on Course Website

Keep in mind that each submission for this lab will be anonymously displayed on the course website, so please keep this in mind and do not put any identifying information in your handin.