Material for Chapter6
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:
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 by linking to your assignment page with "Chapter 6 Layout." Due by 10/17 at 8PM.
- 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>
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.