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.

Inside your assignment folder (with the digits), create a folder called chap6_layout.
Inside "chap6_layout, create a folder called images.
Decide on a theme. Then, while at home, you will come up with a color scheme and find 4 images. We will insert those images on Friday.
Today, lets use a website such as www.freelogocreator.com www.canva.com/create/logos to create a logo. You may also create one from scratch with a graphic editor.

Starting HTML and CSS coding

FOR THE HTML, you can mostly use borders and placeholder labels to identify the parts to keep you on track.
The nav will use an unordered list.
I will guide you through creating the remaining HTML. If we get to the hero image, we will use https://picsum.photos to obtain temporary placeholder images.

I will also guide you through creating these CSS declarations:

body
#topArea
header
nav

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

Go to www.fonts.google.com
Select the category you wish, or search for a specific font
Click the + sign to select the google font of your choice(e.g. lato):
Copy the link of the selected style from the window that appear on the right side of the screen. Paste in the head area of your webpage.
In your CSS, apply the font-famly rule to selector(s) of your choice.

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

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