Activity: The Boo-Boos in Boo's Website

In this assignment, you will be tasked with fixing Boo the Dog's website, using only the limited information you have and a working reference example. This is a challenging activity. Be prepared to put in 5+ hours for this activity if you are new to coding.

You may be unfamiliar with HTML, CSS, and JavaScript, but try not to get caught up in that fact. Instead, treat this activity as a simple game of "What's different?" and do your best. This activity may take time, but it is very representative of your first few months in the program. The sooner you get comfortable spotting bugs, the less stressed you'll be as a web developer.

Before You Begin

1. Download the complete code by visiting this link to the complete code.

2. Move this folder to somewhere accessible on your computer such as your desktop.

3. Unzip the folder. You will see that it creates a folder titled Broken_and_Working_Code, which holds two folders: BrokenCode and WorkingCode.

4. Open VS Code.

5. Drag the entire unzipped Broken_and_Working_Code folder into your VS Code editor. (Alternatively, you can click File -> Open and select the unzipped Broken_And_Working_Code folder.)

6. Activate VS Code's explorer pane (if it isn't already active) by clicking View -> Explorer, or by clicking the file icon on the left sidebar. This will reveal a sidebar allowing you to flip between the BrokenCode and the WorkingCode.

7002

Instructions

1. In VS Code, select the file GrumpyCat.html in the WorkingCode folder to show the code.

2. Right-click on the screen and then click Open in Browser. This will show you the HTML page in your browser.

3. Once in the browser, take a few moments to get familiar with how the page looks and functions. Click on the various buttons to understand the effect they have on the page.

4. Return to VS Code and select the file BooTheDog.html in the BrokenCode folder. Use the same process to open this file in the browser.

5. Once in the browser, take a few moments to get familiar with the page. You will quickly discover that each of the panels has something that is "broken," either buttons that fail to work or content that is not rendering correctly. 7003

6. For the remainder of this assignment, your task is to flip between the files in the BrokenCode folder and the WorkingCode folder to identify differences that may be the cause for the broken functionality.

7. As you identify issues, correct the code in the BrokenCode files and save those files. Then refresh the BrokenCode folder. If your changes were successful, you should see working functionality. If not, go back to the drawing board!

8. When you are done, copy your BrokenCode folder into the Module-7 subfolder of your prework folder. Include a simple text file that briefly describes each of the errors you found.

Hints

  • This will be a challenging activity; there are no shortcuts here. You need to dig in and find the differences.
  • Each panel has at least one error. Possible errors include missing commas, improper element linking, and others. You'll need to use a discriminating eye to find each of the errors.
  • As a starting point, take a few moments to fix the aesthetic formatting of the code in the BrokenCode folder (i.e., fix the indentation and line breaks between code). This will make things easier to compare.
  • If you have some coding experience under your belt, feel free to consult Google Developer Tools.

Prework Support

Looking for prework support? Our team of tutors are eager to help! Request a tutor session with the following steps:

1. If not already logged in to BCS, login using your credentials (supplied 24 hours after enrollment).

2. Click Support in the top right.

3. Complete the form fields to submit your request:

  • Under Question Category, select "Tutor Request.”

  • Under Question Category, select "Request a Tutor.”

  • Under Currently, Which Sessions Would You Like to Discuss?, select “Prework assignment”.

4. Complete the additional fields and submit your request.