Class hours: 9:40 – 2:05
- If you have not done so already, Create a folder for Week 10
- Week 9 homework is due today by end of day. Check “what is due” to make sure you have correct filenames. See me if you are unsure.
- Halloween Website Checklist – Do you need more time? Request with an email to me and what day it will be turned in. Meeting deadlines is important, but communication is the most important!
- 28 Books and counting for Quarter 1! That’s how many books we have completed during our Reading time. If you finished a book and it is not on the wall, please let me know.
9:40 Attendance & Article –
9:45 – 10:45 Font Awesomeness
Fonts are an important part of web design. The right font can help tell your story, create a connection of your product to your customer and helps define your image. A great and easy place to search and incorporate fonts into your web projects is Google Fonts.
There are two ways to incorporate fonts into your webpage.
- You can download a font and host on your server with your website files, applying an @font-face declaration in your CSS file (there are also a bunch of other steps). Advantage is fast loading and a downloaded font provides all font file types: EOT, TTF, WOFF, WOFF2. The disadvantage is the time it take to set up and if your font goes through an update, you then have to update each of your files.
- A fast alternative your font html code into the <head> of your document. The final step is to specify in your CSS the rules of the font family. This process is made easy with Google Fonts.
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 the files and is supported by all modern browsers
Web Open Font Format 2 (WOFF2) considered the best format of the bunch because it offers smaller file sizes and better performance for modern browsers that support it.
CSS Font Descriptors
font-family: the name of your font
font-style: normal italic oblique
font-weight: normal, bold, 100, 200 – 900
font-stretch: normal, condensed, ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded
In addition to fonts, vector based font icons help provide useful information to visitors to your webpage. Take a look at this webform below. Simple form control icons help visitors visualize what is expected of them.
To use font icons from Font Awesome, we need a script key – unique to each of you, that you can add to the head of your webpage. Font Awesome is a an open source project that grants access to a large collection (1500+) solid vector icons.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Awesome Quotes with Font Awesome</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://kit.fontawesome.com/ef8625f426.js" crossorigin="anonymous"></script> </head> <body> <blockquote>"Whenever I saw the <i class="fas fa-sun"></i> sun, I reminded myself that I was looking at a star. One of over a hundred billion in our galaxy. A galaxy that was just one of billions of other galaxies in the observable universe. This helped me keep things in perspective." </blockquote> <p><cite>-Ernest Cline, Ready Player One<cite></p> <body> </html>
“Whenever I saw the sun, I reminded myself that I was looking at a star. One of over a hundred billion in our galaxy. A galaxy that was just one of billions of other galaxies in the observable universe. This helped me keep things in perspective.”
-Ernest Cline, Ready Player One
Activity: Create of folder on your desktop. Call it Awesome. Inside create a folder for css. Also, create a basic html page – call it awesome.html.
Go to Font Awesome, and use your school email and credentials to generate a script key. You’ll need this key to make use of the font icons.
Find a quote from a favorite book or movie. Like the example we did in class, select several Font Awesome icons to help illustrate your quote. Use the:
- blockquote element
- cite element
To bring your quote to life. Feel free to model your html page after the example I provided you in class. When complete: take a screenshot and upload to your Week 10 folder: Filename:AwesomeQuote.jpg
10:45 Break (15 Minutes)
11:00 – 11:50 Physics –
Class meets at 11am under the library. Go to Physics class after our morning break. When Physics ends you can head straight to lunch or come back to the classroom (if you don’t eat lunch)
11:50 – 12:20 Lunch (30 Minutes)
12:20 – 12:45 Literacy in Focus
Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.
12:45 A/B Day Project Cont…
To your character page, add some font styles and font icons to your page.
Include an image on your character page. Don’t forget a caption.
When you page is complete, ask me to look over.
If you complete your page, complete any work that is due for today (or past due).