CSC 223 — Authoring for the Web

Responsive Landing Page

Overview

In this assignment you'll use HTML, CSS, and Media Queries to create a responsive landing page.

Note that there are two main types of landing pages:

1. Lead Generation pages are designed to capture a customer's contact information in order to generate a sales lead of some type.

2. Click Through pages are designed to convince a customer to click on something, usually a targeted advertisement for a specific product.

Here are several examples of responsive landing pages.

• The SVU Music Scholarship site

• Wistia's sign up page

• The Trulia Real Estate site

• AirBnB's business traveller page

Assignment

1. Create a new html page in your assignments folder. (You can name the assignment files whatever you want, as long as they are unique, end in .html, and don't contain spaces)

2. Add the necessary HTML and CSS to create a responsive landing page. Your CSS should employ all of the design concepts we've been learning, including at least one media query breakpoint with alternate styling. Make sure to test that your media queries work properly when you resize the window.

3. Modify your index.html if necessary so that your assignment list correctly links to the new page.

4. Use git or GitHub Desktop to commit those changes and push them to GitHub.

5. Submit the url to your github pages site to MySVU. (This should be something like https://USERNAME.github.io/REPOSITORYNAME).