Nested Div Structure - Overview - NO images

Objective:

Using Divs to Create Structure for Images and Content

The next two assignments are the same as this one, but with images.

Demo Video - Div within Div Introduction

Demo Video - Class Lesson

Assignment009b3

Nested Div Structure- Overview with Images (1)

Objective:

Styling Div Structure with Repeat-X + .png with transperancy

Your own design - Come up with an idea

Make the container image transparent!

Demo Video

Choose a color scheme using the color wheel or cheat and use Color Scheme Generator.

Nested Div Structure- Overview with images (2)

Objective:

Styling Div Structure with Repeat-X and Repeat-Y Images + .png with transperancy

Your own design - Come up with an idea

Make the Y image transparent

Choose a color scheme using the color wheel or cheat and use Color Scheme Generator.

Nested Div Structure- Header

Overview - NO images

Objective:

Using Divs to Create Structure for Images and Content

Adding the Header element

The next two assignments are the same as this one, but with images.

Demo Video - Div Within Div Plus Header Introduction

Demo Video - Class Lesson

Using Divs - Overview with Images (3) + header

Objective:

Repeat-X and Optional Repeat-Y + Gif or Png with transperancy

Your own design

Make the Y image transparent!

Adding the header image

Demo Video - Class Lesson

Choose a color scheme using the color wheel or cheat and use Color Scheme Generator.

Using Divs - Overview with images (4) + header

Objective:

Repeat-X and Repeat-Y + Gif or Png with transparency

Your own design

Adding the header div image

Choose a color scheme using the color wheel or cheat and use Color Scheme Generator.

Activity

Block versus Inline

Display Block/Inline

Block HTML Elements:

<div>, <h1>, <p>, <ol>...

Inline HTML Elements:

<a>, <strong>, <span>...

Activity

HTML 5 Semantic Tags-

Intro HTML5

HTML Goodies

• header
• footer
• main
• aside
• nav
• section
• article

Intro HTML5

Demo Video - HTML5 Layout

Flexbox Layouts 1

Objective:

Creating adjacent elements in layouts

Flexbox allows you to create side by side layouts with your elements. To do so, create a flexbox parent container around your elements and set the flexbox container display property to flex.

In addition, create several children (inner) elements within the parent container.

You can assign "widths" to your columns using the flex-basis or the flex property.

Parents - Set display to flex
Children - Set flex-basis to a percentage or use flex with a number value

Resources:

Layouts

Flexbox Playground

Flexbox Practice

Demo Video:

Demo Video - Flexbox Layout 1 - Simple

Archive

Demo Video - Class Lesson

Demo Video - Flexbox Parent and Children (short explanation)

Flexbox Layouts 2

Objective:

Creating adjacent elements in layouts

Flexbox allows you to create side by side layouts with your elements. To do so, create a flexbox parent container around your elements and set the flexbox container display property to flex.

In addition, create several children (inner) elements within the parent container.

You can assign "widths" to your columns using the flex-basis or the flex property.

Parents - Set display to flex
Children - Set flex-basis to a percentage or use flex with a number value

Demo Video:

Demo Video - Flexbox Layout 2 - Complex

Archive:

Demo Video - One Flexbox Parent

Demo Video- Two Flexbox Parents

Float and Clear - Images and text

Objective:

Floating Images Left and Right

and

Wrapping text around images

Code:

.clearfix{ clear:both; }

<div class="clearfix></div>

Demo Resources:

Sponge Bob Demo - Spongebob | Gary | Eugene

Lipsum Text

Clearfix Demo Files

Demo Video Float Images

Demo Video Clear Floats

Assignment009c5

Min-Height Overflow

Objective:

Using min-height for expandable (growing) columns

min- height allows for your elements to grow with your content. If you use height, you may run into overlfow issues.

Use min-height for content areas that may expand. Use height for elements that won't expand.

Finished Assignment

Demo Video - Min-Height

