MAT 125: Exercises & Projects

Exercise 10: Using Flex Styling to Create Responsive Page Layout

In this Exercise continue using some of the HTML Elements introduced in Exercise 7, plus two new ones for this exercise, Section & Article. Use CSS styles to make the page adjust from widescreen to fit the narrow screen from a mobile device.

Exercise Requirements

Watch: the step by step Videos Lectures for Exercise 10.
Read: Chapter 16. Be sure to experiment.

Folder Name: Ex10

Minimum Number of Pages/Documents Required for Exercise: 3

• Create a minimum of 3 pages.
• First two pages have the same content and tags used.
• Use the new tags covered in this Exercise 10. Header, Nav, Section, Article, Footer plus an overall DIV id="wrapper" (for overall page width containment).
• Start with all your basic content your Natural Flow page which has NO CSS added.
• Use the section and article tags to create a two or more column layout.
• Working on the CSS for pages 2-3 (Page 3 is your Artist Statement page - use the same page formatting as page 2).
• Refer to Exercise 3 on images where we added CSS to make the background and placed images responsive.
• All Pages in the Exercise Must Link Together.
• Use Brackets HTML Editor to create your pages.

Page Content:

Topic for this exercise: Your favorite place to visit. Do a little research into the area plus tell me what it is you like about it - whether it is a local place you like to go to or a vacation destination. Use this to make the one page of content required for this exercise.

Use at least one image in the section area of your page. A picture of the location would work well.

You will use the same content on the first 2 pages. Page 3 will be your Artist Statement.

1. Index.html Natural Flow

   Create a page of content for each area using all the new tags listed in this exercise. Write your content in "Natural Flow" or the order it should be read. DO Not add CSS styles to this page. Be sure to add at least one image.

2. Page 2 - CSSFlex.html Adding CSS FlexBox Styling

   Using the same content as your index page - add your own styling to the CSS Document Styles (in the head of the document). Experiment adjusting the padding, margin and borders. Use the section and article tags to create a two or more column layout. Use an overall div with an ID of "wrapper". Have your widths set to percentages. Change padding & margin to percentages. Set your "wrapper" to a width of between 98% - 100% . Add a max-width somewhere between 960px and 1200px.

3. Page 3 - Art.html Artist Statement

   Plan your pages out. Create a wireframe of your page layout. Develop a color palette and choose your fonts. Take this information and build out your Artist Statement page. Explain each piece of your design thoughts, layout, color pallete, and font choices, as if presenting this to a client.

Review the Exercise 10 video pages for more information.

Points: 30

Review the Demo pages for CSS style use.

We want to use our CSS to tell our sections to show our flex column design so we use these styles:

section {display: flex; flex-flow: row wrap;}

By using the property flex-flow and giving a value of row wrap we are telling the browser to set our flex boxes that are in the section to be in a row when they can and have them wrap or go to the next row as needed to adjust to the area available.

article:nth-of-type(3) {flex: 2 200px;}

When we use the selector article:nth-of-type(3) it is telling the browser how many - in this case - flex boxes, we will be using in the article . Note that the words are all connected so the browser sees it as one word or one item to work with. nth refers to the number to be used. We put the actually number we are using in the parenthesis.

We follow it up by using the property of flex as that is what we are using. The value we add 2 200px tells the browser that we want 2 of them to be the same size with a minimum width of 200px. The remaining flex box will flow to fit the area left over. If there is not enough room, the first two boxes may fit and the third will go to the next line. If your window is even smaller, they will reflow again and individually flow to fit the available space.

Use CSS styles to add padding and margin to your section and articles as needed as well as background-colors and colors for your text.