Name Period

Project2:CSSTricks Essential Question: What tools are available to me as a designer to affect how people view or interact with my page? How can I use them to create a desired effect on my audience? Objective: Students will learn the basic power and principle of good type and color theory and share this information with their classmates. Standards: A1.2 Identify and use the principles of design to discuss, analyze, and create projects and products across multiple industry applications. Individual:BoxModel

A. What are the various values of the CSS Box Model Properties? What do they do? How can they be used effectively?

B. Give/show/explain examples of the properties and their use. C. What are the other tricks and abilities CSS can perform? How can they be

used in designing web pages?

Name Period

Part1:PresentationsInagroup,createashareablepresentationthatexplainsoneofthefollowingCSSTricks.Thesepresentationswillbeyourclassmate’sguidestohowthesetrickswork.Beasthoroughaspossibleasyourpresentationswillbegraded.:Tricks&Topics

CSSShapes/SVGShapesFontsColorsLiquidLayout/ResponsiveDesignFlexbox/BootstrapAnimation

Colors: • Is your color Primary or Secondary? • What is the “Additive” (RGB) or “Subtractive” (CMYK) color space? What is the

difference between the two color spaces? • What are options to put the color in CSS? Give examples of each option. • Basic Color Psychology (Positive and Negative) • Meaning of your color in other cultures • Color pairings: What pairs well, what doesn’t and why?

Typefaces: Serif/San-serif/Script/Display • What is a Typeface? What is a Font-family? Explain the difference. • What makes one font TYPE different from the next • Give examples of different Font Families • Show and explain effective & ineffective font pairing • What are Google Fonts and how do you use them in CSS • What is the Difference between “Web fonts” & “Desktop fonts”

o How do you install “Desktop” fonts

Shapes A. What are the various CSS Properties & Values that create shapes? B. Give/show/explain examples of the properties that create shapes. C. What does SVG mean? D. How do you create SVG shapes (differently from CSS shapes)

Responsive Design/Liquid Layout/Flexbox/Bootstrap/Animation A. What is Responsive design/Liquid Layout/Flexbox/Bootstrap/Animation? B. How does it work? Give & explain example code

a. Breakdown the properties and explain what’s happening C. Where & Why would you need to use it?

Name Period

Createapresentation&Cheatsheettosharewiththeclass

Project2pt.2:CSSTrickPresentation&CheatSheetThe assessment for your presentation will be online and will include:

• Clarity/Ease of understanding • Usefulness (Make this your classmates one-stop shop for

information on this topic) • Extra resources (other websites to gather information, aka

Bibliography) • Contact information (just put your WHOLE name on your

presentation)

Project2CheatSheetYou will be required to use, display and explain each CSS trick on a new HTML page. Use the following cheat sheet to take notes as needed.

Name Period

COLOR

Blue:Primary/Secondary

How's it made?

Complement(s):

Analogous:

Positive feeling:

Negative feeling:

Good pairing:

Poor pairing:

High Contrast:

Low Contrast:

Eastern Meaning:

Western Meaning:

Red:Primary/Secondary

How's it made?

Complement(s):

Analogous:

Positive feeling:

Negative feeling:

Good pairing:

Poor pairing:

High Contrast:

Low Contrast:

Eastern Meaning:

Western Meaning:

Orange:Primary/Secondary

How's it made?

Complement(s):

Analogous:

Positive feeling:

Negative feeling:

Good pairing:

Poor pairing:

High Contrast:

Low Contrast:

Eastern Meaning:

Western Meaning:

Green:Primary/Secondary

How's it made?

Complement(s):

Analogous:

Positive feeling:

Negative feeling:

Good pairing:

Poor pairing:

High Contrast:

Low Contrast:

Eastern Meaning:

Western Meaning:

Name Period

Yellow:Primary/Secondary

How's it made?

Complement(s):

Analogous:

Positive feeling:

Negative feeling:

Good pairing:

Poor pairing:

High Contrast:

Low Contrast:

Eastern Meaning:

Western Meaning:

Purple:Primary/Secondary

How's it made?

Complement(s):

Analogous:

Positive feeling:

Negative feeling:

Good pairing:

Poor pairing:

High Contrast:

Low Contrast:

Eastern Meaning:

Western Meaning:

Black:Primary/Secondary

How's it made?

Complement(s):

Analogous:

Positive feeling:

Negative feeling:

Good pair ing:

Poor pairing:

High Contrast:

Low Contrast:

Eastern Meaning:

Western Meaning

White:Primary/Secondary

How's it made?

Complement(s):

Analogous:

