Task List
Complete these tasks in order. The tasks start with simple HTML edits, then move into CSS styling and adding content using existing structures.
Task 1: Set Up Your Development Environment
Learning Goal
Set up your development environment.
Instructions
- Move
rockets.zipto your website folder. - Unzip the file.
- Open the folder in Visual Studio Code.
- Open
index.htmlin a browser to confirm the site loads correctly.
Success Check
The Rockets website opens in your browser from your local folder and all three pages are accessible.
Task 2: Change the Team Name
Learning Goal
Learn how text is stored inside HTML pages.
Instructions
- Open
index.html,players.html, andschedule.html. - Find every instance of River Hawk Rockets and change it to a new team name of your choice.
- Save all three files.
Success Check
The team name is changed on all three pages and the pages still load correctly.
Task 3: Update the Navigation Text
Learning Goal
Understand that navigation menus are made of links.
Instructions
- Open each of the three pages.
- Find the navigation link that says Schedule.
- Change only the visible link text to Game Schedule.
- Do not change
href="schedule.html".
Success Check
The menu says Game Schedule on all three pages and the link still opens the schedule page.
Task 4: Rewrite the Hero Section
Learning Goal
Edit page content inside an existing HTML structure.
Instructions
- Open
index.html. - Find the hero section.
- Replace the main heading and paragraph with your own version for your rebranded team or organization.
Success Check
The homepage has a new hero heading and paragraph.
Task 5: Edit Player Profiles
Learning Goal
Modify repeated HTML content blocks.
Instructions
- Open
players.html. - Choose at least three player cards.
- Change the player names, years, hometowns, or short descriptions.
Success Check
At least three player profiles are updated.
Task 6: Update the Schedule
Learning Goal
Practice editing HTML tables.
Instructions
- Open
schedule.html. - Change the opponent, date, time, or location for at least five matches.
Success Check
At least five schedule rows have new information.
Task 7: Change the Color Scheme
Learning Goal
Use CSS custom properties to redesign a site.
Instructions
- Open
revised.css. - Find the
:rootblock at the top of the file. - Change
primaryColor1,primaryColor2,accentColor1, andaccentColor2to new color values.
Success Check
The site uses a new color scheme and the text is still readable.
Task 8: Change the Fonts
Learning Goal
Modify typography using CSS variables.
Instructions
- In
revised.css, findheadingFontandbodyFont. - Change them to different web-safe fonts such as Georgia, Verdana, Trebuchet MS, or Times New Roman.
Success Check
The website font style has changed.
Task 9: Modify Card Appearance
Learning Goal
Understand reusable CSS classes.
Instructions
- In
revised.css, find.cardand.player-card. - Experiment with
border-radiusto change the corner rounding. - Experiment with
box-shadowto change the card shadow.
Success Check
The cards look different but remain readable and organized.
Task 10: Add a New Player
Learning Goal
Duplicate and modify an existing HTML structure.
Instructions
- Open
players.html. - Copy one complete player-card block.
- Paste it after the last player card.
- Change the name, year, and hometown to new values.
Success Check
An additional player appears and the layout still works.
Task 11: Add a New Match
Learning Goal
Extend an HTML table by adding a new row.
Instructions
- Open
schedule.html. - Copy one complete table row (
<tr>…</tr>). - Paste it before the closing
</table>tag. - Update the date, opponent, location, and time.
Success Check
An additional match appears in the schedule.
Task 12: Final Rebrand Challenge
Learning Goal
Apply HTML and CSS skills to create a polished final version.
Instructions
- Transform the site into a new team or campus organization using only the existing page structures.
- Do not create new pages or new sections.
- Review every page for consistency — names, colors, fonts, and content should all match your rebrand.
Success Check
The final website looks intentional, complete, and professional.
Task 13: Publish the Site
Learning Goal
Learn how to publish a completed website to a live server.
Instructions
- Review all three pages one final time in your browser and confirm everything looks correct.
- Connect to your assigned server using your FTP client.
- Upload the complete project folder to your assigned server folder.
- Open the live URL and test
index.html,players.html, andschedule.html. - Copy the live URL — you will submit it as part of your assignment.
Success Check
The finished website is live, all three pages open correctly, and you have the URL ready to submit.