Wednesday, January 3rd

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

10:05 Today’s Notes & Attendance

Today is a Wacky Wednesday

Philip – WorkKeys testing today– 10:15 – 11:15am in E109

Call Backs: Andrew & John (Public Issues 1:00pm)

First semester ends on January 18th – that’s in two weeks

In this new year we will be jumping into animation 2D and 3D, game design and game development as well as Skills USA teams and programming. The time will go fast and I think you’ll find enjoyable. That means the web programming will wrap up around the semester end.

Goodreads – great place to set a goal and keep track of your reading, get recommendations, etc….

Cameras: Brodey and Ariel – time to return

10:10 Web Portfolio

The last major project of this quarter is the creation of your very own hand coded portfolio. We started this project shortly before the new year. Over the next two and a half weeks we’ll scaffold the work.
This project will be the culmination of the web tools, design and development you have been exploring over the last month. You may use static HTML/CSS/JavaScript and / or Bootstrap (or another front end framework)

Project Details – Make a Copy

January 3rd – 5th – Week 17	Collection of portfolio assets Personal Photo Final Draft About Me Site Design, Layout planning Wireframe of Desktop design (graded) – Friday January 5th for desktop Wireframe (due)
January 8th -12th – Week 18	Wireframe of Mobile version (graded) -Friday, January 12th for mobile Wireframe (due) Coding Sprint, desktop & mobile– all pages
January 15th – 19th – Week 19	Usability testing of coded website Coding Sprint, mobile version Updates Presentation of Portfolios (Friday, January 20th)

Bootstrap

If there is one take-away about Bootstrap is that the classes you use in conjunction with your html elements create a lot of the layout and style! Here is an excellent Cheat Sheet

The second takeaway and most important part of understanding Bootstrap is that Bootstrap is built on the Grid system and is a mobile first approach.

Bootstrap pages always have the following pattern:

A <div class=”container”> to wrap everything
A <div class=”row”> to start a new row
A <div class=”col-md-8> or some other arrangement of columns within the row . col – * – * Let me explain:

col stands for column

sm stands for the size screen your column will break, sm is a good default (it means that things will display as a pancake when the sm breakpoint is hit

8 stands for the number of grid spaces you want the column to take (there are 12 grid spaces in Bootstrap)

<div class="container"> 
 <div class="row"> 
     <div class="col-sm-4"> 
      One of three columns 
     </div> 

     <div class="col-sm-4"> 
       Two of three columns 
     </div> 
 
     <div class="col-sm-4"> 
        Three of three columns 
     </div> 

 </div> 
</div>

10:30 Bootstrap Rows

Yesterday we made some rows. Let’s dive a little deeper….

Rows are designed to be column containers. If we don’t state a size, the row will distribute the columns along the grid inside the row. Let’s look at an example in CodePen. (be sure to fork it if you use it). What happens when we have more than three columns in a row? What if we don’t specify an amount to space on the grid?

Row Columns (row-cols-__) classes create an equi-distant grid of content. This is really handy if you want to create a grid of images or content. The only drawback is that they do not scale as nicely depending on how many row-cols you create.

Let’s make some robots while we do this too. You’ll see what I mean.

10:50 Break

11:00 Portfolio WorkSession

This is a short work-session to lunch. You should have this work done:

You should have a folder called WebPortfolio on the WebServer. Inside you should have at least two pages coded. Don’t worry about CSS
- index.html (which is your about me page)
- resume.html
You also should have a wireframe of your landing page and a mobile version
Image of Yourself – in your images folder, edited and resized on your about me page

Wireframe of rest of your site (due Friday)
Connect Pages with Navigation
Build the structure based on your desktop wireframe design (you can CSS later or use Bootstrap)

11:55 Lunch

12:25 Independent Reading

12:50 Break

1:00 Production Time and Guided Support

Work Session – Review Pho Hong assignment from yesterday

Work on Portfolio

If you were not here yesterday – look at the dayplan and complete the Bootstrap Challenge (ask me for help)

1:50 Dailies

Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive