Skip to content
Cawd Logo Cawd
  • Home
  • About
  • Assignments
  • Student Work
  • Resources
  • Contact

Thursday, November 14th

Thursday, November 14th

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

coffee and cookies

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)

pizza

12:40 – 1:05 Literacy in Focus

image of book covers

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

CSS trading card with image of lobster
CSS 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

2:05 Dismissal

Cawd Instructors:

Matt Cronin

Will Bohmann

Instragram Facebook Twitter

A little about Cawd:

Serving high school students interested in Computer Animation, Game Design, and Web Development in North Western Vermont.

Students continue at:

University of Vermont Ringling School of Art and Design Northeastern University Rochester Institute of Technology Concordia University

Students find careers at:

Dealer.com Union Street Media Rovers North Prudential Investments DockYard
Navigate to top of page