Setup

Before starting this lab, ensure that you have:

• Accept the Github Classroom assignment and clone this repo that contains stencil code for lab2.
• Go to Google Jamboard

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

• Create a google jamboard and share it with your team.
• Collaboratively, sketch at least 2 pages:
• Initial query page
• Results page
• Page to show the details of a single CD (optional)
• Handin the sketches by uploading a PDF of your design to Gradescope.
• If you would like to opt out of using Jamboard, you can draw on a piece of paper and upload a photo of the result (although collaboration may be more difficult with this method).
  • One member from the group should submit the design and ensure that your group members are included in the Gradescope submission. Do this by clicking "View and edit group" and select your group members.

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:

• Style these pages with CSS. We have already linked cd.css to the stencil we provided and you can make use of it. For instance, you can update the styling to list items of the results page should be styled to distinguish them (e.g. border, background-color, etc).
• Link up these html pages. At the most basic level, the user should be able to reach the results page from the index page, and a CD page by clicking the corresponding result on the results page (if you decide to implement the CD page).
• Validate your HTML syntax and CSS at services like the below (but also keep in mind that VSCode should be validating your HTML and CSS syntax automatically with the plugins that we installed in Assignment 0):
  • HTML syntax validator
  • CSS validator

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:

• Click the Live Share button



• Sign in with Github
• After signing in and granting access to your account, the invitation link to your Live Share session should be copied to your clipboard. Share this link with your group members.

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.