Exercise 9: Flexible to Responsive Page Layout
In this Exercise continue using the newer HTML Elements introduced in Exercise 7, use CSS styles to make the page adjust from flexible to responsive.
Watch: the step by step Videos Lectures for Exercise 9.
Read to: Chapter 17 and follow along in the Demos for Exercise 9. Be sure to experiment.
Folder Name: Ex9
Minimum Number of Pages/Documents Required for Exercise: 4
- Create a minimum of 4 pages.
- First three pages have the same content and tags used.
- Use the new tags covered in Exercise 7. Header, Nav, Aside, Main, 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 aside and main tags to create a two column layout.
- Working on the CSS for pages 2-4 (Page 4 is your Artist Statement page - use the same page layout as pages 2-3).
- 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.
Topic for this exercise: Your favorite type of food. Do a little research into the food style plus tell me what it is you like about it - whether you cook it yourself or have a favorite restaurant to get it at. Use this to make the one page of content required for this exercise.
Use at least one image in the Main area of your page. A picture of the food or restaurant.
You will use the same content on the first 3 pages. Page 4 will be your Artist Statement.
- 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.
- Page 2 - Styled.html Add CSS Styling (use Percentages for your widths, margins and padding)
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 aside and main tags to create a two column layout. Use an overall div with an ID of "wrapper". Have your widths set to percentages. Add a max-width somewhere between 960px and 1200px. Change padding & margin to percentages. Set your "wrapper" to a width of between 98% - 100% . Use percentages for the widths on your Aside and Main areas.
- Page 3 - Responsive.html Adding Media Styles
Use the same content (and styles) from your 2nd page. Add media styles to the CSS Document Styles to make the page Responsive when it reaches a certain width.
- Page 4 - 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 9 video pages for more information.