Friday, January 3rd

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

10:05 Today’s Notes & Attendance

Week 17 – Friday

Bootstrap knowledge assessment
Exploring other Frameworks (there are many!)
- Tailwind
- w3.css
- Skeleton
- Ulkit

10:25 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 (almost) always have the following pattern:

A <div class=”container”> to wrap everything (you could use a semantic element too, like article, aside, main, body, footer, header….)
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 which is 578pixels

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:40 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 work an example in CodePen. 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 Share outs – About Me Wireframes

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 2nd –4th Week 17	Collection of portfolio assets Personal Photo Final Draft About Me Site Design, Layout planning Wireframe of About Me (graded) – Friday
January 5th -9th – Week 18	Wireframes Due this week Coding Sprint, desktop & mobile– all pages
January 12th – 16th – Week 19	Usability testing of coded website Coding Sprint, mobile version Updates Presentation of Portfolios (Monday, January 20th)

11:50 – 12:25 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 (the About Me page)
Image of Yourself – in your images folder, edited and resized on your about me page

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