Material for Chapter6


Overview

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: Home || Content

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

I will also guide you through creating these CSS declarations:

Continue at home

Use a color scheme website such as color.adobe.com or coolors.com to come up with a color scheme that is appropriate for your website. Start implementing it.

Additionally, find a wide oblong image for the header, and 3 medium rectangular images. Save in your images folder.

Use a website such as icons8.com to find a few social media icons. Save in your images folder.

 

October 14th, Continue

We will start by completing the the top area.

Next will be the wrapper, then the hero image.

I will guide you through the remaining HTML. Likewise, we will cover the styles together.

Submit:

Submit by linking to your assignment page with "Chapter 6 Layout." Due by 10/17 at 8PM.



New Material

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="http://www.facebook.com"><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 maps.google.com 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.