Landing Page Exercise
Description
For this assignment, you will create the HTML and CSS for a landing page based on the mockup provided. Your objective is create a functional, responsive site that closely resembles the mockup.
Requirements
The following requirements must be met in order to complete the assignment successfully:
- Download the Landing Page starter files. Inside you will find the landing page mockup and all of the necessary assets.
- You will need to create the HTML and CSS files.
- The HTML and CSS should be valid and well formatted.
- Comments should be provide in the HTML and CSS explaining what your code does and why you chose to use it.
- The landing page should respond to different screen sizes. CSS grid, flexbox, or any combination of the two may be used to create the layout of the page.
- No specific media queries and break points are required, but should be used as necessary.
- The landing page should be functional and visually appealing across multiple browsers.
- The page should use the assets provided. No additional assets should be required beyond the HTML and CSS.
- The completed version of the project will be published to your GitHub Pages site.
Rubric
| Criteria | Excellent | Satisfactory | Marginal | Unsatisfactory |
|---|---|---|---|---|
| 20 Points | 15 Points | 12 Points | 9 Points | |
| Layout | The layout demonstrates superior layout that transitions seamlessly between screen sizes and optimizes on all browsers. | The layout is responsive and optimized for multiple browsers and screen sizes. | The layout is partially responsive, but was not optimized to work well on multiple browsers and screen sizes. | No meaningful attempt was made to create a responsive layout. |
| 20 Points | 15 Points | 12 Points | 9 Points | |
| Design | The landing page provided matching the mockup perfectly | The landing page provided very closely matching the mockup | The landing page provided somewhat matches the mockup | The landing page provide does not resemble the mockup at all |
| 5 Points | 3 Points | 2 Points | ||
| CSS | The CSS is well formatted and valid. | The CSS is valid but poorly formatted | The CSS is invalid | |
| 5 Points | 0 Points | |||
| Comments | Thoughtful and adequate comments were provided | No or inadequate comments were provided |
Maximum Points: 50
Submission
To submit the project, ensure that the folder containing the completed project has been placed inside your GitHub Pages folder on your computer. Then commit all changes and push to GitHub.
Once all changes have been pushed to GitHub, you should be able to view the site by going to:
http://github-username.github.io/project-directory/
After verifying that site is live, submit the URL to the Landing Page assignment on BrightSpace.
NOTE
After pushing the changes to GitHub, it can take a few minutes before the site will become available.