Positive feeling:

Negative feeling:

Good pair ing:

Poor pairing:

High Contrast:

Low Contrast:

Eastern Meaning:

Western Meaning

Name Period

Hue is

Tone is

Tint is

Shade is

Monochromatic means:

How are monochromatic color schemes made?

List 3 Sites that have good color schemes:

1.

2.

3.

RGB R G B Additive/Subtractive

Light/Ink

Web/Print

CMYK C M Y K Additive/Subtractive

Light/Ink

Web/Print

Why is Key needed?

Name Period

BoxModel

MARGIN & PADDING CSS MARGIN Affects: CSS Padding Affects: Difference between Margin & Padding is:

BORDER & OUTLINE CSS BORDER Affects: CSS OUTLINE Affects: Difference between Border & Outline is:

CSSSHAPESWhat does SVG stand for? How do you use SVG Shapes? Explain the basic CSS rules for: Diamonds Rounded Objects

Polygons Triangles

Name Period

What are the CSS properties to know when creating: Diamonds Rounded Objects Polygons Triangles SVG shapes

Name Period

FontTime!!What is a Typeface? What is a Font-Family? What’s difference between Typeface and Font-Family? What is a Serif? What does “Serif” mean? What does “Sans-Serif” mean? Generally, what makes a Display font unique? Generally, what makes a Script font unique? What is the difference between “Web Fonts” and “Desktop fonts?” How do you insert a Desktop font? How do you insert a Web font? What would be a reason to use a web font? Where is a GREAT place to find Web fonts? List Three Sites to find Desktop Fonts

1. 2. 3. 4.

Name Period

Name three SERIF Font-Families 1. 2. 3.

Name three SANS-SERIF Font-Families

1. 2. 3.

Name three DISPLAY Font-Families

1. 2. 3.

Name three SCRIPT Font-Families

1. 2. 3.

List three sites where you can find FREE Desktop Fonts

1. 2. 3.

Name Period

What kinds of font are these?

(Display, Script, Serif, Sans-Serif)

Font 1: Hi. I’m a font.

Font 2: I’m font too!

Font 3: Quit bragging, we’re all fonts

Font 4: But I’m better than all y’all combined!

Font 5: Really, guy?

Font 8: Hermergersh, Number 4 is so coowal…

Font 9: I know right? That guy.

Font 10: ERYBODY! SILENCE!

Name Period

CSSAnimationHow does CSS Animation Work? What are the properties needed in CSS Animation? LIQUIDLAYOUT/RESPONSIVEDESIGN/ANIMATION

What does “Liquid Layout” mean? What does “Responsive design” mean? Liquid Layout: Responsive Design: Are they the same? How does Liquid Layout work? How does Responsive design work?

Name Period

FLEXBOX/BOOSTRAP

What is a Flexbox? How does it work? What is Bootstrap? How does it work? Are they the same? What is the difference? What’s the best way to use them?

Name Period

Project2pt.3:DemonstrationChecklist

• Name: CB:

Assessment:DemonstrationOn a NEW HTML document, demonstrate the different properties presented and give:

• At least one (1) example of EACH CSS TRICK listed (color, font, layouts, animation, shapes, etc)

• Clearly label each section and trick • I.E. “This square demonstrates Margin. It has a margin of 20px” • Layout will be important and will affect your grade. • Be sure to CLEARLY separate and label each section using divs or

sections. • Be sure to explain what’s happening in each section. Explain the CSS

trick being displayed.

Box Model (2pts Each)

_______Margin_______Padding_______Border_______Outline

SVG Shapes (10pts Each)

_______Diamonds_______Polygons_______Threesidedobject_______Roundedobjects

CSS Shapes (10pts Each) _______Diamonds_______Polygons_______Threesidedobject_______Roundedobjects

Name Period

Fonts (10pts Each) _______Serif_______Sans-Serif_______Script_______Display

Colors (2pts Each)

_______Black_______White_______Red_______Green_______Yellow_______Purple_______Blue_______Orange

Liquid Layout, Responsive Design, Animation, Flexbox, Bootstrap (20pts each): _______LiquidLayout_______ResponsiveDesign_______Flexbox_______Bootstrap_______Animation

Page Layout:

_______AllSectionsClearyLabeledandSeparatedbyHeader(10pts)

_______SomeSectionsSeparated(5pts)

_______NoSectionsSeparated(0pts)

Explanations:

_______AllCriteriaExplained/Labeled(10pts)

_______SomeCriteriaExplained/Labeled(5pts)

_______NoCriteriaExplained/Labeled(0pts)