CSCI120 Coastal Carolina University D’Angelo Food Fusion Website Project Return to your Food Fusion website. Our goal is to gain a better understanding of

CSCI120 Coastal Carolina University D’Angelo Food Fusion Website Project Return to your Food Fusion website. Our goal is to gain a better understanding of how this website is performing in terms of speed and screen size responsiveness.You should have already completed the Chapter 4 project before this one. As you complete the tasks, you’ll save your screenshot images into a chapter1/project/images folder. I will link the rest of information. Chapter 1 Project – Using Developer Tools to see How the Website Works
Return to your Food Fusion website. Our goal is to gain a better understanding of how this
website is performing in terms of speed and screen size responsiveness.
You should have already completed the Chapter 4 project before this one. As you complete the
tasks, you’ll save your screenshot images into a chapter1/project/images folder. Then create an
HTML page called index.html inside the chapter1/project/ folder, and insert all your screenshots,
including paragraphs above each one with the Screenshot name. (Replace X with the
correct letter. Or, even better, put the images in elements with the titles in
elements. See w3schools for more details on these element types.
Setup
Use the appropriate URL to access your Chapter 4 index.html page from the web server, using
the Chrome browser. Open the Chrome Developer Tools (Right-click on page ? Inspect).
Step 1. Examine index.html page elements using “Elements” tab.
Using the Element Selector option, select the ?nav ?element on your page. Use the Styles to tab
to temporarily modify the nav element by making its background green and text color orange.
You may have to add a style rule here, with the “+” button. Take a screenshot that shows the
modified page on the left, with the Developer Tool code on the right. Label it? Screenshot A.
Step 2. View the index page as it would appear on various devices, using the Device
toolbar. Take the following screenshots:
? Screenshot B – index page viewed as on iPhone 5, showing the device frame, in portrait
mode
? Screenshot C – index page viewed as on Nexus 6P, showing the device frame, in
landscape mode (rotated)
? Screenshot D – index page viewed on custom Responsive screen, sized at 300px wide
by 500 px tall
Step 3. Examine the network requests associated with retrieving your breakfast.html
page.
Still showing the index page, select the network tab in Developer tools and clear any results.
Take the following screenshots:
? Screenshot E – initial network screen empty, showing no data
? Screenshot F – network screen after choosing the “Breakfast” menu option from the
index page. The network screen should now show all the requests associated with
retrieving the breakfast page.
? Screenshot G – network screen showing breakfast.html data, sorted by size, with largest
response at the top
? Screenshot H – network screen showing breakfast.html data, sorted by time, with longest
response time at the top
Step 4. View the request sent when you click the survey.html Submit button.
Change pages to the survey page. Fill out the survey. Clear the data from the network tab, and
then click the survey Submit button. The network screen should show the request. Double-click
on the main request to view the details, specifically the Query Parameters section.
? Screenshot I – Query parameters section of the Request, showing your form parameters
and the values you selected.
Step 5.
UPLOAD the entire csci120 directory (and all contents) to the web server.

Purchase answer to see full
attachment