D'Angelo Food Fusion

User Generated

vnzqw3

Programming

CSCI120

Coastal Carolina University

Description

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.

Unformatted Attachment Preview

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
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer


Anonymous
Just what I was looking for! Super helpful.

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Similar Content

Related Tags