Tuesday, November 19th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

About Me and Photo are past due – due yesterday. I cannot review your work if you don’t hand it in.

IDs / Classes & Ids Quick Review – and Flexbox

Sample Portfolio – what we are building to at the end of the semester, Sample #2. You’ll see there are a lot of creative ways you can take your portfolio – Sample Three

HTML elements provide the structure to webpages while the CSS adds the style. JavaScript makes pages interactive.

To help the HTML elements stand out, we can use “styling hooks” by adding IDs and Classes to the elements. Did you know that an element can be loaded up with many classes – handy! IDs and Classes can be accessed and targeted with JavaScript. What you chose to name your ids and classes is entirely up to you. Best to make them make sense!

IDs are unique

Each element can have only one ID
Each page can only have one element with that ID

Classes are not unique

You can use the same class on multiple elements
You can use multiple classes on the same element (just leave a space)

Flexbox Revisited

CSS flexbox (also referred to as flexible box) provides control over how elements are positioned, aligned, and sized within their container.

Remember, those elements have to be in a container (like a <div> or <section> or some other block level element).

Flexbox allows you to do things like, specify how elements are aligned vertically and horizontally, change their order of appearance, change the direction in which all elements are laid out, and more.

Before flexbox, elements had to be positioned and floated and complex layouts could be really challenging

A very good explanation of Flexbox #1 –

A very good animated explanation of Flexbox #2 –

courtesy of samantha ming at samanthaming.com

CSS flexbox properties define how flex items are sized, how they wrap and which direction they go in.

Flexbox items grow and shrink depending upon how much content is needed to fit the box.

Let’s practice using IDs and Flexbox. We’ll also add some smooth scrolling to create a simple, scrollable web page linked by IDs. This is a great way to create a one page website. Open CodePen and start a new pen. Name it Smooth Scroll with IDs. We’ll also incorporate some flexbox as a review.

html{
  scroll-behavior:smooth;
}

10:50 Break

11:00 English with Mx. Yopp

11:50 – 12:25 FileZilla – Moving web files

FTP or File Transfer Protocol is a communication protocol used for the transfer of computer files from a server to a client on a computer network. In our case we (are the client) and the website we are going to create is on another computer (server).

There are many FTP programs you can use. FileZilla has worked really well for us for years, so that is the one of choice for Windows machines. On a Mac, I like to use CyberDuck.