Assignment 3 CSS Styles
Weight: 15%
Introduction In this Assignment, you will have the opportunity to use all of the skills and techniques that you have developed throughout the term. Specifically, for this Assignment, you will create an index page for a fictitious online shop; in Assignment 4, you will be creating two more pages for the same website. You have been given a .psd wireframe with five distinct areas:
1. navigation 2. header / banner 3. about us 4. articles (starting with succulents) 5. footer
Using your 960 pixel wide center page framework, you will recreate the provided wireframe as a fixed-width website.
Note: the provided wireframe is wider that 960 pixels. This is to demonstrate what your website will look like on a device with a larger screen.
Site Build 1. Download all of the required files for this Assignment. Next, download a copy of the center-page-framework from Moodle and unzip it. 2. Save out all of the required images from your wireframe. Ensure that the image file formats you are choosing are appropriate. Your goal is to strike a balance between having the smallest file sizes and the highest quality possible.
Note: you should have seven (7) images total. Two (2) of these images should be the light and dark versions of your shop logo.
3. Begin migrating the content from your Photoshop document into your index.html file. Ensure that you are using the most appropriate (i.e. semantic) markup. You should have a well-structured, meaningful HTML document before applying any styles. 4. Add moot hyperlinks (i.e. anchor tags that have an href attribute value of ‘#’) to the following content:
1. every item in your top-level navigation menu, including your site logo 2. your call to action button in the site header 3. both ‘read more’ links at the bottom of either article 4. every item in the first two columns of your footer
5. Check your document outline using the following service:
https://gsnedders.html5.org/outliner/ Your document outline should demonstrate logical, nested groupings of your content. It should not have any Untitled Sections. 6. Your wireframe uses fonts from Google Fonts. Using your Type Tool [ T ] in Photoshop, check to see what they are and what font styles or weights you require; then, go find them on Google Fonts.
https://fonts.google.com/ Copy and paste the required code into your HTML and your CSS. 7. Start styling your website using CSS. Be especially mindful of the following things:
1. container background and font colours 2. distances between elements 3. hover states for hyperlinks
8. Validate your HTML using the following service:
https://validator.w3.org/ You may receive an error about the link element that Google Fonts generates for you. This is due to the pipe character ( | ) it may use to differentiate between multiple fonts or weights. Ignore this error, as virtually all modern browsers will not have an issue fetching these fonts. 9. Validate your CSS using the following service:
https://jigsaw.w3.org/css-validator/
Note on Helper Layers and Hover States You have been given a ‘helper layer’ in your .psd wireframe. This is to help you measure distances between elements. It is not to be included in the final website. The Hover States layer group is to help demonstrate what your hyperlinks should look like when the user hovers over them.
Submission In order to submit your assignment, compress your framework folder and upload it as a .zip file to Moodle.
How to Create a .zip File Windows 10 Right click on your framework folder and choose Send To > Compressed (Zipped) Folder. OS X Right click on your framework folder and choose Compress “Folder Name”.
Please do not submit a file in any format other than .zip (.rar, .7z, etc). There is no guarantee that these files can be opened and marked. Include only the files that are required for your web site to work in your submission. There is no requirement to upload your website to the student server. Late submissions will receive a grade of zero.
Marking Rubric
Tasks Grade Marks
This site uses the basic HTML5 framework developed in class, and contains:
● images folder (img) ● styles folder (css) ● scripts folder (js)
All stylesheets, including the reset code, are correctly linked and functioning.
-3
The HTML document creates a clear meaningful document outline when checked within the HTML5 outliner tool: https://gsnedders.html5.org/outliner/
-3
The website passes both the HTML and the CSS validation services at: http://validator.w3.org/ Note: You will not lose marks for the pipe character error in any <link> element generated by Google Fonts.
-3
The page has a semantically named page title element, relevant to the contents of the page.
1
Images
● images are saved in the most appropriate file format and have semantic file names.
● all images display properly. ● all image elements have a descriptive alt attribute.
3
CSS
● CSS selectors are used appropriately and effectively.
● all classes are semantically named. ● stylesheet is not overly long or complex.
5
Navigation
● markup is semantic and meaningful for the content.
● site logo links back to index; all other links use a placeholder (i.e. link to ‘#’).
● links are styled and positioned correctly, including
5
hover state, fonts, colours, etc.
Banner & Call-to-Action
● markup is well-formatted and uses the most appropriate elements for the content.
● banner image is positioned using CSS background image properties.
● heading, tag line, and call-to-action link are styled and positioned correctly (including spacing, fonts, colours, border radius, hover state, etc.).
5
About Us
● uneven two-column layout achieved using flexbox. ● heading, body copy, and disclaimer styled
correctly.
3
Articles (Starting with Succulents)
● heading, including CSS background image, styled correctly.
● two-column, two-row layout achieved using flexbox and flex-wrap.
● article preview text is styled correctly, including spacing, fonts, colours, etc.
● link at bottom of article preview has correct hover state.
5
Page Footer
● footer border correctly styled. ● shop name and logo properly spaced and aligned. ● three-column layout achieved using flexbox. ● all links (in the first two columns) have the correct
hover states. ● academic disclaimer is styled properly.
5
Total 32