For this fourth module you will be using the information from the Learn CSS Layout tutorial site to modify the layout of a basic website.
Your first step is going to be to download the module4.zip file.
Once you have downloaded the zip file, you will need to right click it and select 'extract' to unzip it.
Please make sure you only have ONE folder that you are editing, that it is named 'module4' in all lowercase letters, and that you have deleted the .zip file and any temporary files.
Step Two: Global Modifications
In this step you will be modifying the .css file to make global changes to your website (i.e. changes that effect each and every page).
Set both your FIRST headers and your footers to have a width of 100% and a height of any number of pixels that you would like.
The first global change that you want to make is to use the fixed position declaration on only the FIRST header on each of your pages so that it sticks at the top of the page even as you scroll through content.
The second global change that you want to make is to use the fixed position declaration on the footer of every page so that it sticks to the bottom of the page even as you scroll through the page.
Try adding top and bottom margins to your #wrapper ID equal to the heights of your FIRST headers and footers respectively to make sure no content gets hidden behind them.
Step Three: Fixed Position Layout on one.html
In this step you will be modifying the presentation of ONLY your one.html file. You will need to use class tags, ID tags, and/or descending and combination selectors to make sure that you only modify these contents.
Once you've appropriately tagged the contents of one.html, begin modifying your main.css file to change their presentation.
Try to make a fixed position layout (done with pixel designations) based on page 8 of the Learn CSS Layout tutorial – i.e. make the aside appear on the left-hand side of the page with the content next to it on its right.
Give the wrapper a relative positioning.
Use absolute position on the aside and article elements and establish their widths, margins, and/or paddings.
Use overflow designations to control the spill out from articles. (Try using overflow on each article and try containing all the articles in a div tag that has the overflow set to scroll.)
Use absolute position values on left and/or right to make the images in both articles appear to the left and right of the paragraphs.
Step Four: Floating Position Layout for two.html
Build a floating position layout based on page 12 of the Learn CSS Layout tutorial. The end result should present almost exactly the same as the previous page.
Give the wrapper a relative positioning.
Use floats on the aside, article, and image elements and establish their widths, margins, and/or paddings with pixels.
Consider clearing the float (page 10) for the footer on this page.
Use the clearfix hack (page 11) for any boxes too small for their content.
Step Five: Responsive Layout for three.html
Build a responsive layout based on page 13 of the Learn CSS Layout tutorial. The end result should present almost exactly the same as the previous page.
Use floats on the aside, article, and image elements and establish their widths, margins, and/or paddings with percentages.
Step Six: Inline-block Layout for four.html
Build an inline-block layout based on page 16 of the Learn CSS Layouts tutorial. The end result should present almost exactly the same as the previous page.
Use inline-block display, vertical align, and percentage widths to achieve layout.
Take a look at my attempt at Module 4 and check your work against it. Try to resolve any differences between your code and mine and get your first four pages working correctly.
Once you have completed all four of the different layouts, feel free to move on to the final steps in this module.
Step Seven: Inline-block Photo Gallery for five.html
Build an inline-block based image gallery based on page 15 of the Learn CSS Layouts tutorial.
Be sure to adjust the padding, border, and margins of the images on this page.
Try adding drop shadows to the images in your gallery.
Try adding basic on-hover overlays to your images, or more advanced overlays if you're feeling adventurous. Keep in mind that you will need to implement these overlays somewhat differently, likely targetting the figcaption elements instead of adding new divs around the text.
Step Eight: More Global Modifications
Try adding Google fonts and altering some of the presentation on your headings, paragraphs, and other basic elements to flesh out your page just a bit more.
Step Nine: Extra Credit
Try animating your aside to get more dynamic site navigation.
Try using these animations to revamp your image gallery.