Review the three wireframes that you produced for the large screen version of your web site from the part 3 of the team project and add to them to ensure that they have the layout that you wish your site to have.
In particular identify the HTML elements' absolute and relative positions taking the element enclosing hierarchy in your web site.
Use the various ways of measuring elements on web pages as appropriate.
Additionally, identify the boxes that enclose the HTML elements in your web site and consider the box properties (padding borders etc) that you want to define.
Work through the wireframes and decide on the correct CSS to build those pages, and check the class and identity properties of the elements in the pages. Mark up your wireframes accordingly.
Acceptance criteria
[ ] CSS rules based on semantic tags are used
[ ] CSS rules based on CSS classes are used
[ ] All styling comes from external stylesheets
[ ] CSS rules set site-wide settings
Box model
[ ] The box model is used to position semantic structures sensitively within the web site
Coordinates
[ ] X & Y positional instructions are used
[ ] Choice of absolute/relative positional instructions is appropriate
[ ] Choice of units is appropriate
[ ] Z index is used or other measures are taken to handle overlaps and clashes
Advanced layout: grids, columns, flex
[ ] Advanced layout is used
[ ] Design goes beyond a table-like appearance
[ ] Layout gives the pages a rich, fluid appearance
Media elements
[ ] Media elements are styled with CSS (to size images, for example)
[ ] CSS media styling instructions are thoughtfully used without affecting website performance
Animation
[ ] CSS animation is used to enhance the communication of information
[ ] Use of CSS animation is targeted toward the identified audience
Task
Review the three wireframes that you produced for the large screen version of your web site from the part 3 of the team project and add to them to ensure that they have the layout that you wish your site to have.
In particular identify the HTML elements' absolute and relative positions taking the element enclosing hierarchy in your web site.
Use the various ways of measuring elements on web pages as appropriate.
Additionally, identify the boxes that enclose the HTML elements in your web site and consider the box properties (padding borders etc) that you want to define.
Work through the wireframes and decide on the correct CSS to build those pages, and check the class and identity properties of the elements in the pages. Mark up your wireframes accordingly.
Acceptance criteria
Box model
Coordinates
Advanced layout: grids, columns, flex
Media elements
Animation
Links
Task instruction Assignment