CS2 HTML Project 2024 🎰

<<< Back to main site

Due Date: Thursday, October 10, 202410/10/2024
Need help? Remember to check out Edstem and our Website for TA help assistance.

We will be grading all projects in Chrome.
This means that you should check your finished project in Chrome before handing in. We will not award credit if a task works in another browser but not Chrome.

Introduction 🎰

Now that you’ve all learned the basics of how to make a web page, we would like you to help us debug and improve a new CS2 website! This project must be completed by yourself, without the help of any other students or resources not mentioned in the resource section. As a reminder, please do not put any personal/identifiable information on your website to ensure anonymous grading.

Project Description 🎰

The goals of this project are to:

Tasks 🎰

This project will consist of updating two files supplied to you (home.html, games.html), and creating a third file (about.html).

Task 0 Go to the HTML folder within your CS2 folder. This is where you'll store all the files for your project.

If you don't already have one, create an HTML folder in your CS2 folder! Now you will have Excel and HTML in your CS2 directory!

Download the cs2 folder in stencil code files with this link and place it into this HTML folder. Then uncompress the zip file. This uncompressed folder is your main folder for this project.

At this point, your file structure should look like this:

    cs2site (folder)
    ├── games.html
    ├── home.html
    ├── images (folder)
        ├── blackjack.png
        ├── cs2.png
        ├── dice.png
        ├── roulette.png
        ├── slotmachine.png

Finally, open this new cs2site folder in VSCode. (Hint, we describe how to do this in the HTML Lab).

home.html

In HTML, we can route from one page to another page in HTML by creating an <a></a> tag, but setting the href variable to the name of another file in the same folder. The text after the closing > of the href represents what you will actually see on the web page.

<a href="nameOfOtherPage.html">Click Me to Go to Another Page</a>

In this example, the user of your webpage will see text that says "Click Me to Go to Another Page", and when they click this text it will take them to nameOfOtherPage.html.

Task 1: In the home.html file, fix the anchor tags (<a></a>) so that they direct to the correct pages, and if you click on links on the web page, they go to the other pages.

A reminder that to view your files in the browser, right click the home.html on the lefthand side of VSCode, then click Open With Live Server. You should only be opening up the project with the home.html file, as it is the root file of the project.

Open With Live Server???

Please make sure to complete the lab before starting the project! We installed and covered the VSCode Live Server exgtension in the lab.

Task 2: Within the same file, you will also add a link to an external web page to the IGT website (This is where Professor Stanford worked):
https://www.igt.com/

You can add an external link by using the same method used in Task 1 but replacing the href to the link of the website.

games.html

Task 3: Within the games.html file, add a link back to the home.html page.

You should now be able to navigate back and forth between the home page and the assignments page.

Task 4: On the games page, fix the games and prize tables by adding table headings called Game Name and Image for one table and adding table headings called Game Name and Maximum Prize to the other table. Recall we learned how to make tables in the HTML Lab.

Hint

The table headings should look like:

Game Name Image
Game Name Maximum Prize

Task 5: On the home page, create a table with three columns: TA Name, TA Email, and Favorite Casino Game as the headers, and fill it with the following data (your best guess for the casino games!).

Specifically, use the following TA names and emails:
Justin - justin_hickey@brown.edu
Liam - liam_capozza@brown.edu
John - john_farrell@brown.edu
Titi - yifan_zhang@brown.edu

Hint

Your table should be 5 rows by 3 columns, with the first row being a header row with headers.

about.html

Task 6: Create the file about.html within the cs2site folder in Visual Studio Code.

See the HTML Lab for an example of how to do this.

You can, if you want to, copy the code from one of the other pages if you want as a starter (not necessary though).

Task 7: On this new page, add a link back to home.html

At this point, two of your pages, games.html and about.html, should both contain a link back to home.html.

Task 8: Include a header, using header tags (<h></h>) titling your page About Us.

Recall that header tags range in size from h1 to h6, h6 being the smallest!

Hint

Example level-1 heading: <h1> Hello World! </h1>

Task 9: Now create a smaller header entitled Our Casino. Below this header, write a description about your own fictional casino contained in a paragraph tag (<p></p>).

Task 10: Below the paragraph, create an even smaller header entitled My Biggest Casino Win. Write a short story (fiction or non-fiction) about a time you "Won Big!" during a trip to the casino. The story should all be contained in a new paragraph tag (<p></p>).

Short stories that are especially exhilarating may or may not receive extra credit ;)

Task 11: Lastly, add an image of your favorite casino underneath the <p></p> containing your short story.

This can be a locally downloaded image or one from the internet you link. If you download an image, make sure to save it to your HTML project folder and reference it locally!

Feel free to go beyond the minimum requirements if this project interests you! :)

Extra Credit! 🎰

Once we implement your updates to the CS2 website, we would also like the option to sign up users for a Gambling Newsletter. To do this, we will implement a newsletter sign up form.

5pts: Add a form to the home.html page.

Be sure this all put within one div.

Hint

Feel free to check out this resource.

2pts: Fill out our feedback form.

Hand-In 🎰

To Hand-In Project 1:
Zipping files is a way to compress one or more files into a single file that is often smaller than the source files; you’ll submit all homework assignments through Canvas by uploading one zipped file containing all of your work.

To do this

  1. Rename your source files so they do not contain your name. This is especially important in order to maintain the course’s anonymous grading policy that ensures your assignments are graded fairly. We will deduct points if your files contain identification data.
  2. Make sure you have the correct, most up-to-date files before zipping. We’ve had students in the past send in older versions that didn’t contain all their finished work! You will receive a 10% deduction if TAs must regrade your work due to incorrect files.

Your files should look like this at submission:

    cs2site
    ├── games.html
    ├── home.html
    ├── about.html
    ├── images 
        └── image files
  1. Create a .zip file from your Html Project folder.

    Windows:

    In Windows Explorer, go to the folder containing the files you want to zip. Select the files, then right-click on any of the selected files and select Send To… -> Compressed (zipped) Folder.

    Mac:

    In Mac Finder, go to the folder containing the files you want to zip. (This would be your “cs2site” folder) Select the files, then right-click on any of the selected files and select Compress Items.

  2. Right click on the newly created zip file to rename it. The name of your file should be BannerID_HMTLProject.zip (replace "BannerID" with your own banner id, starting with B0...)

  3. Submit on Canvas under the HTML Project assignment!

Congrats! You just finished the HTML Project! 🎰

If you have any issues with completing this assignment, please reach out the course HTAs: cs0020headtas@lists.brown.edu

If you need to request an extension, contact Professor Stanford directly: don.stanford@gmail.com