Skip to content

Week 1 Coding Practice

Purpose

View the source of a web page in a browser.

Textbook Reference

Practice 2-1 View Source (page 29)

Instructions

Create the Directory Structure

Create a Web Development folder on your hard drive or OneDrive if you do not already have one. Create a subfolder named practice in your if you do not already have one.

  1. Create a subfolder named practice01 in your practice folder.

  2. Inside your practice01 folder, you will need two subfolders, images, and styleSheets.

    • Notice that there are no spaces or underscores in our folder names beyond the Web Development folder. You should have a folder structure like the one shown below. It does not have to match exactly – but the structure should be consistent for all practice, demos, and projects moving forward.

    practice 1 directory structure

Gather the HTML page for the Source Code

  1. Open a Chrome browser page on your desktop
  2. Navigate to https://www.learningwebdesign.com/5e/kitchen.html
  3. Using the Chrome browser, view the page source:
    • Right-click on the page and select View Page Source
    • Take note of the HTML being displayed.
  4. Save the kitchen.html source document by right clicking the source page in the browser.
  5. Select Save As and save the document in the execise01 folder using the filename kitchen.html

  6. Make sure to save the file in the Format: Webpage, HTML Only – The screen captures below may look different depending on if you have Windows or Mac or if any updates have occurred recently.

    save as save as type

  7. Validate that the kitchen.html opens in your browser by viewing it in VS Code with Live Preview. Note that the images will not appear on the web page.

For Fun! (optional)

Add the images

  1. Save the food.png and the spoon.png images to the images folder within the practice01 folder.
  2. There is a HTML update that needs to be made to get the images to appear. HINT: it involves updating the path to the image in the <img> element.
  3. Verify that the images appear in the browser, and again using the VS Code Live Preview function.

Note: it's okay if you can't figure this part out! It's more tricky that it looks, and we'll learn how to work with images soon!

Grading Criteria

  • The correct file directory structure exists in the practice01 folder.
  • The kitchen.html source file is correctly saved as an html file in the practice01 folder.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 1 in Brightspace (Module 1 > Week 1 > Week 1 Coding Practice).
  2. Copy the below text (there is a copy icon in the upper-right of the textarea) and paste it into the Comments section.
  3. Answer the questions in the Brightspace.

Weekly Reflections - Tip

You may find it helpful to copy and paste the questions below in word document, or other text editor, and writing your answers there before pasting them into Brightspace.

1. How are you doing? Are you encountering any issues preventing you from completing this week's assignments? What can I do to better support you this week?


2. What did you find particularly insightful this week?


3. What challenges (if any) did you encounter in your learning this week?


4. What questions (if any) do you have about the material covered this week?


5. In your own words, explain how the client and server communicate to display a web page. Include the roles of HTTP requests and responses, and mention any key components involved in the process, such as the browser, web server, and any necessary files (HTML, CSS, JavaScript).

Part 2: Upload .zip

  1. Compress your entire practice01 folder to a .zip (zipped) file.
  2. Do not zip the practice or Web Development folders. You should have the following files/folder in the zip file:
    • images (folder)
    • styleSheets (folder)
    • kitchen.html
  3. Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.
  4. Click "Submit"