Website Overall Requirements
This website has a number of requirements which are detailed in the table below; you should adhere to these requirements when working on your assignments.
You must not use any existing complete templates, or frameworks that assist such as bootstrap.
1. You will receive a ZERO score for the global website design, HTML and CSS marking criteria if you do so, and may even be considered as plagiarism.
1. (Lab and lecture materials and resources can be used to help you with your website, BUT your design should be your own, not for example the design/layout of lab exercise.)
You may not develop the website using server-side scripting languages, such as PHP, ASP, etc.
Your design should focus on design rules learned during this course such as o Rules of good visual design;
1. Usability guidelines related to Colour, Typography, Placement of objects, Readability and Balance.
2. A solid understanding of the use of other elements such as; contrast, white space, layout, focal point, alignment, proximity, etc.
All text should follow the rules of writing for the web, including appropriately “chunked” content, use of Plain Language and the “Inverted Pyramid” style of writing.
Images, sound, and other media file sizes optimised for download and display.
Well-designed unique and creative websites will be awarded appropriately.
All html files must begin with the declaration, to indicate HTML5 adherence.
The structure of your website should be built using HTML5 tags styled with CSS where applicable:
1. <header> , <nav> , <section> , <article> , <aside> , <footer> , <figcaption> ,
2. HTML <div>’s can be used for other structural elements.
3. Do not use a <div> where a standard semantic tag would be appropriate, such as for example the <h1> to <h6> tags for headings.
3. HTML <table>s should be avoided for structure.
4. Use id and class where necessary.
Any HTML used on the site should: o Be well-designed and styled with CSS, and their intent must be clear;
1. NOT use PHP or other server side technologies. Functionality of such forms may therefore be limited, and only have partial functionality (prototype stage), but should be fully designed, and;
All content should be formatted and styled using an external cascading stylesheet (CSS).
1. This is to keep content and style strictly separated.
2. A max of 2 external stylesheets are allowed. Lower scores awarded if you exceed this.
Must incorporate at least THREE of the CSS3 styles below in a way that improves your web design:
1. Transitions, Transforms (scale, skew, and/or rotate), Rounded Corners, Multi-Column, Opacity, Shadows, or Gradients
2. Embedded CSS3 @font-face Fonts (or using Google / Adobe Fonts API is also acceptable)
No server-side scripting languages.
You can use external sources of code/tutorials to help you with this, but you must reference the use of this code
(Optional Challenge) Responsive Design
Try to make your website responsive, suitable for three different resolutions using @media queries.
Use three common breakpoints, each changing the styles to suit the new resolution width.
600 pixels and lower
601 pixels to 960 pixels
960 pixels and higher
Global content requirements for all webpages on your website
To identify the website as a website dedicated to you personally, provide:
1. A relevant heading / title banner and/or image/logo
There should be a clear, intuitive and consistent navigation structure on the website.
You need to think about how you will provide navigation to the user, and whether some pages may be categorised together or not. Consider the 5 ± 2 content guideline!
Example: An “Education” and “Career” webpage may be appropriately categorised together under a main page called “About” – with the 2 pages linking from it locally, or within a main menu drop-down function.
Types you can include (if applicable for your design and requirements): o Global (Primary and maybe Secondary), Local, Footer, In-text, Utility
An appropriate and intuitive footer must be included on your website.
Home Page Requirements
Filename should be named “index.html”.
Home page should indicate the purpose and identity of your website immediately via:
o Short blurb of your name and your career ambition.
Example: “Joe Bloggs. Web Designer. I create beautiful websites.”
o Short paragraph (15-45 words) providing more detail regarding your career ambition.
o No other body text should be present.
It can be more creative than the rest of your web pages, but it should try to professionally represent yourself through: o Image(s) and Visual design (Composition, Colour and Typography)
Remember this design is to reflect your style and personality (with the focus on your career ambitions), but not at the expense of good design. First impressions count!
Contact Page Requirements
Give this page an appropriate filename, title, heading (and subheading if required).
You should include relevant text with links to contact you such as email and social media.
This page must have an HTML Contact Form using the element: It must:
Be well-designed and styled with CSS, and its intent must be clear;
Output error messages/user feedback when there is user input errors or form submission success.
Requirements of SIX additional web pages
In addition to the home and contact pages, you are given creative freedom to design and develop the rest of your personal website yourself with only a few specific requirements.
You need to design and develop six more web pages for your personal website for a total of eight that specifically reflect the career focused purpose of the website.
Some suggestions (but you may think of your own) are shown below:
About, Achievements, Bio, Blog, Career, Design, Education, Experience, Gallery, Hobbies, Journal, Ideas, Photography, Portfolio, Testimonials, Travel.
Note that some of these suggestions above would technically require server-side scripting to fully function. In these cases (such as a blog), create a prototype of this web page, focusing on design and layout, with sample content in place
Each web page should have:
Appropriate filenames, titles, headings (and subheadings if required) related to their content.
Appropriate text to complement the additional media.
At least one relevant piece of media (image/video/audio
The gallery must be dynamic, meaning it has an interactive visual feature such as:
Lightbox: Thumbnail images that when clicked display a larger version of that image and fades out the rest of the webpage until the image is closed.
Rollover: Thumbnail images that when the mouse hovers over it, displays the larger version of that image.
Slideshow: The first image displays large and the user can cycle through the images.
Any other Dynamic Gallery that is designed and presented well.
One of the lab exercises – the labs have 4 different galleries which you can adapt.
Free image gallery tutorials (make sure to reference code that is not yours).
Galleries that function well and suit the design of your website will be awarded higher marks
• html – This folder will hold all of the .html files and have the following folders inside it:
• css – to hold the .css file(s)
• files – to hold any files that do not belong in another folder
• images – to hold all image files