Assignment #7: The Boo Boos in Boo's Website

Overview:

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 another challenging activity. Be prepared to put in 5+ hours on this activity if you are new to coding.

Again, we know that you may be unfamiliar with HTML, CSS, and Javascript, but treat this like Where's Waldo. Don't get caught up in the fact that this is scary code. Instead, treat this activity as a simple game of What's different?

Remember, do your best here. 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 will be in the class.

Before You Begin:

1. Download the complete code by visiting this link on GitHub and by clicking View Raw.

2. Move this folder to somewhere accessible on your computer like the Desktop.

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

4. Open up Sublime Text editor.

5. Then drag the entire unzipped Broken_and_Working_Code folder into your Sublime editor. (Alternatively, you can click File -> Open Folder and can select the unzipped Broken_And_Working_Code folder.)

6. Then activate the Sublime editor's side bar (if it isn't already active) by clicking View -> Side Bar. This will reveal a side bar, allowing you to flip between the BrokenCode and the WorkingCode.

Instructions:

1. At this point, you are all set to begin the exercise. In Sublime, select the file GrumpyCat.html in the WorkingCode folder to show the code. Then right-click on the screen and click Open in Browser. This will show you the HTML page in your browser. Once in the browser, take a few moments to get familiar with how the page looks and how it functions. Click on the various buttons to understand the effect they have on the page.

2. Now return to Sublime and select the file BooTheDog.html in the BrokenCode folder. Use the same process to open this file in the browser. 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 broken—either buttons that fail to work or content that is failing to be rendered correctly.

   

3. 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.

4. 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... well, back to the drawing board!

5. Once you are done, copy your BrokenCode folder into your Pre-work Submission folder. Include in this folder a simple text file that briefly describes each of the errors you found.

Hints:

• This will be a challenging activity, no doubt! There are no shortcuts here. You need to dig in and to 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 are advanced look into Google Developer Tools as a tool for helping here.

Copyright

Trilogy Education Services © 2017. All Rights Reserved.