Friday, January 10th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Fast Week – It’s Friday already

Go to Chrome Store and get the Wave Evaluation Tool installed to your browser

Exams next week for EHS students – please send me your exam schedules as we have to coordinate:

lessons for GAWD
visitors from Winooski and BFA
production time for the portfolio

10:10 Wave Tool Evaluation Practice

One more time since so many were out yesterday.

Let’s take a look at Kestral Coffee Roasters – (the owner was a student of mine when I taught at New England Culinary Institute – I taught cooking then – not web)

Your Turn: Burlington Food Hall

Look at the following site and answer the questions. For this task, you will want to be using the Wave Tool.

10:25 Favicons & Meta Data Blitz

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 personal portfolio to add a professional touch. Be sure to add to the head tag of all your pages.

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 Breaksdf

11:00 Code Sprint

I am working with year one – for about 30 minutes. Use this time to work on your portfolio.

You are in good shape if:

Your Wireframes are done
You have a Folder with (CSS Folder, JS Folder, Images or Media Folder, Fonts Folder) inside
You have your pages made (index.html, funfacts.html, resume.html, bestwork.html)
Your have a head tag for each of those pages with favicon and meta data
You’ve linked your stylesheet to all your pages (you only need one stylesheet!)
Pages are linked together
*It is ok if nothing or not much is on those pages, just that you have them set up
Your next step is to use your wireframe to assist your layout for each page

11:30 Navigating the NAV

Navigation is essentially nothing more than a list of links. Links can go to other pages or as we saw with using IDs, we can navigate to other sections on the same page by linking to those IDs (remember the smooth scroll CodePen). We’ll do some basics today but you can scale up for your own.

<nav> 
 <a href="#home">Home</a> 
 <a href="#news">News</a> 
 <a href="#contact">Contact</a> 
 <a href="#about">About</a> 
</nav>

The example above will produce a horizontal row of links. Using the semantic HTML5 element <nav> means we don’t have to use an unordered list. Less to code!

Let’s go to CodePen and have a go at some custom Navigation. You can use the code above as a starting point.

Flexbox to the rescue!

With the addition of Flexbox to CSS, navigation has gotten even easier. For a flexible / responsive nav bar, just make sure you have a containing element. In this case the <nav> element is our containing element.

nav { 
display:flex; 
flex-direction:row; /*you don't actually need this line*/
flex-wrap: wrap; 
}

Let’s use some flexbox built in properties to try some other layouts. Let’s add:

justify-content: center; /*also try flex-start, flex-end, space-around and space-between */ /* Then let's add some style to the anchor tags */ 

nav a { 
padding:15px; 
text-decoration:none; 
background-color:gold; 
text-align:center; 
} 
nav a:hover{ 
background-color: #efefef; 
color: dodgerblue; 
} 
/* for fun, add transform: rotate(15deg); to the hover state */

Let’s go a bit further and add in the CAWD logo or a robot and a <header> because most often the navigation is found in this element. We’ll also add a button too.

How About a Vertical Nav?
Yeah, we can do that too. Let’s build one.