Week Thirteen, Day 2

December 7th – 12th

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

9:40 Notes

Remote Link for today (if you are not here) – Google Meets
PE Students, remember Wednesday 8am meetings – Required
Review – Run, Hide, Fight as our monthly practice

9:45 Attendance & Graph of the Day

Open up a Google Doc. Label it Graph of the Day with today’s date.
When looking at graphs, we’ll be guided by the following questions:

What do you notice?
What do you wonder?
What’s going on in this graph? Write a catchy headline that captures the graph’s main idea.
What impact does this topic have on you and your community?

Take 5 minutes to write responses to these prompts

10:00 Responsive Design Cont…

Responsive Design consists of three characteristics:

Media Queries
Images that resize
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

Images in our html document:

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.

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. Sweet! Take a look at our code from Monday. For fun – remove the img {max-width: 100%;}

If we use the max-width property set to 100% (like we did Monday) the image will scale down but never up!

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

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:

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 */
}

Contain (image keeps its aspect ratio) but may not fit as image scales
Width and Height set to 100% 100% (image stretches to cover the content)
Cover (keeps aspect ratio and covers but may clip some of the image

I made a quick codepen as an example of these declarations.

HTML 5.1 the Picture Element

We’ll do one of these together. The <picture> element is a lot like the <audio> and <video> elements. Good semantic naming. Easy to use, but very new.

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

The advantage is fast load times and more flexibility. When a browser begins to load the content (called a first paint) it looks for images first. If the image options match the width of the device, the browser and page load faster.

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

There are many tools available when using the picture element (and it can get complex). We’ll do one simple one together. Open CodePen, let’s take a look.

10:25 Mask Break

10:35 Academics

11:25 Lunch

12:00 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!

Go ahead and open CodePen. 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: dodgerblue;
}
/* for fun, add transform: rotate(15deg); to the hover state */

I made this last evening fooling around with Pseudo classes and transforms. We’ll uncomment parts of the code to build a really nice Nav using the flex basis and transform properties.

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 this dailies form so I can mark you as complete. If you need inspiration, there is a lot on the web. W3Schools has a really nice How-To for many pure CSS and CSS / JavaScript nav bars.

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.

1:05 Mask Break

1:15 Background Gradients and Blend Modes

Combining CSS gradients with background blend modes is a nice way to create some very unique backgrounds that load much faster than images made the same way with Photoshop or Illustrator.

What are CSS Gradients: Gradients are a progressive transition between two or more color stops.

CodePen Example you can for to build gradients

What is the background-blend-modes property? sets how an element’s background images should blend with each other and with the element’s background color. multiply, difference, screen, hard-light… basically the same ones you see in Photoshop.

CodePen Example using image, gradients and background blend modes

CodePen Example using mix-blend-mode property set to “screen”

CSS Patterns Gallery – great resource to create your own

2:05 Dismissal

Remote Days – Homework

Posted at the end of the second in class day of the week will be the remote homework you are to complete. This work will be due at the start of the next in person cohort meeting.

This homework be an extension of learning from the week and may comprise of assigned and independent projects.

Remember, you must be completing articles by 2:05 for each remote day (except Wednesdays) to count for CTE attendance.

#1. Create 3 Layouts using A Mobile First Approach

This link will take you to a folder that contains an unstyled version of the first chapter of Alice’s Adventures in Wonderland. Download to your desktop and unzip. Open a clean window of Atom and add this project folder.

Using a mobile first approach and media queries, create three different layouts for this document. The layouts should roughly correspond with small, medium, and large screen sizes. If you read the note I left you at the top of the CSS file, you’ll see what I recommend.

I also popped some images in the image folder. You are welcome to use.

To do this project properly you will have to look at the content using the inspector and think about how it should display at each size. Where should the chapter list go? How should the story be displayed?

You may need to also alter the HTML slightly by adding elements for styling or perhaps moving a block around in the document order or adding divs. That’s okay.

Be sure to use commenting to break up your media queries. We are doing mobile first, so that mean min-width.

The bare minimum requirements:

3 layouts
Adjusting margins
color changes
Using 1 image
Font-Size changes
CSS commenting at each breakpoint (768px & 1024px)
Validating Code using the HTML Validator and CSS Validation service

Pushing yourself:

add a type scale by creating a set of custom properties for your p – h1 (we did this in CodePen)
Use Grid or Flexbox or a combination of both for your layout
Have fun with pseudo classes
Comment out your code, it really helps!
Create navigation using IDs and smooth scroll

Upload finished folder with all items to Week 13. Rename Folder:Alice

#2. CSS Grid w/Queries

Open CodePen and create a new pen with code below these instructions. Recreate the image above using CSS grid.

Add: Set up a media query so that when the screen is smaller than 760pixels the <aside> switches from the left to right side.

Then: set up a third media query at 480 that makes the entire page a column layout with the header first, aside second and footer last.

Name your CodePen CSS Grid w/Queries. Email me the link to your codepen when you are complete.

<div class="wrapper">
     <header>
	<h1>My Fine Header</h1>
     </header>

     <article>
	<h2>Article Title</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
           Adipisci laborum, ex tempora esse fuga consequuntur dolores 
           excepturi, eaque quis incidunt?</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
           Adipisci laborum, ex tempora esse fuga consequuntur dolores 
           excepturi, eaque quis incidunt?</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
           Adipisci laborum, ex tempora esse fuga consequuntur dolores 
           excepturi, eaque quis incidunt?</p>
     </article>

     <aside>
         <h3>My Aside</h3>
	    <blockquote>
	    A fine quote!
	    </blockquote>
     </aside>
</div>

#3. Portfolio

During & After the break we are going to begin working on a multipage website that will serve as a portfolio about you. We’ll include your bio, an image, some reflections as well as a host of really nice exemplars of your work covering many disciplines. This will be a nice professional portfolio of your work that you can show an employer or college or to turn in to your own website showcasing you and your content.

To prepare, you’ll want to do a little research.

On a Google Doc or Google Slide or some other tool create a “Mood Board” that communicates ideas (inspiration) you have for:

Fonts
Color Palettes
Icons
Color/White space, inspirational designs, links
Design elements (layouts you like)
Website features (sliders, gradients, lightboxes)
Links to websites you like

Start by google searching 2019 / 20 website trends, portfolios, web color palettes, student portfolios, web design awards… See anything you like?

Be prepared to share your inspirations next week when you return to class. You can place your inspirations document in your Week 13 folder.