Tuesday, December 3rd

Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org

Notes

• December, Week 14 make your folder
• Week 13 is Due Today
• Drawing 2 – Are you in?
• Wide resource net for web Dungeons & Developers
• Bumper Sticker Submissions

9:40 Attendance & Article

9:45 – 10:45 Frameworks for the Web…

Yesterday we spent a little time exploring Bootstrap – one of the most popular HTML/CSS and JavaScript frameworks on the web.

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 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:

1. A <div class="container"> to wrap everything
2. A <div class="row"> to start a new row
3. 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
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">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</div>

Activity: Let’s tackle this Bootstrap page I made. Fork it. Rename Bootstrap Container – Lastname.
I’d like you to do the following using only Bootstrap (no added CSS):

1. Change the background color for the first container
2. Change the text color for the first container
3. Center the text in the first container
4. Add padding to the first container
5. Create an alert between the first container and first row
6. Change the second row – remove one of the columns
7. Add a third row – 4 columns
8. Add a fourth row – but just 1 column. Have it stretch across 8 grid spaces, but add offset-2
9. Change the background of every column using bootstrap colors
10. Play around with spacing – check this out to learn more about the shortcode Bootstrap uses for margin and padding or use the easy to follow Cheat Sheet and look under Spacing Utilities

When complete – Drop the Link to your CodePen on this Form

10:45 Break (15 Minutes)

11:00 – 11:50 Physics – Room m117

Class meets in room m117 at 11am. Go to class immediately from break. When class is over, you will head to lunch.

11:50 -12:20 Lunch (30 Minutes)

12:20 – 12:45 Literacy in Focus

Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.

12:45 Project Time….

There are a number of activities to work on this afternoon. Please make sure you complete item #1 before moving on to anything else on the list.

• Week 13 – All work in Folder – Check What is Due
• Make Week 14 Folder
• Choice #1 is to create a clone of the Bootstrap Jumbotron Page using CodePen
  1. Build the structure for the Jumbotron page using good HTML5 semantic tags.
  2. Add styling using Bootstrap’s classes. You shouldn’t need more than a couple of additional styles — almost the entire page was built in Bootstrap
  3. When complete – Post a ScreenShot to your Week 14 Folder: Filename:JumboSprint and send me the link to the CodePen
• Choice #2 Take the December CodePen Challenge on nth-child & friends
  • The challenge is to only use pseudo classes (also called positional selectors) and nothing else. So if you want to do something fancy, you’ll have to use fancy selectors to get your hands on what you need. By “and friends” CodePen means your are free to explore other pseudo selectors like :only-child, :nth-last-of-type(), and the like.
  • You’ll notice in the challenge they are using <dl> <dt> & <dd>. This stands for description lists, description terms and description definitions. Check out more on this from W3schools
  • Send me the link to the CodePen. Name it December Challenge
• Choice #3 Menu Challenge – Pho Hong
  • Pho Hong is a Vietnamese Restaurant in Burlington. Take a look at this menu. Create a one page menu (pick one or two section) using Bootstrap. You can build this in Atom or CodePen – your choice.
  • Use FontAwesome to help with icons
  • Use HTML Special Symbols to help with those special characters
  • Name CodePen project or file PhoMenu upload or send link
• Choice #4 for the Brave – Rebranding
  • This is not a coding project, but rather an opportunity to use a variety of tools to create a slideshow presentation or some other fun way to go through some information about what a technical education is, information about BTC & CTE. Link to current presentation from BTC.
  • This project is very open. The client (our Guidance folks) don’t really know what they want, but they want something better, something more interesting, something that you might relate to.
    Maybe you experience some good presentations from college visits, maybe it’s time to think outside the box.

2:00 Dailies

Link to Dailies and Link to Responses

2:05 Dismissal