Class hours: 10:05 – 2:45
Mr. Bohmann | email@example.com
10:05 Today’s Notes & Attendance
Today is a CTE Blue Day
Today is also the last day of November!
CCV classes on Friday – doors will open at 9:15am. Use that time to get work done.
Mid Quarter Ends tomorrow – do you have work that is overdue? Still missing some About Me photos and About Me paragraphs. These are drafts. Get them in.
10:10 Image and Image Size – Why it Matters
Your bedroom can only hold so many things. Your backpack is more comfortable the lighter it is. Your stomach gets uncomfortable when it is full. Your backseat won’t hold your friends if it is filled with stuff. Space matters. Space really matters on your webserver. More space – more money you have to spend for your business or your client has to spend.
Let’s be intentional and talk about space, image formats and sizing.
For reference: A kilobyte (KB) is 1,024 bytes. A megabyte (MB) is 1,024 kilobytes. A gigabyte (GB) is 1,024 megabytes. Your server can hold 1GB.
Image Format Summary
- Smooth transitions between colors
- No Transparency Support
- Images with flat colors or hard edges
- Logos and illustrations without gradients
- Images with transparency. 8 bit can provide one color transparency and 24 bit for variable transparency
- File size correlates with the number of colors used: 2,4,8,16,32,64,128,256
- Your image has to fit on your screen – check your monitor at DPI Love
- Common display widths range from 1920 to 2560 pixels.
- A good rule is to make everything fit into a 1024 pixel display screen. (The exception if you are using large or full page width background images)
- Usually your images are much smaller in size
- In almost all cases, larger image sizes result in larger image files
- All images should be optimized before we put them in our websites. In Photoshop we use the Save for Web process.
- Did you Know that most digital phones save photos at much higher resolution than we need on the web
- Pay attention to the pixel dimensions of the image, you can see this in Photoshop by going to image>image Size
- Compress your Images further than Photoshop using Tiny PNG or Kraken
- Let’s look at an example together and then I have a visual on Codepen.
- Be sure to use the right file format for the image and the right size for your intended use.
A nice updated blog article about best image sizes for your screens and layouts
10:30 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>. You can also add a figcaption after all figure elements are listed too.
11:00 Custom Fonts and Font Awesome
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.
What’s Awesome – Font Awesome!
Font Awesome is an icon library which provides 1500+ free scalable vector icons. This library is completely free for both personal and commercial use. Originally designed for Bootstrap, these icons can be customized easily. (Bootstrap is a front end framework – well learn about that later)
To add the Font Awesome library to your website/project you need to link to it using a CDN in the head tag of your website.
<!-- Place your kit's code here -->
<script src="https://kit.fontawesome.com/ef8625f426.js" crossorigin="anonymous"></script>
<!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->
<i class="fas fa-thumbs-up fa-5x"></i>
CDN stands for Content Delivery Network. Code libraries like Bootstrap, JQuery and Font Awesome (and many others) are accessed through a CDN. The benefit to linking to a library vs. installing one is SPEED!
Let’s go to Font Awesome and make some accounts. Then will make a Kit. A kit is like a backpack. It carries your favorites and caches them for supreme speed. Speed matters when it comes to graphics.
Let’s go to codepen – Call it FontAwesome and we’ll see how the font Awesome works.
Find a Quote that moves you.
Create a WebPage with your quote and add font Awesomeness to it. When you are done, FTP it to the server. You can also create your own quote – if you happen to be so clever.
This project will help you:
- build a proper head tag with meta data!
- link a stylesheet
- link to and use font-awesome using a CDN
- practice your html and css
- add custom fonts – do add a custom font for your quote!
- use the validator
- file transfer via FTP
- code practice
- style anyway you like, just be sure to be ready for by the deadline of 12:15pm today!
Start with a folder on your desktop. Call it Awesome. Inside, organize the necessary items. This project is due today at 12:15 for viewing.
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
12:15 A Quote and Font Awesome Showcase
Pull up your page on your webserver so we can see your quote and use of Font Awesome.
12:25 – 12:55 Lunch
12:55 Independent Reading
1:30 Design Challenge
1:55 Production Time and Guided Support
- Famous Photographer Assignment – Due, December 11th
- Parallax Website – Due Monday
- Flexbox Photo Gallery – Due Friday
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive