My third Front-end Web Development Techdegree project.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
css
README.md
index.html

README.md

techdegree-project-3


Form Structure

  1. [DONE] Only one tag is being used to contain all the form elements.
  2. [DONE] Fieldsets and legends have been added for each of the following sections:
  • "Contact Information" section of the page, and
  • The "Newsletter" section of the page

Form Fields and Labels

  1. [DONE] Includes all of the required form fields:
  • text input
  • email input
  • telephone input
  • select menu
  • checkboxes
  • radio buttons
  • textfield
  • submit button
  1. [DONE] Each form field includes the following attributes:
  • input: has id, type and name attributes.
  • select and textarea: includes id and name attributes.
  1. [DONE] Each form field includes a label, and each label’s for attribute is associated with a unique id on its corresponding form field.

Placeholder Text

  1. [DONE] The input field's placeholder attribute has been used to add the text "required" to:
  • the Full Name field
  • the Email address field

Exceeds Expectations

  1. [DONE] Form contains additional placeholder text for other text fields.
  2. [DONE] Uses the required attribute to add HTML5 Validation for required fields.

Mobile First

  1. [DONE] The HTML file include the viewport meta tag in the head of each document.
  2. [DONE] A mobile-first approach is utilized using min-width properties for media queries.
  3. [DONE] Appropriate media query is in place to match the screen size for tablet and desktop screens at 768px.

Design and Styling

  1. [DONE] Roughly matches layout of the mobile and desktop mockups. General spacing and arrangement of the elements matches the design of the mockups for:
  • Mobile
  • Desktop
  1. [DONE] The label text position matches the mockups:
  • Above the form field for mobile.
  • To the left side of the form field for desktop.
  1. [DONE] Uses a Google Font.
  2. [DONE] Includes focus states for text fields.

Exceeds Expecations

BOTH of the following additional styling enhancements have been added to the form:

  1. [DONE] Change the background color for at least ONE of the main sections of the site.
  2. [DONE] Uses CSS transitions for focus states.

Valid Code

  1. [DONE] HTML and CSS code passes the validation.
  2. [DONE] HTML and CSS errors are accepted exceptions