(Solved): 1. Organize your CSS and images in different folders. (Hint: Always use small letters for folder/fi ...

1. Organize your CSS and images in different folders. (Hint: Always use small letters for folder/file names and avoid special characters including spaces. This will help you link your (SS and images quickly). Note: Download the images and normalize.css from the setup files provided in the Course Tools > Assignments > Midterm Part B in eConestoga. (1mark) 2. Create a CSS file called main.css. Create a web page called index.html and add your name and email in HTML comments at the top of the page. (1 mark). 3. Ensure the head element on the index.html includes both the main and normalize CSS files, a title element, and the appropriate meta data. Hint use the Visual Code shortcut learned in class. (1 mark) 4. Set up the structure of your HTML page using SEMANTIC html tags. Include a body, header, nav, main, aside, section and footer. Set even margins and padding for all structural elements. (1 mark) 5. Create a body rule set in the CSS for the following: max width, width, height, margin, border, font, alignment. Use the shorthand font and border declarations. (1 mark) 6. In the header, float the logo image to the right. The image should have the following attributes: "id" and "alt". Use CSS to format the size of the image and add white space. Add in a site heading and a tagline and use CSS to ensure white space. Use a background gradient effect for the colour of the header. (1.5 marks) 7. Add three links to the navigation. The Home link should include a valid href to the Index. Create a CSS declaration to set boarders around the links, change the font colour, increase the font size, remove the underlines on the links. Create CSS declarations for the font colour of the links to change to indicate if the link has a focus, been visited or when hovering. Browser default colours of the links will not be awarded marks. (1 mark) 8. Then add a full width image to the navigation section. The image should have the following attributes: "id" and "alt" use CSS to format the image if needed. ( $$.5$$ marks) 9. Alter the natural flow of the webpage so that the main takes up roughly with $$2/3$$ and aside takes up $$1/3$$ of the width of the body. The third section will be below the main and the aside. This will occupy the full width of the main. ( 3 marks) 10. Use CSS declarations to make the view adjust to the viewport (device screen size). (Hint the aside should move below the main with a smaller screen.) (2 marks) space between the list items, increase the line height to 1.5. (1 mark) 13. Add a $$\mathrm{H}3$$ heading to the section and use $$\mathrm{H}4$$ heading as links. Add a paragraph under each heading. Offset. one paragraph (as shown) to right with relative positioning. (1 mark) 14. Format the links in the aside and in the section so they're displayed in a colour of your choice whether they've been visited. If a link has the focus or the mouse hovering over it, display it in a different colour. Browser default colours of the links will not be awarded marks. The H4 heading links should be formatted with the same colours but the font size should be increased. ( 1 mark) 15. In the footer as CSS to reduce the font size for the footer and center it. Add a background color to the footer and change the colour of the font. Browser default colours of the links will not be awarded marks. (1 mark) 16. Use Firefox accessibility features to ensure your site passes accessibility colour contrast requirements. (2 marks) When you're through, the page should look like the following mock up: NOTE follow the requirements for the heading tags to be used not the mock up below.