Thursday, January 4th

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

10:05 Today’s Notes & Attendance

Hey, it’s Thursday – It’s a Blue Day

10:10 A little more Bootstrap…

At this point I either sold you on Bootstrap or I did not. Either way, it’s a tool and a very quick way to assemble a website without too much customization* and using the default class styles.

*I will tell you that with all Bootstrap websites I have build for clients, I will make a custom stylesheet so I can override the things I don’t like as much.

Bootstrap Nav

Working with the Navbar elements. Navbars in Bootstrap can get pretty long – and confusing. We’ll try to keep things simple by breaking down the structure. CodePen is a perfect place to test out the Navbar and some of the features. Let’s head over there and start a fresh project.
Name it Navbar Practice w/Bootstrap

To create a navigation bar we can always use the <nav> html tag and assign the navbar class

<nav>
  <a href="#aboutme">About Me</a>
  <a href="#bestworks">Best Works</a>
  <a href="#resume">Resume</a>
  <a href="#funfacts">Fun Facts</a>
</nav>

Inside the nav is usually a container to hold all of the nav items.

you might want this today: https://robohash.org/V9H.png?set=set1&size=150×150

10:50 Break

11:00 Exploring other front-end frameworks – Blitz

With your team, look at your assigned framework.

Ask yourself these questions:

How does it work (how do you add it to your project)
What would you use if for?
What is the documentation like? (good, bad, lots of examples)
Is it free?
Something else interesting – find it and share it

Tailwind – Row 1
Foundation – Row 2
w3.css – Row 3
Bulma – Row 4
Skeleton – Row 5

11:20 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.