Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Today’s Notes
- Today is an EHS A Day
- Today is an Early Release Day – Milton – 1:30 dismissal
- EHS students – class begins at 12:25pm
- Sweatshirt Showcase – after lunch. Load your illustrator file to the designated Public Folder
9:40 Attendance
9:45 Awesome
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.
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.
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!
<!doctype html>
<html>
<head>
<!-- Place your kit's code here -->
<script src="https://kit.fontawesome.com/ef8625f426.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->
<i class="fas fa-thumbs-up fa-5x"></i>
</body>
</html>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.
Awesome Project:
Find a Quote that moves you. Add font Awesomeness to it. When you are done, FTP it to the server.
This project will help you:
- build a proper head tag with meta data
- link a stylesheet
- link to and use font-awesome
- practice your html and css
- use the validator
- file transfer via FTP
- code practice
Start with a folder on your desktop. Call it Awesome. Inside, organize the necessary items. This project is due by the end of the day Thursday.
Here is one we can look at together to give you an idea of how to use font awesome.
10:35 Mask Break
10:45 Flexbox Trading Cards cont….
Yesterday we created some basic structure for some cards. Today, let’s just go a little further with some interactivity.
In most cases, when you want to add interactivity to your webpages, you add Javascript.
Let’s add a like button to one of our cards and make a counter.
(If you want to take on a challenge – add a like button and counter to every card)
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
To organize yourself, create a folder and place the entire project in this folder. We’ll call it Flexbox Trading Cards.
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 your own variations to the cards – look on the web for colors and design inspiration.
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 upload the entire folder (Flexbox Trading Cards) to the Webserver.
no JS is required for this assignment.
This project is due on Monday, November 15th.
11:35 Overflow
All of our projects have been assigned for the week. See the list down at the bottom of the page for a summary. We’ll use this time as a work sprint.
12:15 Lunch
12:45 CAWD Sweatshirt Showcase
1:10 Mask Break
1:20 Production Time & Guided Support
- AboutMe.html (code only)
- Resume.html (code only)
- Font Awesome Quote (due tomorrow)
- Parallax Project (due Monday)
- Flexbox Cards (due Monday)