Assignment009d

Flexbox Layouts - Complete

Objective:

Build a complete layout using the following tags:

<div>, <header>, <main>, <nav>, <aside>, and <footer>

Use # IDs for unique items (one time use on a page)

Use . Classes for repeated items

On our Web pages, in general, we use the following widths for a 3 column layout. Remember, for flexbox instead of width you will use flex-basis:

#container: 960px
#wrapper: 950px
#leftnav: 25%
#content: 50%;
#rightaside: 25%

The #pageheader and #pagefooter don't require a width.

Here's a visual representation of the above guidelines:

Requirements and Activities

REQUIREMENTS FOR ALL ASSIGNMENTS

At this point we begin to build several layouts. After completing assignment009D these layouts should be fairly easy. The ideas, concepts, graphics are the most challenging aspects of the following assignments.

These tips will help you succeed:

1. Use classes for styles used many times
2. Use Ids on styles used one time
3. Use the min-height on divs that might grow with content (required)

MAKING YOUR PROJECT PRESENTABLE - ACTIVITIES

Color Scheme

Choose a color scheme using the color wheel or cheat and use Color Scheme Generator.

Palettes Ideas: Design Seeds | Kuler | Colrd | ColorCombos

Project Prep - Layout + Text + Graphics - Activity

Layout + Text + Graphics - Paired Activity

Mini Layout - Friday the 13th - MiniLayoutFriday13th.zip

Demo Video - Project Prep

CSS - 3 Column Layout - No graphics required

Varied Link styling in layout elements

Build a three column layout using Flexbox

Objective:

Changing link styling in different parts of a web page.

Build with Flexbox

You already know how to style links. Now you must learn to style links differently when they are in different sections of a web page.

Demo17.zip

Demo Video - Flexbox Fix

Demo Video - Different Link Styles

Flexbox Menu

Using Flexbox for Components (buttons and menus)

Objective:

Using Flexbox to make an unordered list horizontal

Use the display and justify-content rules

You can use Flexbox to place elements next to each other. They do not have to be divs, they can be any element. See Flexbox applied to an unordered list and its list items.

Demo Video - Display Flex Animation

Dem Video - Display Flex on Unordered List

External Stylesheets

Separating HTML from CSS

Objective:

Using an External CSS file

It is often beneficial to separate our HTML and our CSS code.

Separate your embedded style code and place it into an external stylesheet. Name the stylesheet masterstyles.css.

Demo Video - External Stylesheets

CSS Transitions

Transitions for Hover

Objective:

Using Transitions on the Hover state for links

You can control hover states changes in various ways. In this assignment we will slow down the changes.

Demo Video - Transitions

Your project will be composed of three parts as follows:

Assignment022 - Single page design

index.html

Assignment022A - Split design into two files.

index.html
masterstyles.css

Assignment022B - Create multiple pages for de

sign

index.html
masterstyles.css
legend.html
gallery.html
links.html

Legends Project - Part 1 - Single Page Template (200 points)

Single Page Template

Demo Video - Legends Intro

TEAMS

Period 3

Period 5

Period 6

Period 7

2 Weeks - Create a one page design (template) on an approved LEGEND.

This assignment is going to take some planning and a little setup. I'll walk you through the setup and give you plenty of time to plan and develop.

Day 1

On each workstation:

- Create Assignment022 folder in the Q4 folder

- Create and index.html file (this will be your project)

- Create Resources Folder

- Create Images Folder

Over a few days, I will setup a shared working environment by team (as referenced above)

To work in your team folder, use the following path:
\\fs01-chs\Classroom

1. Research and Select Topic

Meet with your partner and do research to select 3 possible topics. Make sure to have backup topics. I may not approve your first choice. Also, make sure to compromise on the selection. Remember, before you move on to step 2, the teacher must approve your topic.

Day 2

- Submit Topic Ideas

- Review Examples - One project composed of three assignments

