Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks...
Transcript of Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks...
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)