Skip to content

Week 11 Coding Practice

Purpose

Practice Floats, forms, and styling of a form

Textbook Reference

  • Chapter 15: Floating and Positioning (pages 387-398, 405-416)

Instructions

  1. Download the practice11.zip and save it into your practice folder for this course.
  2. Open the webpage, index.html in VS Code, and the browser
  3. Familiarize yourself with the HTML and CSS already present.

Center the <main> element

  1. Provide a width of 60% to the <main> element

  2. Center the <main> element to the viewport (browser window)

    Centering a Block Element

    Remember, to center a block element you need to target the margins on the left and the right side. Use the shortcut property of margin: 0 auto; to set a zero margin on the top and bottom, and an automatically adjusting margin on the left and right.

Float Elements

  1. Create a style for the <img> and give it a width of 40%
  2. Float the image to the left
  3. Give the image a right and bottom margin

  4. Stop the float at the <h2> element by using the clear property.

    Check that the float is applied correctly

    The text, Customer Satisfaction Survey, should not float around the image for any viewport size.

Build the Form

  1. Begin your form under the comment <!-- Start form here -->
  2. Include an action attribute with the server address: http://itins3.madisoncollege.edu/echo.php
  3. Include the method attribute with the value of post

Use the information provided below to complete the rest of the form elements

Select Menu

  1. Create a label that reads: How did you hear about us?
  2. Create a select menu with the options: Radio, Television, Internet
  3. Connect the <label> and the <select> with the for and id attributes
    • Remember, the name attribute belongs in the <select> element, and value attributes containing the data sent to the server should be added to each <option> element.

Checkboxes

  1. Surround the checkboxes in a <fieldset> element
  2. Add a <legend> element that reads: What type of tart did you order?
  3. Checkboxes are for: Strawberry, Blueberry, Custard, Raspberry
  4. Create a <label> for each checkbox.
  5. Connect the <label>and the <input> with the for and id attributes
    • Remember, checkboxes have different values in their name attribute and should have a value attribute containing the data sent to the server.

Radio Buttons

  1. Surround the radio buttons in a <fieldset>
  2. Add a <legend> that reads: Were you satisfied with your purchase?
  3. Radio Buttons are for: Yes, No
  4. Make the "Yes" radio button selected on default
  5. Create a <label> for each radio button
  6. Connect the <label> and the <input> with the for and id attributes
    • Remember, radio buttons have the same value in their name attribute and should have a value attribute containing the data sent to the server.

Textarea

  1. Create a label that reads: Do you have any improvement suggestions for us?
  2. Create a textarea input
  3. Connect the <label> and the <textarea>with the for and id attributes
    • Remember to use the <textarea> element and not an<input> element

Name Input

  1. Create a label that reads: Name
  2. Create a text input for the Name label
  3. Add a placeholder that reads, “Optional”
  4. Connect the <label> and the <input> with the for and id attributes

Submit

  1. The button should read “Submit Survey” on the webpage. Use the value attribute

    • Remember that buttons do not need a name to pass to the server

Reset

  1. The button should read “Clear” on the webpage. Use the value attribute.

    • Remember that buttons do not need a name to pass to the server

Test Your Work

  1. Ensure that all form fields must make it to the server:

    Practice 11 Echo Ouput

Style Your Form

  1. Match the style shown in the Sample Output below.
  2. Colors and font choices can vary, but the layout, spacing, and positioning should be the same.

Sample Output

Sample Form Output

HTML 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 practice11 folder
    • Name the PDF indexValidation.pdf.

CSS Validation

  1. Go to https://jigsaw.w3.org/css-validator/
  2. Click on the by File Upload option
  3. Click on the Choose file button and navigate to the location of your CSS document.
  4. Click the Check button
  5. Print and save as a PDF and save the validation in a folder called validations in your practice11 folder
    • Name the PDF cssValidation.pdf

Grading Criteria

  • The correct file directory structure exists in the practice10 folder along with the HTML and CSS validation.
  • All course coding standards have been followed.
  • Correct centering of the <main> element
  • Correct of the float property.
  • All form fields are implemented to the practice instructions
  • The CSS styling matching the sample output (color and font choices may vary).
  • Placeholder text has been added to first name, last name, password, and instruction fields.
  • Explicit labels have been added to every form field.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 9 in Brightspace (Module 2 > Week 11 > Week 11 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?


5. How does using a float change the normal flow of elements on a page? What effect does the clear property have on a float?

Part 2: Upload .zip

  1. Compress your entire practice11 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)
      • index.css
    • validations (folder)
      • 1 HTML validation file
      • 1 CSS validation file
    • 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"