Game Comparison: Code-Along Activity
Follow the instructions below to build a webpage that helps users compare the various features of different games. Use a table
and some iframes
to provide information to the user. Start from the empty project, and then follow the instructions below.
StackBlitz: https://stackblitz.com/edit/stackblitz-starters-bznpdvwh?file=index.html
Setup
Start with the basic HTML setup for the page.
- Open the index.html file for editing
- Add the
html
tags (opening and closing) - Add the
body
tags within thehtml
tags - Add an
h1
header that says "Game Comparison" within thebody
- Click the Run button and make sure it appears as expected!
At the end of this section, your webpage code should look like this:
<html>
<body>
<h1>Game Comparison</h1>
</body>
</html>
Comparison Table Basics
- Under the header, add a
table
tag (opening and closing) - Add the "border" attribute to the
table
element so a border appears
At the end of this section, your table code should look like this:
<table border="1">
</table>
Comparison Table Headers
- Between the opening and closing
table
tags, add atr
(table row) - Between the opening and closing
tr
tags, add fourth
s (table header data) - Make the content for the
th
tags the following text values:- Game Title
- Release Year
- Platform
- Price
At the end of this section, your table header code should look like this:
<tr>
<th>Game Title</th>
<th>Release Year</th>
<th>Platform</th>
<th>Price</th>
</tr>
Comparison Table Row Data
- Between the opening and closing
table
tags, add threetr
s (table row)- Each row will represent one game
- In each row, add four
td
s (table data), each corresponding with the column headers - The data should be as follows:
- Fortnite, 2017, Multiple, Free
- Candy Crush Saga, 2012, Mobile, Free
- Pokemon Sword & Shield, 2019, Nintendo Switch, $59.99
At the end of this section, your table body code should look like this:
<tr>
<td>Fortnite</td>
<td>2017</td>
<td>Multiple</td>
<td>Free</td>
</tr>
<tr>
<td>Candy Crush Saga</td>
<td>2012</td>
<td>Mobile</td>
<td>Free</td>
</tr>
<tr>
<td>Pokemon Sword & Shield</td>
<td>2019</td>
<td>Nintendo Switch</td>
<td>$59.99</td>
</tr>
Game Reviews
In addition to showing the user the information for these games, add a review for each of them! Instead of copying and pasting from review sites, use iframe
s to directly show the reviews on the page.
- Under the comparison table, add an
h3
that says "Fortnite" - Under that
h3
, add aniframe
that will point to a review of Fortnite - Set the
src
attribute of theiframe
to "https://www.pcmag.com/reviews/fortnite-for-pc" - Set the
height
attribute to300
- Set the
width
attribute to500
- Add additional
h3
headers andiframe
elements for the other games:- Candy Crush Saga: https://www.cnet.com/reviews/candy-crush-saga-android-review/
- Pokemon Sword & Shield: https://www.pcmag.com/reviews/pokemon-swordshield-for-nintendo-switch
At the end of this section, your iframes should look like this:
<h3>Fortnite</h3>
<iframe width="500" height="300" src="https://www.pcmag.com/reviews/fortnite-for-pc"></iframe>
<h3>Candy Crush Saga</h3>
<iframe width="500" height="300" src="https://www.cnet.com/reviews/candy-crush-saga-android-review/"></iframe>
<h3>Pokemon Sword & Shield</h3>
<iframe width="500" height="300" src="https://www.pcmag.com/reviews/pokemon-swordshield-for-nintendo-switch"></iframe>
Final HTML
<html>
<body>
<h1>Phone Comparison</h1>
<table border="1">
<tr>
<th>Game Title</th>
<th>Release Year</th>
<th>Platform</th>
<th>Price</th>
</tr>
<tr>
<td>Fortnite</td>
<td>2017</td>
<td>Multiple</td>
<td>Free</td>
</tr>
<tr>
<td>Candy Crush Saga</td>
<td>2012</td>
<td>Mobile</td>
<td>Free</td>
</tr>
<tr>
<td>Pokemon Sword & Shield</td>
<td>2019</td>
<td>Nintendo Switch</td>
<td>$59.99</td>
</tr>
</table>
<h3>Fortnite</h3>
<iframe width="500" height="300" src="https://www.pcmag.com/reviews/fortnite-for-pc"></iframe>
<h3>Candy Crush Saga</h3>
<iframe width="500" height="300" src="https://www.cnet.com/reviews/candy-crush-saga-android-review/"></iframe>
<h3>Pokemon Sword & Shield</h3>
<iframe width="500" height="300" src="https://www.pcmag.com/reviews/pokemon-swordshield-for-nintendo-switch"></iframe>
</body>
</html>