The box model gives us a way to do layout that is more sophisticated than using a table.
explanation video
The <div> tag defines a division or a section in an HTML document. The <div> element is often used as a container for other HTML elements. You will need to use it for this assignment. Here is a good online resource to review and learn about how to use div:
In this assignment you will learn the box model and play with it to get a solid understanding.
Watch the explanation video above. Here's a link if you just need to review the slideshow Then go to Project 5: The Box Model in repl.it. Run it.
My goal is for you to gain an understanding of how a page's layout can be controlled. Work through the following exercises slowly, trying to understand what is going on.
- See the boxes "Our guarantee" and "Weekly elixir specials?" Where are these styled? What kind of padding, borders and margins are used? What controls the position of the guarantee? In replit, open the CSS page "lounge.css". Remove the id="guarantee" from the html of the p element containing the guarantee. Save and view the result. Put it back the way it was.
- Down in the place where #elixirs is styled, comment out the float like this: /*float: right;*/. Save and view the result. Put it back the way it was.
- Make sure the words of the guarantee fit within the blue-green area. If not, fix things so that they do fit. Keep adjusting it until it looks good.
- The black text on white background (I call it the "write-up") is below the guarantee and above the "elixirs" box. I want you to style it so there are three columns, with the write-up in the center. Start with making the "elixirs" be on the right side of the rest, rather than below it.
- Next, get the guarantee to look like a left column (If you don't know how, see the hint, above).
- Then get the three sections (guarantee, write-up and exilirs box) to line up at their tops.
- The last two lines (copyright and trademarks info) are meant to be at the very bottom of the page. Be sure to check what happens when the user opens the window wide. You don't want those lines to come up and fill in; it looks bad. Style it so it stays at the bottom.
One way to get the three "boxes" to display side-by-side is to put all three things in divs or other elements and then give all 3 the style to float left.
You will still have to control the width of each of the three elements by styling them with width properties.
Try widths that don't quite add up to 100%, such as 23%, 45%, and 23%.
You can put all of that bottom stuff into a single div element with an id and then style it with clear:both.
Still confused? I find Mozilla's Box Model Page to be a nice, clear, explanation.
- (Before starting, you can re-name your index.html file "lounge.html" or simliar, so you will still have a back-up if you want to look at it. Then make a new "index.html.")
- Choose your own topic and content.
- For this project, do your coding in the html and css files of the repl.it Project 5.
- Think about each html element as a box, as presented in the slideshow
- Right-hand sidebar
- Make a right-hand sidebar using a div element which contains an h2 and three sets of (h3, img, p) similar to what was done in the Head First Lounge
- Give the div an id and style it with width, border, padding, margin, text-align, background and anything else you want.
- Position it at the right.
- Middle section
- Have several paragraphs (p elements) of text, as was done in the "write-up" section of the Head First Lounge.
- Left sidebar
- In the left sidebar, have one special p element whose text begins with "our guarantee" or something like that.
- Give that p element an id, similar to what was done with #guarantee in Head First Lounge.
- Then style #guarantee with background, a fancy-looking border, padding, margins, font-family and line-height.
- Position it at the left.
- Footer
- As before, use a footer with some text in it
- make sure it stays at the bottom, below everything else.
- As before, make sure the "write-up" text fills in the area between the two side panels.
- As before, make sure the tops of the side panels and "write-up" text line up nice.
- Put all of the style in an external style sheet, if you haven't already.
Due Date: Wednesday, 2/28/24
The assignment: you will be making a page similar to the Head First Lounge page, with left and right sidebar boxes
Rubric
| Category | minus 15 points | minus 10 points | minus 5 points | Full points |
|---|---|---|---|---|
| General Project Requirements | A unique site was created, similar in layout to the Headfirst Lounge, but with all new content. | |||
| Lists | Six or seven of the eleven items above were done. | Eight or nine of the eleven items above were done. | Ten or eleven of the twelve items above were done. | All twelve items bulleted above above were done. |
| Code Quality | Code doesn't run as expected and shows they did not study or understand the learning resources | Code displays somewhat as expected, minimal understanding of learning resources | Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of learning resources | Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the learning resources very well |
| Creativity | Student does not show basic creative effort (i.e. no addition of content, text/headers/etc) | Student shows minimal creativity from base requirement (i.e adds a couple things but not much) | Student shows some creativity from base requirement (i.e creates some content, text/headings/etc and some nice styling) | Student goes above and beyond base requirement and shows understanding of project (i.e. additional content, lots of styling, etc.) |