Wednesday, November 9th

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

Week Eleven

Today’s Notes

Today is an EHS B Day and Wacky Wednesday
BFA early release, you are dismissed at 11:20 so you can have lunch before the long bus ride
EHS B day students will leave at 11:55 today for lunch before your class, unless you want to stay
Communication Check – Drawing CCV – do you have class the Friday before the November break?
Callbacks: Lance – Public Issues for CTE 7/8
Sweatshirts

9:40 Attendance

9:45 Cascading Style Sheets

CSS Review on Socrative

10:00 Block/Inline Elements and Box Sizing – Border Box Properties

Divs are nothing more than boxes. In fact, all of the elements you are using are basically boxes.

Some elements (boxes) take up the whole page left to right (we call those block elements!) Some examples of block level elements are: paragraphs, headings, lists, address, blockquotes, div, articles, sections, header, footer, form

Some elements are inline and take up a box or space (in the line) of the content they are found. Some examples of inline elements include b, em, var, button, label, span, abbr, small

Let’s tackle an issue out there that you might come across – border-box

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

If you think carefully, this can create a problem when trying to line up content on a webpage. If you set a width and height of an element to say 200px and add padding of 5px and a border of 1 px = well you may have a problem because the width and height of your box is no longer 200px!

Let’s build an example in CodePen together to see how this works. Then, let’s fix the problem.

To the rescue! – is the asterisk (*). The asterisk will apply a property and value to all elements. We will declare this in our Stylesheet. The *:before and *:after means this rule will apply to any pseudo elements too

*,*:before, *:after {box-sizing: border-box}

10:35 Break

10:45 Planning and Coding with HTML and CSS

Any document can become a webpage really.

Take a look at the handout Cinnamon Raisin Rye Bagel . Take a moment and identify some html tags you will need to create a digital version of this document. Use a pencil and mark-up your paper. You don’t have to close up tags.

Circle anything that might seem special or out of the ordinary.

Now, let’s code it! I’ve started a version in CodePen to save some time. Fork this version for yourself.

Together, we’ll write the HTML and CSS necessary to mimic the handout. This will be a good review from last year. We’ll learn:

adding classes
using empty elements
proper semantic html layout
importing / using custom fonts
floats
margin / padding
css

11:30 JavaScript – Some Basics today

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout / styling of web pages

3. JavaScript to program the behavior and interactivity of web pages

So if you want to have your webpage be interactive, you are going to need to learn some JavaScript. Fortunately there are thousands of resources, code snippets and tutorials to assist with all kinds of projects.

Our goal today is simple:

create a folder to house the Javascript
create a file for our scripts
link to the folder on the webpage where we want JavaScript to run

For our JS demo, we’ll explore Event Driven Programming

Event-driven programming is a programming concept in which the flow of the program is determined by events initiated by user actions (mouse clicks, key presses, hover, page loads, scrolling, form submissions)

The onclick event occurs when the user clicks on an element.

There are several other events too: onclick, onmouseover, onkeydown,onkeyup, onload,onblur….

alert("Hello, Will, Nice to see you!");
//this is a little alert that will run when the page loads


function hello(){
    alert("Hello, Will");
}
// this is a little alert function that will run we the user interacts with the page like a button



function goodbye(){
    document.getElementById("demo").innerHTML = "GoodBye!";
}
//this is a little function that allows us to change the html by targeting the ID of an element

12:15 Lunch

12:45 Game Testing

Let’s help our Champlain College candidates by testing out their analog games. Testing is an important part of the development and design process. As a tester, you should provide feedback. We’ll leave it to your Game Designer’s to help us with instruction.

1:10 Break

1:20 20% Production Time & Guided Support

HTML Resume
Mobile Phone Model practice – Due Friday
About Me – rough draft
About Me – Headshot / Photo