- Test shared team folders

2. Research Information and Images on your Topic

After your topic is selected and approved, continue your research and find background information and images on your topic.

Here's what you're going to do:

Download images you might use and save them into a resources folder.

3. Flexbox Layout

D. Create your layout using HTML and CSS. Do not use graphics! . Save the layout as index.html

Make sure your wrapper is 900px.

Build Flexbox Layout - Step 3. Use the following tags:

• header
• nav - for links
• main - for your main information
• footer
• section -
• div - for a division of the web page
• aside
• article

4. Graphics

F. Create your graphics for each element as needed (header, footer, nav, section, aside, div).

Guide Specifications

5. Paragraphs

G. Add two paragraphs. One paragraph about your topic and a second paragraph explaining why you chose your topic.

- Typography with Google Fonts - One font for titles (headers) and one font for text (paragraphs).

Demo Video - Google Fonts

7. Meta Tags

H. You will need to add meta tags to your index.html file to help search engines "label" your Website. It makes it easy for people to find your pages and display them on Google, Yahoo, Bing, etc.

Look at the source for assignment001

About - Meta Tags

8. Images

I. Add one image using the img tag to your content. This is not a background image. Use the image tag.

You will need to cite your sources of information and images used in IMG tags so be careful to save all the links you use into the resources.html file.

CHECKLIST

Assignment requirements for assignments 22 are:

1. project file is named index.html (not Index.html or assignment022.html)
2. use a title that is relevant to your topic. Don't use index, project, etc.
3. wrapper is 900px and container is 960px (flexible)
4. head section must include meta tags
5. font-family cannot be Times New Roman - Use Google Fonts
6. min-height is used on elements that may grow
7. use an image(s) <img> in the content
8. use OPTIMIZED .jpg, .png, and.gif files for images
9. Use an Images folder (not the Resources folder)
10. Images must be named properly (not untitled.jpg)
11. three column layout or complex layout
12. display copyright information in your footer
13. use css background images:
1. Body background image
2. Container background image
3. Header background image
4. Main background image
5. Footer background image
14. use of non-working links (for now) <a href="#"> home</a>
1. Home
2. Legend
3. Gallery
4. Links
   

Here are guildeline specifications

Make sure to name your template as index.html. Do no move onto assignment 22A until I approve your template. Also make sure to export all you images as gifs, pngs, or jpgs! Finally, make sure all your links are linked to #.

Example Projects

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 - 2008-2009

9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 - 2009-2010

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 25 | 26 - 2010-2011

27 | 28 | 29 | 30 | 31| 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 - 2011-2012

41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 50 - 2012-2013

51 | 52 | 53 | 54 - 2013-2014

55 | 56 | 57 | 58 | 59 | 60 - 2014-2015

61 | 62 | 63 | 64 | 65 | 66 | 67 - 2015-2016

68 | 69 | 70 | 71 | 72 | 73 | 74 - 2016-2017

75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 - 2017-2018

Assignment022A

Legends Project - part 2 - External Stylesheet

Copy your assignment022 folder and name the copy assignment022A. Then follow the steps below:

Separate your embedded style code and place it into an external stylesheet. Name the stylesheet masterstyles.css. Remove the style tags from the code in your stylesheet or your stylesheet won't work. See video below.

Once you have the external stylesheet working move onto assignment 022B.

Here's some useful code:

<link rel="stylesheet" href="masterstyles.css">

Demo Video - External Stylesheet

Assignment022B

Legends Project - Multiple Pages

Copy your assignment022A folder and name the copy assignment022B. Then follow the steps below:

Decide on the number of pages you will need. You will need at least three additional pages. Decide on page file names. For example: history.html, background.html, photos.html, links.html, etc.

Add the links to your index.html file.

Next, copy and paste your template (index.html) to create the new pages. See video below. then add content (information) to each new page. Test all your links in all your pages.

How to Movie

Demo Video - Animate CSS