/4 Assignment 1
Due No due date Points 100
The aim of this assignment is to introduce you to some of the practical skills required to create a functional, standards?compliant web page using HTML and CSS. The assignment assesses your ability to implement a webpage from a given
textual and visual specification.
Objectives To create a cleanly structured, valid HTML web page from a plain text document (provided), based on a visual
representation of the end result
To correctly include specified images and other external page objects within the final document
To use clean valid, CSS3 to layout and present a HTML5 document
Getting started
Read through the specification carefully before starting.
Download the following files from the resources collection at
ocean_cleanup.txt
ocean_cleanup-HTML.png
ocean_cleanup-CSS-wide.png
ocean_cleanup-CSS-narrow.png
Part 1: HTML for Structure
Instructions
Use HTML tags and attributes to mark up the contents of ocean_cleanup.txt for display on the web, as shown in the
resource file ocean_cleanup-HTML.png . Save your file as ocean_cleanup.html .
Marking Criteria
Structure and organisation [5 marks]: Appropriate, content-specific, clean, semantic markup must be used throughout
the document for any headings, paragraph, list, etc.
Links images & media [3 marks]: Images and other external media objects must be appropriately marked up and
display correctly. All images should be linked using full absolute URLs to their location on the module resources (see
Assets & resources section).
Visual comparison [3 marks]: Your file ocean_cleanup.html should look like the screenshot example shown in the
resources file ocean_cleanup-HTML.png when the page is displayed without styles.
Add valid CSS to style your ocean_cleanup.html as shown in the resource files ocean_ cleanup-CSS-wide.png and
ocean_cleanup-CSS-narrow.png . All your CSS must be contained inside a single external file called ocean_cleanup.css . You
are not permitted to use any external CSS libraries (such as jQuery-UI or Bootstrap).
Marking Criteria
Overall page layout [4 marks]: The page content should be centered within the viewport, with the text not extending
approximately 80 characters in width.
Header and footer [3 marks]: The header font size should scale to ensure that the page title fits into a single line. On
wide displays, however, it should not significantly exceed the width of the main text body.
Navbar [3 marks]: The navigation bar should render as a single horizontal line on viewports of sufficient width. It should
toggle into a vertical arrangement on viewports that do not fit the horizontal layout. At no point should a horizontal
navbar break over multiple lines. Submenus do not need to be displayed. When hovering over a menu item, background
and text color should highlight the hovered item as in the following screenshots:
Figure 1: Header and navbar on wide display
Figure 2: Header and navbar on narrow display
Page elements [6 marks]: Page content (text, images, multimedia) and whitespace should render as close as possible
to the given visual specification.
Responsive content layout [3 marks]: The website should render nicely for any viewport width, including displays as
narrow as 300px. Images and other elements should scale down in size to fit the viewport if needed.
1
3/4
Colours and typography [3 marks]: You should be resourceful enough to find out the correct hexadecimal codes for
the colours used in the final version. Do so ... and use them correctly. The core typeface in use is 16pt “EB Garamond”,
with “Darker Grotesque” for the page title and navigation, and “Special Elite” for subheadings and figure captions. You
should not assume that they are installed on the viewer’s computer for the page to render as intended. A little research
should enable you to build simple font stacks to implement them correctly using CSS. Your font stacks should provide
appropriate alternatives if these typefaces are not loaded on the client.
Underlying framework [5 marks]: If the CSS is removed from ocean_cleanup.html , the content must appear exactly as
shown in the unstyled specification ocean_cleanup-HTML.png . This means you are not allowed to add, remove, or rearrange
the supplied content, but must instead achieve this using CSS alone. Your solution should be well structured and
commented CSS that employs reasonable selectors to achieve its effects.
Validation [1 mark]: Your finished ocean_cleanup.css must only use valid CSS level 3. You can use the W3C validator
http://jigsaw.w3.org/css-validator/ (http://jigsaw.w3.org/css-validator/) to test whether your solution is valid. Be
aware, however, that the validator does not support tthe full feature range of the CSS3 specification.
Hints
Redundant or extraneous mark-up will cost you marks. Think “lean and clean”. If you find yourself asking, “have I put
too many tags in here?”, then you probably have...
The final page layout and functionality should appear and behave identically in recent versions of Firefox and Google
Chrome. Your page will be tested in both browsers on a Windows platform. For the purposes of this exercise, other
browsers do not have to be explicitly catered for.
The screen shot ocean_cleanup-CSS-wide.png is taken from a browser window set to 1920 pixels width, while
ocean_cleanup-CSS-narrow.png is taken from a browser window of 360 pixels width. You can make measurements off it if
you wish, however this may not help you much beyond relative proportions for margins, borders etc. You do not have
to pixel perfect to pass. You should make sure that the page renders well on any viewport size, not only the two
provided in the visual specification.
In order to achieve some of the “special effects” employed in this design, you might want to do some research into
the following CSS directives: background-position, background-size, box-shadow, text-shadow, text-transform, transform in
addition to what has been presented in the lecture material.
A
ocean_cleanup.html Your HTML markup of the original document
ocean_cleanup.css
An external stylesheet, linked to ocean_cleanup.html ,
containing all the style information for the final
presentation.
Remember your submission is timed when it finishes, not when it starts, so allow time before the deadline to submit your
files.
Both parts of the assignment will be assessed together and you will receive a single mark returned.