CSET-110 Week 4

Project: Responsive Landing Page

In this project, you can practice your responsive design skills by building a "Landing Page." These are simple sites set up for a specific marketing or advertising campaign. They are where the user lands after clicking an ad or link from an email.

Look at the finished product to see how it responds to different screens sizes. The requirements below list all these changes. Yours doesn't have to look exactly the same, feel free to add your own flair. But make sure you complete the responsive requirements.

Setup

1. Go to the GitHub repository with the starter code.
2. Click the Fork button in the top right to make your own copy of the repository.
3. On your repo, click the green Code button and copy the repo's git URL.
4. Open your terminal and navigate to your folder for projects: cd ~/code
5. Use git to download your repo using the copied URL: git clone <URL>

To submit the project:

1. As you are working, use the Edit-Add-Commit workflow to track your changes with git.
2. When you are done, you can push all the commits to GitHub at once with the git push command.

Requirements

• Fixed full-width header with responsive navigation:
  • Header should stick to the top of the viewport regardless of scrolling at all sizes.
  • Nav links should be a column below the heading on the smallest screens.
  • Nav links should be a row on the right hand side at larger screens
• Centered and contained content:
  • Content should be full-width in a single column at the smallest sizes.
  • Constrain content to a certain width at larger sizes and keep it all centered.
• Responsive featured sections:
  • Each featured section's text should be centered and icons should be hidden on small screens.
  • Show the icons to the left of the text on larger screens and align the content to the left to match at larger sizes.
• Responsive product cards:
  • Product cards should be in a column layout at small sizes.
  • Switch them to a row at larger sizes.

Grading

• 5 pts each for following the requirements as syntactically and semantically as you can.
• 5 pts for semantic HTML.
• 5 pts for following code style guidelines.

Total: 30 pts