Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amylloyd/mini-project-week-1


https://github.com/amylloyd/mini-project-week-1

Last synced: 8 days ago
JSON representation

Awesome Lists containing this project

README 

        
# Module 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 (`
` through `
`).



* 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.



## Sample Page

* The following screenshot is provided as an **example** of what you can do, but be creative! As long as you complete all of the acceptance criterions, any landing page is acceptable. 



* Note: The **Coming Soon box** is an image that is provided in the `assets/image-1.png` directory. 



![The landing page contains a header, footer, a main section page with an image provided to display in the middle of the screen. Some text and a Contact Me form is also included.](./assets/sample-page.png)



## 💡 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 Branch. Click the Save button.



5. Navigate to  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 .



> **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 incorrect capital or lowercase letter could cause problems in deployment.



## 💡 Hints



Refer to the documentation:



* [MDN Web Docs on HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)



* [MDN Web Docs on color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)



* [MDN Web Docs on font](https://developer.mozilla.org/en-US/docs/Web/CSS/font)



* [MDN Web Docs on HTML section heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)



* [MDN Web Docs on how to structure a web form](https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form)



* [MDN Web Docs on the button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)



* [MDN Web Docs on the figure element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)



* [Full-Stack Blog HTML Cheatsheet](https://coding-boot-camp.github.io/full-stack/html/html-cheatsheet)



## 🏆 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 `` element when a cursor points at it?



Use [Google](https://www.google.com) or another search engine to research this.



---



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