Class Hours: 10:05 – 2:40
Mr. Bohmann | wbohmann@ewsd.org
10:05 Today’s Notes & Attendance
- We have visitors today and that means… 4 (six minute) rotations. That means if we have 3 visitors you will work with 2 of them for a total of 12 minutes – 2 rounds.
- If you are working with a visitor, teach them / demo something
- English is today
- All course work for this class for Quarter 2 is due by 2:45pm on January 16th
- MLK Day is a day off – January 19th. January 20th will be the start of Quarter 3
- Penny Wars for Ronald McDonald House. Grand Total was $629.66
- The winning program “Team” ended up being Cos I & II, EMS, and Dental, with 9,284 points.
You get the ice cream party! (TBD)
Honorable mention to the GAWD I & II, HVAC, CEHS, and PreTech 2 team for raising the most money, with an amazing total of $203.49!
GAWD I & II, HVAC, CEHS, PT2 : +2,479 points; $203.49
EMS, DEN, COS I & II : +9,284 points; $112.64
NRM, PT3, NRF, ENG : +7,344 points; $104.14
PT1, CST, DCM, ATM : -4,846 points; $184.44 (we heard they were “sabotaged” with a lot of silver!!)
BTR, PT4, HP, PRF : +615 points; $24.95
10:10 Working with Footers + Adding a Back to Top Button!
Footer Element
Every page should have a footer. The footer element sits inside the body tag and is likely the last element you will have before the body tag closes. The footer should not be an afterthought. The footer is a perfect place to:
- repeat navigation menus / quicklinks
- contact / address
- copyright information
- sitemaps
- Any information you want to repeat again
Now, in case we have a long page, it might be nice to design a back to top button. I am going to help you design one that may be useful for your Food Truck One page website. This is a nice little feature for those especially long one page websites. Let’s open the CodePen that had the navigation schemes on it and we will build one in our sandbox.
To make this button, we’ll build a footer to place the copyright information and the Back to Top button from the Bootstrap Icons.* We’ll use the positioning classes in bootstrap. Remember to position something we need position:relative on the parent and absolute on the button icon. With Bootstrap the Utility position classes make this pretty easy.
*Don’t forget, to use the Bootstrap Icons we need to add the CDN for Icons in the <head> element.
10:45 Favicons
Favicon is short for favorite icon. Favicons don’t do much except increase brand awareness and make browsing your tabs waaaaay easier. Your portfolio should have one – and you can use your logo.
When someone bookmarks your site, your favicon will appear next to your page title in their bookmarks list, helping people to navigate to your content.
Favicons make your page look more professional and makes your page stand out.
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or place it in your images folder in your portfolio, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”. That is really all you need.
Then, add a <link> element to your “index.html” file, after the <title> element, like this:
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
</head>Favicon Generator: https://favicon.io/ and there are others with more customizations that you can Google.
Follow the instructions on the page. Once the favicon is created, you can use the html markup provided.
Let’s do this for your Geocities webpage to add a professional touch. Be sure to add to the head tag of all your pages for all your projects!
Meta Data is used for SEO – search engine optimization. We’ve covered this before. Each of your pages should have:
- A title
- Authorship
- A description
- Keywords
<title>Document Title</title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">BONUS CONTENT ALERT!! BONUS CONTENT ALERT!! BONUS CONTENT ALERT!!
Any idea how many webpages are on the public web? Pretty interesting group of facts from Forbes.
10:50 Morning Break (10 minutes)
11:00 Kosher Food Truck Project Worksession
This time is dedicated to your Bootstrap project. Go back to Tuesday’s dayplan for details and/or go to Google Classroom. Ask me questions. Do this but do not do this.
Get that Favicon up on your site too!
11:30 Visitors
Let’s show them a good time and a great experience in the GAWD program
11:55 Lunch
12:25 English with Mx. Yopp
1:10 Afternoon Break
1:25 Speed Design
1:45 Independent Production & Guided Support
- About Me write up and photo – Due Today 1st Draft (write up) photo on Monday
- Ruth Food Truck website using Bootstrap – Due Monday, January 12th
- Visual Resume – Due Tuesday, January 20th
- Resume Dropbox Round Two is up if you want me to review your resume for typos, content, etc…
2:10 Dailies
2:15 Independent Reading
2:40 Dismissal
