Chapter 6 Class Assignment

Material and day-to-day instructions


We will create a layout that looks similar to this Wix site. It is a basic 3-column layout with some extras. We will be creating Home and About pages. You may choose any theme you desire. See simplified versions of what we will create: HomeContent

Note: I created this layout a few years ago, so it's heavy on colored background. By contrast, look at Hyatt's website and note how blue is used as an accent, and there is a LOT OF WHITE and neutral grays.

Looka here. Same thing for Marriott...

Get started with HTML

Here is a wireframe showing the structure. Don't worry about the CSS yet. Your HTML will initially be in normal flow.

Starting HTML and CSS coding

We can start this in class on Feb. 23rd.

I will also guide you through creating these CSS declarations:

... Continue Monday


Summary of material not in the chapter

Google Fonts

Link to an image

To make a hyperlinked image, use the <img> element as well as the <a> element with the href attribute. It is the same basic syntax as all links. Here is an example.

<a href=""><img src="iconFB.png" alt="button"></a> 

Figure Element

MDN website has a perfect and picturesque description of the figure and figcaption elements. Let's take a look. AND, one important thing to remember is that figure has a default 40px left & right margin, with top& bottom of 1em.


Interactive Google Map

  1. Open and type the location you wish to embed.
  2. In the top left, click Menu.
  3. Click Share or embed map.
  4. Click the Embed map tab.
  5. To the left of the text box, pick the size you want by clicking the Down arrow. We will use Small.
  6. Copy the text in the box and pasted into your HTML code. We will paste it in one of the <figure> elements.

Modern borders

We'll talk about this. Enjoy them, but don't treat them like magic's happening!


We will spend a little time on March 1 refining and polishing the design. For instance, don't forget to remove the backgrounds and border that were created for troubleshooting and marking spots.


Submit by linking to your assignment page with "Chapter 6 Layout." Due by March 1st at 9pm.