Module 8: Responsive Design Using Flexbox Lab This week we'll create a very simple page layout that uses CSS Flexbox to create a responsive two column layout. You can use this layout as a starting point for future projects. To make it a little easier to see the CSS and the HTML at the same time, for this lab we'll use embedded CSS, but if use this as a starter for your final project or case study redesign you will need to move the CSS to an external stylesheet. Part 1 - create your new file 1. open your text editor and create a new file and save it as M8flex.html. Part 2 - Configure HTML for the page structure. 1. set up the HTML for a simple page containing the header, nav, main, and footer elements. 2. Add place holder text for h2 and h3 elements as children of the header element. 3. Add an article and an aside element as children of the main element. 4. Add content to the elements: a. Add a unordered list containing 4 page links to the nav section (Home, Page 2, Page 3, Page 4). b. Within the article element add the following i. a level one heading that reads "Article Title Goes Here" ii. the M8_Pic.png image and alt text iii. a paragraph with about 4-5 lines of Lorum Ipsum text. c. Within the aside element add the following: i. a h2 heading that reads "A Little Aside Title". ii. an ordered list with 4 list items. Use filler text as the list items. d. within the footer element add a 2-3 line paragraph using small formatted Lorum Ipsum text. 5. Check your HTML against the screen shot shown in fig 8.1 Part 3 - Add CSS and Implement Flex Box 1. Style the nav element as follows: a. configure the unordered list as flexbox that expands to fill the full width of the page and the space between the nav links is allocated evenly. The text should be white, and the background black. b. use a descendent selector to ensure that the list items that make up the lings each occupy 20% of their flexbox parent container. c. set the main element as a flexbox. d. set the article so that it takes up 60% of the main element's width. i. set the margin as follows: margin: 1.5em 2.52525% 0 2.0202%; Figure 8.1

e. set the aside element so that it takes up 40% of the main element's width. i. add 2.0202% padding , a max-width of 200px, a min-height of 180px, background color of #ffebc6. ii. set the margin as: margin: 1.5 em2.0202% 0 0; f. Set the footer's background color to your preferred shade of pink. 2. Save your CSS and check to ensure your page matches the screen shots below in fig 8.2 and fig 8.3 Figure 8.2 Figure 8.3

Part 4 - Submit the Assignment Submit this assignment as you would any other lab. Code must be HTML and CSS validated, the page must be hosted on homepages, and you must submit link to view the assignment as comment. For extra credit, as a comment to you submission in Canvas answer the following question: When the browser is sized down to a narrow width, the right edge of the nav, aside, and footer all align. However, when we make the browser wider, the edges of the nav and footer start to expand beyond the edge of the aside. Why is

USE SUBLINE TEXT EDITOR FOR THE CODE (WEB DESIGN) PLEASE AND THANK YOU.