1. Create an HTML file and name it portfolio.html. Your HTML page should have a proper structure. (2 marks) 2. Add two meta tags for the character sets and viewport. (1 mark) 3. Add your name and email in an HTML comment at the top of the page. (1 mark) 4. Create a folder and name it styles. Create two CSS files under the folder and name them portfolio.css and normalize.ess, respectively. (1 mark) 5. Use an external style sheet to link styles to your HTML page. Do not use internal or inline styles. (1 mark) 6. Format the body of the page so that it is 1200 px wide, uses your own font scheme, and is centered in the browser window. (2 marks) 7. Add a header, navigation bar, sidebar, main section, and footer. (1 mark) 8. In the header, add a site title: [Your First Name]s Portfolio and center it. The header should also have a top border with a width of 1px. (1 mark) 9. Add three menus for the navigation bar: Home, Projects, and Contacts. The navigation bar should have a background color and proper spacing between menus. The menus should not have an underline. ( 2 marks) 10. Display menus in a different color if a menu has a focus or the mouse hovering over it. (1 mark) 11. Add a section after the navigation bar. The section should contain a full body width image. Use a child selector to define the width of the image in CSS. (2 marks) 12. Use lorem ipsum text to fill the contents of the main section and sidebar. Add a h2> heading, two paragraphs, and 50 px padding to both sections. (1 mark) 13. Float the main section and sidebar in the body so that the sidebar is displayed to the right of the main section. The width of the sidebar should be one-third of the body width. (2 marks) 14. Include a footer with a copyright symbol, current year, and your name. The footer should have the exact same styles with the navigation bar. Use a group selector to implement this. (1 mark) 15. If the browser window is 600 px or less, change the body width and remove floats for the main section and sidebar. Adjust other styles as well so that the content is fully visible without horizontal scrolling. (2 marks).

1. 1. Create an HTML file and name it portfolio.html. Your HTML page should have a proper
structure. (2 marks) 2. Add two meta tags for the character sets and viewport. (1 mark) 3. Add
your name and email in an HTML comment at the top of the page. (1 mark) 4. Create a folder
and name it styles. Create two CSS files under the folder and name them portfolio.css and
normalize.ess, respectively. (1 mark) 5. Use an external style sheet to link styles to your HTML
page. Do not use internal or inline styles. (1 mark) 6. Format the body of the page so that it is
1200 px wide, uses your own font scheme, and is centered in the browser window. (2 marks) 7.
Add a header, navigation bar, sidebar, main section, and footer. (1 mark) 8. In the header, add a
site title: [Your First Name]s Portfolio and center it. The header should also have a top border
with a width of 1px. (1 mark) 9. Add three menus for the navigation bar: Home, Projects, and
Contacts. The navigation bar should have a background color and proper spacing between
menus. The menus should not have an underline. ( 2 marks) 10. Display menus in a different
color if a menu has a focus or the mouse hovering over it. (1 mark) 11. Add a section after the
navigation bar. The section should contain a full body width image. Use a child selector to define
the width of the image in CSS. (2 marks) 12. Use lorem ipsum text to fill the contents of the
main section and sidebar. Add a h2> heading, two paragraphs, and 50 px padding to both
sections. (1 mark) 13. Float the main section and sidebar in the body so that the sidebar is
displayed to the right of the main section. The width of the sidebar should be one-third of the
body width. (2 marks) 14. Include a footer with a copyright symbol, current year, and your name.
The footer should have the exact same styles with the navigation bar. Use a group selector to
implement this. (1 mark) 15. If the browser window is 600 px or less, change the body width and
remove floats for the main section and sidebar. Adjust other styles as well so that the content is
fully visible without horizontal scrolling. (2 marks)