Exercise 11: Using CSS Flex-Box for Responsive Page Layout.
In this Exercise we will work with the article and section tags/elements to break content into flexible sections.
Read in Text Book: Chapter 16 and follow along in the Video Demos for Exercise 11. Be sure to experiment with your content and CSS styles.
By Due Date:
Create a minimum of 2 pages. Both pages will use the same content.
Save into your folder - Ex11.
- Page Content: Do research in one of these areas and use it to generate content for this exercise: Using WireFrames, Mood Boards, or Style Tiles.
- Draw up a WireFrame/sketch of how you would like your page to be laid out.
- Page One - Natural Flow: (index.html) Create a page of content. Write this content in "Natural Flow" or the order it should be read. Do Not add CSS styles to this page.
- Use these tags/elements for this homework:
- header
- nav
- section
- article
- footer
- Use at least one placed image. A background image could be added as well
- Page Two: Using the same content as your index page - add the CSS Document Styles (in the head of the document). Experiment adjusting the padding & margin using amounts set in percentages. Add borders as you want.
Folder Name: Ex11
Opening Page Name: index.html
Number of Pages: 2 or more
Pages Must Link Together.
Post your questions online or email them to me
For this semester this exercise is for optional Extra Credit.