Tuesday, January 2nd, 2024

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

10:05 Today’s Notes & Attendance

Week 17 – 2024 – Happy New Year

Let’s hope for better weather in 2024 (less rain and clouds!)
This is a big year for all of you. It is the year you graduate! – That’s a little more than 5 months from now!
Philip – WorkKeys testing tomorrow – 10:15 – 11:15am in E109
Finn – you are leaving at 2:15pm today
First semester ends on January 18th – that’s in two weeks.

10:10 Monday Mail on a Tuesday make a quick check – you seniors are important!

10:15 Bootstrap 5.3

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.

There are many frameworks out there. Some popular ones:

Bootstrap
W3.CSS
Tailwind
Pug

A List Apart (a great site for people who make websites) 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 rst 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.
Just like this one.

<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 take a quick look at Bootstrap’s documentation and how to get started.

Then, Let’s play around a little with Bootstrap – Check Out My CodePen

10:50 Break

11:00 English with Mx. Yopp

11:50 Bootstrap Continued…

Working with Bootstrap. Fork my CodePen and use the instructions found in the CSS section to complete your challenge. You will likely need to reference the Bootstrap Docs page to learn more as you go.

Drop link to your CodePen in the dropbox.

Assignment: Pho Hong Menu Challenge

Pho Hong is a Vietnamese Restaurant in Burlington. Link to Menu

Deliverable: Create a one page menu

Pick just two sections (of the menu). Create a one page menu using Bootstrap. You will build this in VS Code – upload to the webserver when complete
Layout and style any way you like – use the Bootstrap utilities and components to help you
Use Font Awesome to help with icons or try out the new Bootstrap Icons!
Use HTML Special Symbols to help with those special characters if necessary
Style however you like using only Bootstrap (no CSS!)
Page must have a break for mobile layout – We’ll use the sm breakpoint (576px)
- You do not need a css stylesheet to make this breakpoint!
Folder Name: PhoMenu and index.html for your page. Load to the server.
Check for Validation!
Project is due on Friday, January 5th.