project 2 css tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · project 2: css tricks...
TRANSCRIPT
![Page 1: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/1.jpg)
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?
![Page 2: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/2.jpg)
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?
![Page 3: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/3.jpg)
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.
![Page 4: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/4.jpg)
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:
![Page 5: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/5.jpg)
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
![Page 6: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/6.jpg)
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?
![Page 7: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/7.jpg)
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
![Page 8: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/8.jpg)
Name Period
What are the CSS properties to know when creating: Diamonds Rounded Objects Polygons Triangles SVG shapes
![Page 9: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/9.jpg)
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.
![Page 10: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/10.jpg)
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.
![Page 11: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/11.jpg)
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!
![Page 12: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/12.jpg)
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?
![Page 13: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/13.jpg)
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?
![Page 14: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/14.jpg)
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
![Page 15: Project 2 CSS Tricksmrsterlingsmithsclass.weebly.com/uploads/7/8/8/5/... · Project 2: CSS Tricks Essential Question: What tools are available to me as a designer to affect how people](https://reader035.vdocuments.site/reader035/viewer/2022070904/5f6d2e2383707759741549c6/html5/thumbnails/15.jpg)
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)