Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Week Twelve
Today’s Notes
- Today is an EHS B Day
- CCV Drawing – Permission Slips now due
- CCV Classes tomorrow – Bus is going straight to the museum
- Tomorrow – Game Day starting at 11:30 or when you get here if:
- You are 100% complete for all assignments that are due this week
- You should check with me
- Feel free to bring in a treat. We’ll do a proper game day before the December break when we don’t have college classes.
- National Technical Honor Society – You Should be a member:
- Minimum Quarter 1 and 2 average of A- (90) or better
- All academic classes at CTE have a B or better
- Strong Employability Skills
- Leadership abilities
- Nominations in January – I’d like to nominate you
- Books – Reminder that you will need to have a book when you return from the November break.
- Let’s learn a little about your reading interests – Quick Survey
- PE – getting huge in the weight room today
9:40 Attendance
9:45 What’s Going on with this graph?
What’s Do you notice?
What Do you Wonder?
How might this impact you in the future or others?
Head over to classroom for your worksheet.
10:00 Adding Custom Fonts and Font Challenge
I am going to give you a list of sayings and I want you to find a suitable font for each saying. We’ll also learn about font resources and downloading and uploading custom fonts. It’s easy!
To test our our fonts:
- Open up your WebPractice Folder in VS Code
- Create a new page – call it fontchallenge.html
- Add head tag, link your stylesheet
- Be sure to link to this page (see me if you are confused on this)
- Paste in the sayings – I’ll provide them to you
- Make a folder called fonts
When looking for fonts – Try fonts.google.com, font squirrel, adobe fonts and DaFont.
Font Squirrel, Adobe Fonts and DaFont will require you to download and call the font in your CSS. The process is easy. So let’s do one together. Adobe has a clever generator that converts the font like google fonts. Font Squirrel has a generator too.
The fonts we want to download are TTF fonts. TTF stands for True Type and they are best for desktops and mobile screens. OTF or Open Type fonts are good for print.
@font-face{
font-family: Elione;
src: url(../fonts/Elione.ttf);
}
h1{
font-family: Elione;
}One more thing…..
The <blockquote> tag specifies a section that is quoted from another source. You can also add the <cite> tag after the block quote or inside the blockquote to identify the source.
ProTip… use <q> for inline short quotations – like when you want to wrap something in “air” quotes
Take notice: The blockquote element has some baked in styles for margin and padding
10:35 Break
10:45 Fonts continued….
We’ll do a walk around and see how you did
Be sure to FTP this project sometime today to the server.
11:00 Flexbox Trading Cards
Let’s tackle a little flexbox project.
First, lets learn how to make some nice Flexbox Cards together. Then, it is your turn.
Here is a nice little reference you can look at on trading card options/ideas
Flexbox Trading Card Project:
Choose a card style of your choice and make at least 4 trading cards. Your topic can be about Video Game Characters, Power Ups, Family Members, Pets, Thanksgiving menu items, original characters… Hey, what about your fall foliage photos!
- Create at least 4 cards, feel free to do more
- Display the cards in a row and space as you wish using CSS Flexbox
- Include an image
- Include a Title
- Include a description
- Include a custom font
- Hey, what about a color palette – that might be helpful
To organize yourself, create a folder – call it FlexTradingCards and place everything in it.
My advice to you is… don’t just cut and paste. Work on writing the code yourself and commenting as you go. Stay organized, try to understand what the code is doing.
Add more to your cards, hover, transitions, background, etc…
Don’t forget your meta data in the <head> element. Validate!
Validate your HTML, CSS and FTP the entire folder (FlexTradingCards) to the Web Server.
Use the filename above (exactly) name your file inside index.html
This is the last small web project of the week. Due Tuesday, November 29th.
12:10 Font Awesome Quotes Showcase-
Gallery Walk – make sure your quotes are up on your screen and FTP to the server.
12:15 Lunch
12:45 Figure and Figcaption Elements
The figure element is intended to be used in conjunction with the figcaption element to mark up diagrams, illustrations, photos, and code examples (among other things).
For the most part, you have just added the <img> element for showing an image. However, there is another way that allows you to get a caption for your images AND give you more styling hooks AND is more semantically correct.
The <figure> element is followed by the <img> and then the <figcaption>.
Let’s practice a couple in our favorite sandbox…..
1:10 Break
1:20 20% Production Time & Guided Support
- Parallax Website – How To – Due Monday, November 28th
- Flexbox Trading Cards – Due Tuesday, November 29th
- 20% Project – Presentations – Monday, November 28th
- Famous Photographer’s Research Project – December 8th