DIGI 220 Labs
Lab 10 - Basic Layout with Floats
This week's standard lab allows you to demonstrate your understanding of creating basic layouts with floats. You'll create a basic, two-column layout using floats for your Standard lab. Below are an example and instructions for the standard version of lab 10.
About Me (Header Section)
About Me
I have a strong interest in supervising the production of human hair in Suffolk, NY. Have some experience managing velcro in the financial sector. Once had a dream of exporting fried chicken in Mexico. Earned praised for my work researching toy monkeys in the aftermarket. Set new standards for marketing bacon in Las Vegas, NV. Spent 2001-2005 consulting about acne in Naples, FL.
In 2009 I was developing bagpipes in the government sector. Spent a year implementing bathtub gin on Wall Street. Spent 2002-2007 getting to know human hair in Suffolk, NY. Spent several years writing about yard waste in Africa. Developed several new methods for licensing hugs in Ocean City, NJ. Garnered an industry award while researching country music in the government sector.
Standard Lab
Checklist
- Two-column/header/footer using floats (3 marks)
- Organization & layout of HTML & CSS
- Meaningful comments in HTML & CSS
- CSS & HTML Valid
- Extra polish applied to standard lab
- Three-Column Float Layout + content (3 marks)
Create Your Float Layout
- Create a new lab10.html page and put some content into it. Put your lab10.html into your labs folder and link it to the CSS file you create in the next section. (Don't forget to put a link from your index.html page to your lab10.html page!)
- Create a new CSS page, name it lab10.css and put it in the CSS folder. Link from your lab10.html page to your new lab10.css page
- Plan a layout with at least four divs. Call them
header
,footer
,content
andnavigation
. Put some filler content in the divs - Use floats (do not use the
position
property) to create a web page layout with two columns and a header and footer - Once everything is working on your local copy of the website, upload the changed files to your lab site
- Don't forget to validate your HTML and CSS files - I'll be checking both!
- Don't forget to include meaningful comments in both HTML & CSS!
Advanced Lab
Design and create the layout as above, but with three columns plus a header and footer using floats. For full marks, be sure that your content and design are meaningful, and not simply filler.