Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Today’s Notes
- Today is an EHS B Day
- Non-Perishable Food Items – let’s fill the box!
- Callbacks – Dan M. 11:30 with Ms. Yopp
- Jasper, Meeting at Noon today
- PreTech Two visitors today – Let’s discuss
9:40 Attendance
9:45 Font Perfect Challenge
Finding the Perfect Font takes time. However, the right font can really set your work in the right direction.
Google Fonts, Adobe Fonts, DaFont are all resources that are readily available to you. Adding fonts on CodePen has been really easy, but what about to a real webpage!
First some info about types of font formats:
Embedded OpenType Fonts (EOT) Old font type, no longer needed
TrueType (TTF) TTF can be useful for extending support to some older browsers, especially on mobile
Web Open Font Format (WOFF) It compresses and is supported by all modern browsers
Web Open Font Format 2 (WOFF2) considered the best format of the bunch because it oers smaller le sizes and better performance for modern browsers that support it.
If you want to shorten your code for using fonts, check out this shorthand from W3Schools on using the Font property
This YouTube tutorial will show you how to use the @font-face rule to pull your fonts into your CSS.
For this challenge I’d like the following Deliverables:
- Open ATOM
- Create a Folder – name it Font Perfect.
- Create an index.html page, css folder, font folder and images folder (if needed)
- Find and Match a font to each quote.
- Frame each quote in an <article> element. Use the movie name as your class name for that <article>
- Style the <article> with the appropriate font and styles as you see fit. Make each <article> 400px in height and 960px in width
- Use flexbox on the body and organize all of the <article> elements in a column
- Include all the good <head> tag meta data
- Check for validation and fix any errors! Upload the entire folder to the Server.
- This project is due Tuesday, December 14th.
| Quote | Movie |
|---|---|
| “That’s my secret, I’m always angry.” | The Avengers |
| “My precious.” | Lord of the Rings |
| Honey, where’s my super suit? | The Incredibles |
| “You’re gonna need a bigger boat.” | Jaws |
| “Mama always said life was like a box of chocolates. You never know what you’re gonna get.” | Forrest Gump |
| “I’m Good At Everything, Except The Things I Can’t Do.” | Squid Game |
| “Here’s Johnny!” | The Shining |
| “I am Iron Man” | Iron Man |
| “Show me the money!” | Jerry Maguire |
10:35 Mask Break
10:45 – 11:30am PreTech Visits to CAWD / CAWD2
“Education should not be intended to make people comfortable; it is meant to make them think.”
― Jonathan Haidt, The Coddling of the American Mind: How Good Intentions and Bad Ideas Are Setting Up a Generation for Failure
| PreTech Student | CAWD2 Student |
| Raseda Be | Isaac |
| Brodey Thibault | Jack |
| Alexander Bergeron | Jaymeson |
| Chance Linde | Owen |
| Kayleigh Lumbra | Ashton |
| Xavier Richardson | Carter |
| Richard Villamil | Jasper |
| Jay Leuschner | Renzo |
| Hayden Rice | Ryan |
| Additional Student / Standby | Dan A. |
We are going to follow a similar format to what the first year CAWD students are doing. Essentially showing our visitors what we are doing in CAWD and interacting with them.
With your visitor:
- Show them some of your photos from Photography
- Teach them how to edit / convert a RAW file to a jpeg using Camera Raw (let them try it)
- Show them some of your visual effects projects – Maybe your StarWars Movie
- Talk to them about the process of filming and editing, how special effects work
- Show them your website redesign project
- Show them how to launch the inspector and inspect and change a webpage (let them try it)
- Have your visitor help you find a good font for your movie quotes
- Show them how to code up the changes and explain the ATOM editor
- Your Choice option – what do you want to teach them – share something you learned and / or are good at: Blender, Color Picking, Working in Illustrator of Photoshop, Tips / Trick in Premiere, Photo restoration…
11:30 – 12:15pm Tree Farm Production Time
Production time for the tree farm project.
Be sure to validate your code. Practice commenting your code for good practice.
12:15 Lunch
12:45 Skinny Lesson
Article: Web Design Trends 2021
Let’s have a look at some of the generators and see what all the buzz is about with some of these new trends in design.
1:10 Mask Break
1:20 Production Time and Guided Support
Purinton Tree Farm Redesign (due Thursday)
CSS Grid Calculator (due Thursday)
Font-Perfect Challenge (due Tuesday, December 14th)