Unit 01 Mini-Project: Landing Page

In this mini-project, you will build a landing page using HTML and CSS. While you will be responsible for your own landing page, you will work in a group to brainstorm and share ideas.

Instructions

Work in your group to implement the following user stories:

• As a client, I want to view a single webpage that collects a visitor's contact information.

• As a client, I want the landing page to have a header and footer.

• As a client, I want the landing page to have an image with a caption.

• As a client, I want the landing page to have a contact form.

• As a client, I want the landing page to have a polished and accessible UI.

Acceptance Criteria

• It's done when the page uses semantic HTML elements.

• It's done when the page uses universal, element, and class selectors in CSS.

• It's done when the page features at least three colors in the design.

• It's done when the page uses a single font and font family for all text.

• It's done when the page uses at least two heading elements (<h1> through <h6>).

• It's done when the header is fixed to the top of the page on scroll.

• It's done when the header contains a navigation bar with three links that display inline, including a contact link.

• It's done when, if the contact link is clicked, the page jumps directly to the contact form.

• It's done when the contact form includes input elements for name and email.

• It's done when the contact form includes a Send button.

• It's done when the image includes a descriptive alt attribute.

• It's done when the page is deployed to GitHub Pages.

💡 Notes

Follow these instructions to deploy your project to GitHub Pages:

1. Create a new repository on your GitHub account and clone it to your computer.

2. When you're ready to deploy, use the git add, git commit, and git push commands to save and push your code to your GitHub repository.

3. Navigate to your GitHub repository in the browser and then select the Settings tab on the right side of the page.

4. On the Settings page, select Pages on the left side of the page. On the GitHub Pages screen, choose main in the dropdown under Source.

5. Navigate to <your-github-username.github.io/your-repository-name> and you will find that your new webpage has gone live! For example, if your GitHub username is "lernantino" and the project is "css-demo-site", then your URL would be <lernantino.github.io/css-demo-site>.

You can also refer to this YouTube video on enabling GitHub Pages for more guidance.

Important: It might take a few minutes for GitHub pages to display your site correctly. If your project does not deploy or display correctly, check that all file paths in your application are relative and use the right casing. GitHub is case-sensitive, an inccorect capital or lowercase letter could cause problems in deployment.

💡 Hints

Refer to the documentation:

• MDN Web Docs on HTML elements

• MDN Web Docs on color

• MDN Web Docs on font

• MDN Web Docs on HTML section heading elements

• MDN Web Docs on how to structure a web form

• MDN Web Docs on the button element

• MDN Web Docs on the figure element

🏆 Bonus

If you have completed this activity, work through the following challenge with your group to further your knowledge:

• How can CSS be used to apply a different style to an <a> element when a cursor points at it?

Use Google or another search engine to research this.

---

© 2022 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.