Skip to content

Week 3 Coding Practice

Purpose

Create a web page with VS Code.

Textbook Reference

Chapter 4: Creating a Simple Web Page

Instructions

Directory Structure

  1. In the practice folder you’ve created for this course, create a new folder called practice03.
  2. Inside the practice03 folder create three more folders named stylesheets, images, and validations. NO spaces in folder or in file names!
  3. This is the same directory structure we will be using for every practice.

Create the Default Page

  1. Open the practice03 folder in VS Code.
  2. Create a new file named index.html (you must include the .html)

  3. Save this file to your practice03 folder. You should have a directory structure like the image below.

    directory structure

Build the HTML Structure

  1. Open the index.html file in VS Code.

  2. Add the correct HTML structure to make a web page. Make sure to include:

    • The HTML <!DOCTYPE>
    • An HTML Comment with your first/last name and date.
    • A <html> element with the language attribute
    • A <head> element with the <meta> and <title> child elements
      • Give your web page a title of "My First Webpage"

    • A <body> element.

      • Place the following text within the <body>
      My First Webpage

Website Development

I stand by my method of teaching HTML the old-fashioned way
– by hand. There's no better way to truly understand how markup
works than typing it out, one tag at a time, then opening your
page in a browser. It doesn't take long to develop a feel for
marking up documents properly.

Created on MM/DD/YYYY

    ❗ Don't forget both the opening and closing tags!

    Text wrapping

    It’s important when using copy/paste to be aware of how lines break in your VS Code editor. The lines should wrap naturally. In most cases, you will need to avoid using a set character line limit in your settings and you will need to remove the extra line breaks by backspacing or editing the content in your VS Code editor.

Render the Web Page

Render means to “provide or give” or “cause to be or become; make.” In web development, this term refers to viewing our code in a browser. There are a few ways to do this:

View a Web Page through the File Directory

  • In Chrome, drag and drop your new HTML file into the browser window.
  • To see changes, you must save and refresh your browser.

Use VS Code Live Preview

  • In VS Code, use the Show Preview button (top right)
  • Changes automatically appear - no refresh needed.

Use VS Code Live Server

  • In VS Code, use the Go Live button (bottom right)
  • To see changes, you must save - no browser refresh is needed.

Add Semantic Markup

  1. Add the correct Semantic markup to the text in the <body>. Include the following elements:

    • One <h1> element
    • One <h2> element
    • Two <p> elements - Consider the text, Created on MM/DD/YYYY, one paragraph.

    ❗ Don't forget both the opening and closing tags!

    Indentation Reminder!

    Elements inside another element should be indented by four spaces. Indentation improves the readability of the HTML but does not affect the website’s appearance in the browser.

  2. Render your webpage in the browser.

Add an Image

  1. Download the blackgoose.png file and save it to your images folder.
  2. Add the image to your webpage before the Created on MM/DD/YYYY paragraph.

Add Styles

Our webpage is bland so far. HTML alone doesn't provide any fancy presentation. It only has very basic styling, as you saw with the visual difference from the heading and paragraph elements.

To add more impactful styles, we need a Stylesheet. For this practice, we will be adding an embedded (internal) stylesheet. This is the only time in this course we will use this type of style. Eventually, our styles will live in the stylesheets folder in a separate document.

  1. Below the <title> element add an opening <style> and a closing </style> tag.

    <style> 

</style>

  2. Add a rule for your <h1> element to make the text red. 

    <style> 
  h1 { 
    color: red; 
  } 
</style>
    You just added a style rule or declaration, which is composed of a selector, property, and value.

    css anatomy

Add More Styles

  1. Add a new CSS property and value pair text-align: center; to the h1 selector.

    <style> 
  h1 { 
    color: red; 
    text-align: center; 
  } 
</style>

  2. Create a new declaration to style p elements (paragraph elements)

    <style> 
  h1 { 
    color: red; 
    text-align: center; 
  } 
  p { 
    background-color: beige; 
    font-size: 16pt; 
  } 
</style>

  3. Create a new declaration to style the <h2> element. 

    <style> 
  h1 { 
    color: red; 
    text-align: center; 
  } 
  p { 
    background-color: beige; 
    font-size: 16pt; 
  } 
  h2 {border: 1px solid blue;} 
</style>

Sample Output

sample output of practice 3

Text Wrapping

Where your content wraps to a new line will be different depending on the width of your viewport/browser

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 practice03 folder
  6. Name the PDF htmlValidation.pdf.

Grading Criteria

  • The correct file directory structure exists in the practice03 folder along with HTML validation.
  • All course coding standards have been followed. Standards 1 - 13 apply.
  • The correct HTML elements are used.
  • The correct CSS styles have been applied.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 3 in Brightspace (Module 1 > Week 3 > Week 3 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 part of the 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?


5. Pick a specific element you used in your HTML code. How would you explain what that element does to someone unfamiliar with HTML?

Part 2: Upload .zip

  1. Compress your entire practice03 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 image
    • validations (folder)
    • index.html

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

  4. Click "Submit"