Monday, November 11th

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

Week 12

A poem from Adelaide Crapsey
Listen...
With Faint dry sound,
Like the steps of passing ghosts,
the leaves, frost-crisp'd break from the trees
and Fall. — A Monday Poem for November

Notes

Week 12 Folder – Make your folders today
Two Week Plan – let’s review
HTML/CSS Assessment (layouts, basics, styling next Wednesday)
Homework Club is Wednesday. If you have an email from me (you are expected to stay for homework club)
Week 11 What is Due is up. All work due tomorrow, end of day.
Sweatshirt designs Vote Up or Down

9:40 Attendance & Article

9:45 – 10:45 CSS & Responsive Design

Last week we tackled the CSS Grid Layout for webpages. Today we’ll take a look at Responsive Design.

Responsive Design consists of three characteristics:

Media Queries
Images that resize
Fluid Layouts (using Grid, Flexbox or % for widths)

This week we’ll tackle responsive design. There are two schools of thought about responsive design. 1. Mobile First 2. Desktop first

Chart showing increase of mobile web traffic from 2013 to 2018. — https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics

In 2013, mobile phones made up 16.2% of web traffic worldwide. In 2018 that number has climbed to 52.2%. That trend is expected to continue. So, given the graphic, what responsive design school of thought should we begin to adopt?

Responsive Design: Characteristic #1 Media Queries

The Viewport Meta Tag: Gives the browser instructions on how to control the page’s dimensions and scaling. This code will go in every <head> element of your html pages

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width sets the width of the page to follow the screen width of the device

What makes a layout go from fluid to responsive is the use of Media Queries

@media screen and (max-width: 1000px){
     p {
       font-size:24px;
     }
}
/* The @media is the media rule */
/* Screen is the media type     */
/* (max-width:1000px) is the media feature */
/* What this query means is When the browser viewport is smaller than 1000px, apply this block of CSS.  If this condition is not met, then this CSS is ignored */

/* There are 4 Media Types: all, print, speech and screen */

School of Thought #1 Mobile First
A mobile first approach means writing your CSS to cater to smaller designs. Media queries are then used to make changes for bigger screens. This approach usually uses min-width media queries.

School of Thought #2 Desktop First
When writing CSS, your write for the desktop and then add Media Queries for Smaller Screens. This approach usually uses max-width media queries.

Activity: Today we’ll do a coding walk-through of setting up a responsive page to refresh your memory. Let’s start with the Mobile First approach. Please download, unzip and open this folder in ATOM.

10:45 Break (15 Minutes)

11:00 – 12:10 Physics –

12:10 Lunch (30 Minutes)

12:40 – 1:05 Literacy in Focus

Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.

1:05 Afternoon Project _ Practice Media Queries

Using the following code, begin a Mobile First approach to designing your webpage.

To get started, create a folder called Responsive. Inside place a CSS folder and Image folder. Paste the following code and save in your folder. Use inspector and set size to mobile. Begin your base styling there.

Add an additional breakpoint for larger screens. If you are up for it, add two breakpoints. Modify styles as your screen gets larger.

Save folder and upload to Week 12: Filename:ResponsiveAfternoon


<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
<!-- Put in your viewport, title tag, and link your stylesheet -->
</head>

<body>

	<h1>Practicing Media Queries</h1>
	<small>From a mobile first approach</small>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
		nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
		sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

	<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
		nisi ut aliquip ex ea commodo consequat.</p>
<aside>
	<h3> Favorite Vacations</h3>
		<ul>
			<li>Grand Canyon</li>
			<li>Carribean</li>
			<li>Italy</li>
		</ul>
	</aside>

	<h2>Adventure Travel</h2>
	<section>
		<figure>
			<!-- place a grand cayon picture here (go to flickr or unsplash) -->
			<figcaption>Caption</figcaption>
		</figure>

		<figure>
			<!-- place a grand cayon picture here (go to flickr or unsplash) -->
			<figcaption>Caption</figcaption>
		</figure>

		<figure>
			<!-- place a Carribean picture here (go to flickr or unsplash) -->
			<figcaption>Caption</figcaption>
		</figure>

		<figure>
			<!-- place a Carribean picture here (go to flickr or unsplash) -->
			<figcaption>Caption</figcaption>
		</figure>

		<figure>
			<!-- place a Italy picture here (go to flickr or unsplash) -->
			<figcaption>Caption</figcaption>
		</figure>
		<figure>
			<!-- place a Italy picture here (go to flickr or unsplash) -->
			<figcaption>Caption</figcaption>
		</figure>
	</section>
	<footer>  </footer> <!-- Put your name in here -->

</body>

</html>

2:00 Dailies

Link to Dailies and Link to Responses