Assignment 4 - Landing Page with a Hero Section

• 20% of Final Grade | Due October 1 11:59pm 2021

Client User Stories

• Create a landing page for the other pages that you've designed
• Feature a hero section
• Include a call to action to a form
• Integrate a third party service
• Site must have:
  • active navigation
  • hero section with a call to action
  • content section that provides general information about the site
  • third party integration
  • form (can be a separate page if you prefer)
  • footer

Marking Rubric

Each of the following will be marked out of 4 points (for a total of 20 points), based on the requirements below:

Code Quality

• Page is marked up with proper semantic structural elements
  • header, nav, main, article, footer
• Accessibility best practices
  • contrast ratio below AA for text size
  • images have proper alt text
• Use best practices with file/directory names, commenting, and indentation
  • 2 spaces per indent
  • no spaces in file names, use dashes or underscores instead
  • In general, use lower case characters except for README file name and DOCTYPES
  • Filenames should be short but descriptive (< 25 characters)

1. Hero Section

• at least 1 locally hosted image using either HTML or CSS
• a heading using h1 tag
• a tagline using p tag
• a call to action
  • using a a element stylized like a button that connects to your form section

3. Third Party Integration and Page Content

• There must be a section of any type of content between your hero section and the API integration content

• Integrate a third party app onto your page

  • Google Maps, Youtube, Facebook, Twitter, TikTok...
    • Google map APIs as example
  • this can't be a static image

2. Form Section

• Integrate a third party contact form using a form submission service such as formspree
  • Your call to action should take the user to this
  • It can be on a different page
    • if on a different page, you must keep the nav and footer

3. Responsiveness

• Hero section text is readable at all screen widths
  • text does not overlap with a busy image
  • if overlap, use backgrounds and shading so the text stands out
• Background images can be removed on mobile
• font-size is smaller on mobile than on desktop
• Navigation bar is usable on mobile screen
• text is readable at all widths

4. Hamburger Menu

• Site navigation should be responsive and switch to a hamburger menu at small screen widths
• Hamburger menu should visually indicate interactivity

5. Project Documentation

• Include a README.md in your project that contains:
  • Course Title:
  • Author Name:
  • Links to
    • Github Repo
    • Github Pages
  • Code Review (less than 500 words or point form)
    • Outline a bug that you ran into
    • How did you fix it?
    • What benefits/limits came out of your solution beyond the immediate goal
  • Attributions

Previous assignment Bonus Points Option (1 point per assignment)

• If your Assignment 4 landing page has 0 html syntax errors, and all above noted content is present.
• Fix an issue on any previous assignment to regain points
• Along with your Brightspace submission, send a link of the git commit(s) where you made the changes that fixed the issue.
  • Please make a quick note on what issue this is meant to fix
• The html files being updated need to be in your a4 codebase

Submission Requirements

• Push this assignment to a repo named cpnt260-a4
• ZIP all files required for the site to operate and upload to Brightspace.
• Leave a link to the following as a comment in your Brightspace submission (this is duplicated in your readme but comes in handy sometimes):
• GH repo
• GH Pages site
• Commit links for past page updates