HTTP5111 Assignment 3 (Mockup to
HTML/CSS)
Using the mockups of your portfolio you created for Assignment 2, code the HTML/CSS. There should
be only one HTML file and one CSS file. Each mockup represents what your page will look like for each
device type (i.e. desktop, tablet, phone). Using the mockups as a base, you will create a responsive page
which follows your mockup designs.
If you have some strange behaviour between breakpoints, you may need to add one or more additional
breakpoints to ensure your page flows nicely from breakpoint to breakpoint.
You should have:
ONE HTML page
ONE CSS file
a folder for your images and CSS files to keep everything neat (don't just put all of your images in
the root folder)
any other files needed for your HTML (e.g. a JS file, if applicable)
For those of you who had issues with your designs, you do not need to make the fixes for this
assignment. All I am checking for is how well you know your HTML and how close your CSS makes
the page look to your mockups.
I do not recommend making any design fixes because of the tight timeframe, but if you really insist, the
mockup must be edited before editing the code, so you would need to edit the mockup, email me so I can
see it's edited, then finish and submit the code.
A good approach:
Work out your HTML first before touching any CSS. Keep in mind the semantic tags. Using
inappropriate tags in a weird way (even if it looks okay in the browser) can cause you to lose
marks. Remember what the HTML elements actually mean and use them according to the
context of your content. (You can still lose marks on semantics even if your HTML is valid if the
element is inappropriate.)
Once you have your valid HTML worked out, check it with the WAVE toolbar to see if your
outline makes sense.
After your HTML is valid and all checked, then start styling via CSS.
Work out your rough layout and any default generic styles (fonts, links). Remember to think of
outer containers and padding/margin first before styling inner content.
Next, work out your more specific styles.
Add your CSS media queries to make your page responsive.
You will be marked on the following criteria:
Code Quality/Syntax (5): Is your code efficient, well-formatted, and organized? Is your HTML
and CSS valid?
Semantics/Accessibility (5): Do you use appropriate semantic tags? Do you use any semantic
tags at all? What is your understanding of HTML semantic tags? Are all interactive elements
reachable or usable by keyboard users? Do you have headings for important section-level
elements? Does the HTML outline make sense? Do images and icons have text descriptions?
Responsiveness/Layout (5): Is your page responsive? Does it flow gracefully between
breakpoints? How well do you handle changing screen sizes? Are media queries used well?
Colours/Fonts (5): Do the colours in your HTML page match the colours in your mockups? Do
the font families/weights/sizes match?
DO:
If your mockup includes a slideshow, your HTML/CSS page should include Javascript to make
the slideshow work.
Use validators for both HTML ([Link] and CSS ([Link]
validator/).
Use an HTML5 outliner to check your headings. You can open up "More options" in the W3C
HTML validator and select "Show outline". If you use Chrome, there is also an HTML5 outliner
extension you can install.
Run the WAVE toolbar or Firefox Dev Tools to see if there are major issues with your
accessibility.
DO NOT:
Do NOT change the design without first changing the Figma mockup(s).
Do not use frameworks.
Do not use inline CSS.
Do not use <br /> or <hr />.
Do not use tables for the layout. Tables should only be used for data tables and never for
building a layout.
You will be marked on the criteria listed below.
DO use the HTML and CSS validators to ensure there are no syntax errors.
Zip all files together and name the ZIP file with the course number, assignment number, and your first
and last name.
Expected format of file names:
[Link] (final submission)
This assignment is individual and is worth a total 15% of your mark. Please submit this assignment via
Blackboard.
Due Date: March 28, 2024 at 11:59 pm (ZIP file)