Skip to content

Week 5 Coding Practice

Purpose

Create web links to build connections in webpages.

Textbook Reference

Chapter 5: Marking up Text

Instructions

Directory Structure

  1. Download the practice05 and save it into your practice folder for this course.
  2. Open the webpage, index.html in VS Code, and the browser.
  3. Spend a moment reviewing the folder structure and HTML markup.

On the index.html page, there is a bulleted list:

  1. Make the text “My cat, Yarn Ball” a link to the myCat.html document
  2. Make the text “My rabbit, Bunny aka Mr. Bunchley” a link to the myRabbit.html page
  3. Place the unordered list inside a navigation element

❗ Note: Make sure you adjust any indentations or line breaks as needed.

  1. In the footer on both the myRabbit.html and the myCat.html page, add a mailto protocol in a link to “C.Cheddar” using the email address c.cheddar@email.com

Link to a Specific Point in a Page

  1. On the myCat.html page, create an id on the <h1>My Cat<h1> element
  2. After the last <article>, create a link that reads, “Back to Top”
  3. When the user clicks on this link, it should take them to the top of the myCat.html page.

❗ Note: Make sure you are using a fragment link, and not just reloading the myCat.html page

Link to a Specific Point on Another Page

  1. On the myCat.html page in the footer, create an id for the owner information
  2. On the index.html page, create a fragment link (where it makes the most logical sense to you) that takes the user to the owner information located at the bottom of the myCat.html page
  1. On the index.html page, create a link (where it makes the most logical sense to you) to the Dane County Humane Society https://www.giveshelter.org/
  2. Make this link open in a new tab

Add Images

  1. On the myRabbit.html page, add the image bunny.jpg at the top of the main element.
    • Don’t forget to add the alt attribute
  2. Include a tool tip on this image
  1. On both the myrabbit.html and myCat.html page, use the homeButton.png to create a link back to index.html after the <h2> inside the header.

Bonus!

Modify ANY of the “Blah…” text values on both the myRabbit.html and the myCat.html to something that amuses you!

Validation

  1. Go to https://validator.w3.org/
  2. Click on the Validate by File Upload
  3. Click on the Choose file button and navigate to the location of your HTML document.
  4. Click the Check button
  5. Print it as a PDF and save it into a folder named validations in your practice05 folder
  6. Name the PDF indexValidation.pdf.
  7. Repeat this process for all html pages, renaming the file per page

Grading Criteria

  • The correct file directory structure exists in the practice05 folder along with the HTML validation.
  • All course coding standards have been followed. Standards 1 - 15 apply.
  • All links navigate to the correct location and are semantically correct.
  • All images render correctly and include the required attributes.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 5 in Brightspace (Module 1 > Week 5 > Week 5 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.
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 part of the learning or coding process did you find most challenging? How did you overcome it?


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

Part 2: Upload .zip

  1. Compress your entire practice05 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)
      • with images
    • stylesheets (folder)
    • validations (folder)
      • 3 HTML validation file
    • index.html
    • myCat.html
    • myRabbit.html

  3. Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.

  4. Click "Submit"