Skip to content
Cawd Logo GAWD
  • Home
  • About
  • Assignments
  • Resources
  • Contact

Tuesday, November 16th

Tuesday, November 16th

Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org

Gradients compliments of Eggradients

Today’s Notes

  • Today is an EHS A Day
  • Color Tools we looked at yesterday:
    • Paletton.com
    • Eggradients
    • Adobe Color
    • Huesnap
    • coolors.co
    • colordot
  • Last CCV day is December 17th!
  • Carter – VSAC Appointment – November 29th @10am
  • Today’s CodePen Dropbox

9:40 Attendance

9:45 Responsive Design Continued….

Responsive Design consists of three characteristics: 
1. Media Queries
2. Images that Resize
3. Fluid Layouts (using Grid, Flexbox or % for widths)

Yesterday we tackled a design using media queries with a Mobile First mentality. 

Mobile First is designed mainly for functionality. It’s a very focused approach focusing on core functionality. As the design changes for higher resolutions (often called progressive enhancement) the additional features are added. The challenge is organizing the core content for all screen sizes and figuring out what is most important.

Responsive Design: Characteristic #2 – Images that Resize

In order to have responsive images, we need to get our images to scale to the device width.
So, to do this, we’ll tackle the width property.

Images in our HTML Document

If the width property is set to a percentage and the height is set to auto, the images will be responsive and scale up and down. For example:

img {
  width: 100%;
  height: auto;
}

//using this property will allow the image to scale down but never up higher than 100%

Take a look at our code from Monday. For fun – remove the img {max-width: 100%;}  and see what happens at different screen sizes.


Images in our CSS document (background images)

If you call images in your CSS, the background-size property needs to be added. The image is added to the containing element. There are three methods for setting a responsive image in your CSS:

div { 
 width: 100%; 
 height: 400px; /*this depends on how large you want the container */ 
 background-image: url("../images/img_flowers.jpg"); 
 background-size: cover; /* or contain or set width & height */ 
} 
  1. Contain (image keeps its aspect ratio) but may not fit as the image scales
  2. Width and Height set to 100% (image stretches to cover the content)
  3. Cover (keeps aspect ratio and covers but may clip some of the image)

Let’s make a Codepen titled Images in your CSS to see how this works.


HTML 5.1 the Picture Element

The <picture> element is a lot like the <audio> and <video> elements – very semantic. This is an easy element to use but not used as much as it should be.

Using the <picture> element, we can call up several different images and have them resize

and change within that element.

<picture> 
 <source media="(min-width: 650px)" srcset="images/food.jpg"> 
 <source media="(min-width: 465px)" srcset="images/car.jpg"> 
 <img src="images/girl.jpg" style="width:auto;"> 
</picture>

According to this code:

  1. An image of a girl will show up as default and for screens smaller than 465px
  2. When the screen is larger than 650px and image of food will be displayed
  3. When the screen is between 465 – 649px an image of car will be displayed

Let’s do a quick sample together in CodePen.

Lastly, why do we care?… about the <picture> element

10:35 Mask Break

10:45 English with Ms. Yopp

11:35 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 CodePen)

<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.

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; 
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:
Create a new CodePen. Name it My Custom 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 on the form in the top of the dayplan

Activity #2:
In Codepen, Recreate the top nav menu on this website https://trentwalton.com. Name it CopyThatNav. When complete, drop your link on the same form as you did earlier (top of the dayplan). Let’s see how close you get.

12:15 Lunch

12:45 Skinny Lesson – more gradients and blend modes

In CSS, there are two properties responsible for blending.  mix-blend-mode is used to blend DOM elements, and background-blend-mode is used to combine multiple CSS Backgrounds.

CSS Patterns Gallery https://projects.verou.me/css3patterns – great resource to create your own

1:10 Mask Break

1:20 Production Time & Guided Support

The Good, Bad and the Ugly (due Wednesday)

Two Nav Bars – the activity we did after English (due today)

2:05 Dismissal

GAWD Instructors:

Matt Cronin

Will Bohmann

Instragram Facebook Twitter

A little about GAWD:

Serving high school students interested in Gaming, Animation, 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