Objective: Obtain efficiency for styling pages specifically for various layout designs:

Reminder: practice using your browser's page inspection resources!

How to Use FireFox or Chrome Web Inspectors

FireFox Developer Tools is a Firefox add-on that lets you dynamically examine or modify the content and styling of web pages. It comes pre-installed with the Fire-Fox browser. To open it, right-click an element and choose Inspect Element. The Chrome Web Inspector tool behaves the same way, and comes conveniently built-in with Chrome. You can launch both by hitting F12 while in your browser.

Here is a link to Check out the more on the Chrome Dev-Tools Browser .

1. Arrange Your Page into Sections

2. Spacing with Padding and Margins, Backgrounds

3. Float, Alignment and Clear

4. Flexbox

Exercise 1: Layout a skeleton

Download this >>> Skeleton HTML & Support image Files and open the webpage in your text editor (Sublime, Atom, Notepad++, etc.). Recall that you can download an HTML file by either right-clicking the link and selecting "Save As..." to save in a local folder of your choice, and you can download an image by right-clicking the image and selecting "Save As..." in the same manner (as you'll see in example.html, the path to the support image assumes it is in the same directory as the HTML file).

Task : Follow the instructions in the HTML page to add page sections, and change the layout.

To start out, you'll need to create and link in a CSS file.

From there, the HTML elements explain what to do.

My Sample Demo on floats click here

See the sample output below.