Class hours: 10:05 – 2:45
Mr. Bohmann | firstname.lastname@example.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.
Project Details – Make a Copy
|January 3rd – 5th –
|Collection of portfolio assets
Final Draft About Me
Site Design, Layout planning
Wireframe of Desktop design (graded) – Friday January 5th for desktop Wireframe (due)
|January 8th -12th –
|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)
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)
One of three columns
Two of three columns
Three of three columns
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.
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)
- 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)
12:25 Independent Reading
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)
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive