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:
- Write well-structured HTML
- Understand basic tags in HTML
- Organize information using lists and tables
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
proje
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 .
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 |
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! :)
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.
- Include a single-line input for the user's name
- Include a single-line input for the user's email
- Include 3 checkboxes labeled with some casino games the user can receive news about in the
newsletter.
- Include a submit button
Be sure this all put within one div
.
Hint
Feel free to check out this resource.
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
- 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.
- 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
-
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.
-
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...
)
-
Submit on Canvas under the HTML Project assignment!
Congrats! You just finished the HTML Project! 🎰
CS2 HTML Project 2024 🎰
<<< Back to main site
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 yourCS2
folder. This is where you'll store all the files for your project.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:
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 thehref
variable to the name of another file in the same folder. The text after the closing>
of thehref
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.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 thehome.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:
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!).
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.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
andabout.html
, should both contain a link back tohome.html
.Task 8: Include a header, using header tags (
<h></h>
) titling your pageAbout Us
.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>
).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 thehome.html
page.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
Your files should look like this at submission:
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.
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 withB0...
)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