Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Notes
- Drone workshop – reschedule – date unknown
- Wednesday Next Week – Quiz HTML/CSS
- Thursday Next week –
- Champlain College Visit 9:45
- Game Day @ 11am – Afternoon
9:40 Attendance & Article
9:45 CSS Menus / Navigation
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 or Choose Your Own Adventure)
<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!
Go ahead and open CodePen. If you don’t have an account, quickly make one. Copy and paste the <nav> above code.
Now, let’s add and subtract some basic CSS to style…
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 – <nav> is our containing element. Fork your CodePen or comment out your previous CSS and paste this code below:
nav {
display:flex;
flex-direction:row;
flex-wrap: wrap;
}Nice, let’s use some of 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: blue;
}
/* for fun, add transform: rotate(15deg); to the hover state */Activity 1: Create a new CodePen. Name it Basic Navigation. Create your structure first, use Flexbox. Inside your <nav> element, include at least six links. Style as you like. Play around with the different properties. When complete, share your CodePen with me via Email so I can mark you as complete.
Activity 2: Recreate the top nav menu on this website. When complete, drop your link on this dailies form so we can check out how close you got.
10:45am Break
11am Sticky Navigation
The title of an extensive article on responsive design menus can be found by following this link. This is an exhaustive look at different approaches to menu solutions with real world examples.
A sticky navbar stays in place as the page scrolls. This can be really handy for small screens with lots of content. The feature allows users to be able to access navigation at all times. Let’s tackle one together. Follow along with my codePen.
Besides Sticky, we can also show navigation by placing it to the side of the content and setting the height to 100%. This way the navigation will always be on. Here is another example to follow along with.
Activity: Go back to your Alice in Wonderland Assignment from yesterday. Using some of the techniques we looked at today. Design and improve your Navigation Menu and finish up your assignment.
12:10pm Lunch (30 Minutes)
12:40 – 1:05 Literacy in Focus
Grab your book and chill out. This is your time to build reading stamina. Your book is all that you need.
1:05 Original Character Trading Cards
At this point, you have a information created for your original character. Using CSS Flexbox properties, make a series of trading cards for your character at least (3 cards). Each card can be a power or special attribute. Organize the cards on one webpage. Keep the styling on the webpage white, but focus on the cards.
This code from QuackIt will help you think about the cards you want to design and how you want to layout. All of the code can be found here.
You might consider using Font Awesome Icons to illustrate your characters powers.
2:00 Dailies
Link to Dailies and Link to Responses