To practice your HTML and CSS skills, we are expecting you to individually develop the following elements using HTML and CSS. This project is meant to act as practice for your final project and an opportunity to get clarification on where HTML/CSS skills may require a bit of work.
All code must be completed individually. Any plagiarism will result in a grade of zero.
Before your lab time on Nov 2/3.
10% of your final grade.
For this project you will be given two weeks to complete it. We will not be checking for weekly deliverables so it is up to you to bring your work in and seek feedback as you may need.
While completing this project, we also ask that you keep track of resources you draw on. You are welcome to learn and improve your completion of this project using resources from the class or online, but you must cite which resources you used as comments in the code.
Any plagiarized code will result in an immediate grade of zero. So please ensure that code is cited appropriately.
Starting Oct 19/20
- Build the following items using valid and semantic HTML5 in a single .html page:
Please ensure that each of these items is made separately and clearly labelled in the HTML page. Make use of HTML5 Doctor to help you determine which elements are most sensible to use.
- Three heading levels
- A paragraph with text links
- A navigation bar with three links
- An image with a caption
- An link where both the image and text form the link
- A table with three rows and five columns
- Using valid CSS3, style the items to clearly demonstrate the following:
Ensure that each of the items being styled show design consideration just as you would with any other designed document. A portion of your grade is on the effectiveness of the hierarchy, demonstration of interactivity, and clarifying relationships within the elements being built. Make use of the Mozilla Developer Network's CSS Reference to help you look up different properties that you may want to change.
- Font choices and hierarchy in type (Three heading levels)
- Font choices and interactivity within text (A paragraph with text links)
- Button styling and interactivity with navigation (A navigation bar with three links)
- Clarifying relationship between image/text (An image with a caption)
- Interactivity with image/text forming a link (An image and text link)
- Table styling and font hierarchy (A table with three rows and five columns)
- In both your CSS and HTML insert comments indicating what resource(s) you used to help you complete the project, including what they helped you with. Some examples:
- In your HTML: <!-- Used https://css-tricks.com/snippets/html/html5-page-structure/ to help with the basic structure of an HTML5 page. -->
- In your CSS: /* Used the Feb 28th tutorial materials from class to recap how ems and rems work */
Final deliverables are due to Canvas before your Nov 2/3 lab and make sure to double-check all your submitted files to ensure they can be opened. Final submission is 1 ZIP file, which includes all necessary folders, HTML and CSS files for the pages to work as specified in the instructions.
project will be graded on the following criteria:
- Valid HTML5 (2pts)
- Valid CSS3 (2pts)
- All requested elements built (2pts)
- HTML markup is semantically appropriate (1pt)
- Comments included in HTML and CSS indicating resources used (1pt)
- Code appropriately indented and file/folder structure is clean (1pt)
- Demonstrates effective styling of elements (1pts)