Week Sixteen, Day 1

January 4th -8th

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

9:40 Attendance & Notes

Remote Link for today (if you are not here) – Google Meets
Week 16 – Go make your first folder of the new year
The Winter Film Club – Through RETN –Learn Mor e

9:45 Frameworks for the Web

A web framework or web application framework is a precoded software application that is designed to support the development of web products. You have probably heard of Bootstrap, no surprise, Bootstrap is one of the most popular open source web frameworks on the web.

A List Apart defines a framework as a set of tools, libraries, conventions, and best practices that attempt to turn routine tasks into generic modules that can be reused.

The goal here is to allow the web designer or web developer focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.

A good framework serves multiple purposes.

Reduce the time from concept to coding
Improve accessibility for all users
Focus on UX and UI (User Experience and User Interaction)
Less coding knowledge necessary
Scalable for small and large projects

So far we have been writing our own code to create parallax scrolling, responsive navigation, media queries for mobile first design, hero pages and responsive layouts using flexbox and grid systems. But what if a library of those features were precoded and you just grabbed code from the library? Well, you’d save time!

What is Bootstrap – Bootstrap is a free Open Source front end library for building website and web applications. It is the most popular project on GitHub.

Instead of writing CSS for each HTML element, we can use classes to give style to the structure. Example: If we use the class= “alert alert-danger” a banner will be precoded as red – like danger. Check it out…

<div class="alert alert-danger">
  A simple danger alert—check it out!
</div>

Bootstrap can be downloaded or linked to from a Content Delivery Network (or CDN) for short. Let’s play around a little with Bootstrap – Check Out My CodePen. Fork it after you sign in.

10:25 Mask Break

10:35 Academics

11:25 Lunch

12:00 Bootstrap Continued

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

Change the background color for the first container
Change the text color for the first container
Center the text in the first container
Add padding to the first container
Create an alert between the first container and first row
Change the second row – remove one of the columns
Add a third row – 4 columns
Add a fourth row – but just 1 column. Have it stretch across 8 grid spaces, but add offset-2
Change the background of every column using bootstrap colors
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

1:05 Mask Break

1:15 Bootstrap Webquest & Practice

Exploring Bootstrap Activity – Space Race. With your partner(s), complete the webquest by exploring the Bootstrap web resource page. The questions will be provided for you. In your group have one partner login to Socrative Student. Room Name is …

Practice time: Deliverable – 1 page website (codepen) about pets or cartoon character(s). Include 2 components and 2 utilities from Bootstrap. Check Documentation to assist (look on left side of screen). Place codePen link in the dropbox listed above. Name it bootstrap practice