Wednesday, December 20th

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

10:05 Today’s Notes & Attendance

Today is a Wacky Wednesday

Call Backs @ 12:50pm today:

John (Public Issues)
Ariel & Andrew (Science)
Nick & Aiden (English)

Return Cameras: Ariel, Andrew, Brodey

Lunch Tomorrow with be at 11:55 – 12:25. The CAWD Classroom will be locked. I have a lunch with my collogues that I plan to attend.

Movies, Friday. Be on time for the start of class. We will be leaving right after attendance. If anything, be here early. I’ll open the room at 9″45am.

The Boy & The Heron – Certified Fresh

Gender and Sexuality Alliance (GSA) Club is meeting Wednesday (today) 11:35 – 12:30 in Mx. Yopp’s room. Anyone is welcome to attend and you are excused from class to participate. While you are excused from class, you are responsible for what we are doing in class.

10:10 CSS Grid Comic – Showcase

Let’s see your comic. Presented by Project Managers for each house.

Speak about: Process, division of labor, challenges

10:30 JavaScript Sprint

Let’s finish out our build of the grid by completing all of the images for yesterday. If you missed this, I’ll have a version of the work we did on Public Folders so you can start where we are.

We are going to add some buttons and then use an event in JS. There are lots of events in JavaScript. We’ll choose onclick. When we click, we’ll execute a function (which will change CSS stylesheets).

To get started, it’s important to create a JS folder and put a script in there. Then link to it just like we would for a css file.

We’ll need a few things to get going.

A js folder
A js file
A js file linked from html page
A button with an event handler
An id for the link element
A stylesheet with new styles we’ll click to

<script src="js/script.js"></script>

<button class="column" name="button" type="button" onclick="swapStylesheet('css/style2.css')">Style TWO</button>

<link id="pagestyle" rel="stylesheet" type="text/css" href="css/styles.css">

function swapStylesheet(newstyles){
document.getElementById('pagestyle').setAttribute('href',newstyles)
}

10:50 Break

11:00 Navigation Basics

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 and scale up later this week.

<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. The code below is just some suggestion for a basic nav.

nav a { 
 display:block; /* comment on and off this line */ 
 background-color: gold; 
 text-decoration:none; 
 text-align:center; 
 margin:10px 0px; 
 padding: 10px 0px; 
}

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 and a <header> because most often the navigation is found in this element. We’ll also add a button too.

Activity #1:
In Codepen, Recreate the top nav menu on this website https://trentwalton.com. Name it CopyThatNav. When complete, drop your link in this CodePen dropbox. Let’s see how close you get!

A link to a pile of creative CSS only (mostly) modern navigation approaches.

A little code bonus for transition effect on bottom border using Pseudo Classes

a:after {
  content: "";
  position: absolute; /*make sure to put relative on the nav a */
  width: 150px;
  height: 3px;
  top: 100%;
  left: 0;
  background-color: #fddb3a;
  transition: 0.5s ease;
  transform: scaleX(0);
  transform-origin: left;
}

a:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}