Reference no: EM131301448

Assignment 1- Worksheet

Here's some brief advice on a workflow for approaching the assignment:

1) Choose your topic. Remember, the content must be licensed for re-use. Make sure you can source appropriate content for your site.

2) Create your HTML pages first, don't worry about CSS. This is often called Plain Old Semantic HTML (POSH)
- Make sure your web pages are HTML 5 pages (check the doctype)
- Do validate the pages and fix any errors.
- Do have a good look on the assignment specification to make sure you are meeting all the basic requirements - folder structure, a page for tables, forms etc.
- Do think about showing a range of HTML features.
- Do give consideration to accessibility.
- Do not apply any CSS!
- Do not worry about how your pages look.
- Do not worry about page layout <header>, <footer>, <div> etc.

3) Apply some basic CSS - fonts, colours, margins etc. for the entire site. Do not worry about creating an amazingly complex design. Simply apply some basic CSS to show understanding of how it works. If successful, at this point you should have done enough to pass the assignment! Save a copy of your work and put it to one side.

4) Now you can think about how to improve your grade by being more ambitious with the CSS and the design. To start with, think about specifying additional CSS for your text, table and form pages to improve the design e.g. colouring table rows. You shouldn't really need to change the HTML, instead think about how you can use CSS classes to target different parts of pages. The one place where you may have to add some additional HTML is in your form page e.g. elements to help control the layout of form controls. If you do, make sure you validate the pages again and fix any errors.

5) Next, think about creating a consistent page layout.
- In your HTML add <header>, <footer>, <section> etc. tags.
- Validate the pages again and fix any errors.
- Use CSS to define a page design using floats and/or positioning.
- Use CSS to style your hyperlinks to make them look like a navigation bar.

6) If you have some time left, think about how you can experiment with CSS 3 features such as transitions and animations. The key to using these features is that they integrate into your websites neatly and serve a useful purpose. Simply applying the feature isn't enough. You need to show you know how to use the CSS feature effectively.

Assignment aims

- For students to demonstrate their skills in the production of web pages using HTML.
- To allow students to demonstrate an understanding of the use of cascading style sheets.

Knowledge Outcomes

Discuss a range of client-side web and Internet technologies.

Explain approaches to web site design and implementation.

Problem statement

You are required to assemble a portfolio of HTML and CSS work. The pages submitted should contain substantial, genuine content. This will provide an opportunity for you to show a range of HTML and CSS features and an understanding of how to structure HTML documents.

If you haven't created the content yourself you should only use content (text, images, video, audio) from the web that is copyright free or licensed for re-use.

All HTML and CSS pages should be written using Brackets, Komodo or similar text editor. The use of WYSIWYG authoring tools such as Dreamweaver is prohibited.

Here are the specific requirements for the portfolio:
- The portfolio must be developed using HTML 5 and the CSS 2.1/CSS 3.
- All HTML and CSS documents must be valid according to the W3C validator (https://validator.w3.org/)
- The portfolio should consist of six inter-linked pages.
o One page should be the homepage. This file must be named index.html.
o One page must demonstrate the use of HTML tables. This file must be named tables.html
o One page must demonstrate the use of HTML forms. This file must be named forms.html. You aren't required to write any code that will process the data entered into this form.
o One page must demonstrate the use of text related tags: paragraphs, lists, headings etc. This file must be named text.html.
o One page should provide attributions to any licensed content (text, images, video, audio) that has been included in the portfolio. This file should be named references.html.
o One page should provide links to the W3C validator providing evidence that all your pages are valid. This file should be named validation.html.

- The portfolio must demonstrate the use of hyperlinks. The pages in the site should be linked together using relative URLs with suitable navigation throughout.
- All HTML pages in the portfolio must link to a single CSS file. This file must be named
style.css. There should be no use of the style attribute or the <style> element in the web site.
- The portfolio should work fully in both Google Chrome and Mozilla Firefox.
- Pages should be viewable on monitors with screen resolutions of 1024 × 768 without users having to scroll horizontally.
- The portfolio should have a cohesive, consistent design, demonstrate good application of basic web design principles and be easy to navigate.
- Consideration to accessibility should be given in the use of both CSS and HTML.
- All HTML and CSS must be written by you. The use of libraries, frameworks, templates etc. is not allowed.