Monday, November 27th

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

10:05 Today’s Notes & Attendance

Today is a CTE Red Day
CCV classes Friday, just a few more Fridays left
Filezilla – do you have it downloaded? You’ll need it today
Famous Photographer Assignment – let’s take another look

10:10 Monday Mail

10:15 CSS Flexbox & Flexbox Containers, 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 build a sample in CodePen so you can see what I mean. It’s called flex for a reason!

Before we get started with our next activity, let’s look another Super Power of Adobe Bridge – WORKFLOW

With Adobe Bridge, batch resizing and naming is really fast and efficient. Let’s look at how to set up a workflow and then batch process some photos to prepare them for the web.

Activity: Create a Photo Gallery using Flexbox. Based on what we just learned, this should be pretty easy. All we need are some photos and we need to decide what direction we want our flex direction to be: row or column. I’ll help you get started.

You will need:

A Project Folder on your desktop- Name it PhotoGallery Flexbox
An images folder with images 6-9 of them.
When selecting images, use ones from your LTA Photo Assignment or other photos from your photography.
Images – you will want to adjust the size of them (pro-tip). Try 680 x 420 for this assignment
A html document – name it flexphotogallery.html
Don’t forget to load up the <head> tag with all that awesome meta data (author, title,description)
A css style sheet linked to your html document
We’ll do a gallery walk before lunch of your photo gallery.

Web Hosting for Students

Over break I was able to secure your accounts with a web host.
After English, we’ll set up our accounts and then you can FTP to your new hosting server.
This is a graded assignment – I’ll look for it on the your personal server.
Due Friday December 1st

The flex container properties are:

flex-direction.
flex-wrap.
flex-flow.
justify-content.
align-items.
align-content.
align-self.

10:50 Break

11:00 English with Mx. Yopp

11:50 Our New Web Hosting with Web Hosting for Students and FTP

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.

Each one of you are going to create a hosting account today. We will be using a service called Web Hosting for Students. Your subdomain will be good until the end of the school year. If you choose, you can migrate your account to your own domain name. (maybe a nice holiday gift?)

After we create our accounts you will have access to your very own cpanel. A cpanel provides a graphical interface and automation tools designed to simplify the process of hosting a web site to the website owner or the “end user”. It enables administration through a standard web browser. We’ll create a login to our cPanel and then set up the process to do File Transfer Protocol. Clear as mud right!

https://webhostingforstudents.com/essex-westford/

I am will email your code/voucher to set up your account. When setting up your account I want you to use your school mailing address and when we are creating our domain, I am going to recommend: firstnamelastname
Example: willbohmann.webhostingforstudents.com

So if your name was Tyler Browne your account would be tylerbrowne.webhostingforstudents.com

We’ll take some time to set this up together and then I’ll show you how to FTP or file transfer protocol to your server.