Thursday, January 5th

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

Week Seventeen

Today’s Notes

Today is an EHS A Day
SKILLS USA Leadership – Monday – Job Skill Demo Practice
- 11:35am with Mr. Cronin – are you ready (I suspect no) – Let’s get there
  - Eli – you need to respond to Sarah Knight’s email
  - 4-5 Minutes for Mr. Cronin’s class
  - Wednesday January 11th is competition day – Eli, Schuyler, Tom – see email from Ms. Knight
SKILLS USA Pin Competition: Internal Judging of Pins is set for Wednesday, January 25th.
- All pins due by Tuesday the 24th for printing – earlier is better – time for feedback and revision
Printed Resumes needed for Andy, Matt, Eli, Schuyler and Tom – you can send to me
Tom – you have a meeting tomorrow at 12:30 – mark your calendar
Jan. 16: MLK Day: No School
Last day in Bootstrap
Sometime today – head over to Local by Flywheel and click the download button – download to desktop. More on this later
Books – You all are doing a good job transitioning to reading after lunch. Remember to let me know when you complete a book so I can print your book cover.

9:40 Attendance

9:45 Reading Response – The Close Read

When you close read, you observe facts and details about the text. For the next several Thursdays I am going to supply you with a short article that you are intended to close read. Take your time.

To successfully close read you will be interpreting your observations.
What I’m basically getting at here is inductive reasoning: moving from the observation of particular facts and details to a conclusion, or interpretation, based on those observations.

With inductive reasoning, close reading requires careful gathering of data (your observations) and careful thinking about what this data adds up to.
When you practice close reading you will become a stronger reader. Let’s give it a try.

9:50 Bootstrap Quiz

No worries – just the basics here. With your partner, open up Socrative and sign in using your first name (example Will/Tom). One computer per team only. Pick your correct team color as assigned.

Work through the questions for this little space race. You will need to consult the Bootstrap Docs page to assist you.

Teams:

Kaden/Andy Team Blue
Finn/Eli Team Magenta
Hayden/Eric Team Lime
Tom/Schuyler Team Peach
Lance/Emmit Team Violet
Asa/Garrett Team Teal
Ryan/Matt/Emma Team Indigo

10:15 Bootstrap Icons

Let’s check them out – since they’ve been staring us in the face everytime we open up the Bootstrap documentation. We’ll install with a CDN just like we did with Bootstrap.

Let’s use the same Codepen we were using for the Nav Menus yesterday.

10:45 Bootstrap Hamburger Menu and Fixed Navbars

A little more heavy lifting than we did yesterday. However, this is useful for that added extra you can get with Bootstrap and some JavaScript. The Hamburger menu is great solution for mobile devices and it is not too much to code.

Responsive Behavior

Navbars can use .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

11:15 Adding a Back to Top Button!

Let’s design a back to top button for your Bootstrap page. This is a nice little feature for those especially long one page websites. Let’s open the CodePen that had the navigation schemes on it and we will build one in our sandbox.

To make this button, we’ll build a footer to place the copyright information and the Back to Top button from the Bootstrap Icons.* We’ll use the positioning classes in bootstrap. Remember to position something we need position:relative on the parent and absolute on the button icon.
With Bootstrap the Utility position classes make this pretty easy.

*Don’t forget, to use the Bootstrap Icons we need to add the CDN for Icons in the <head> element.