Class hours: 10:05 – 2:45
Mr. Bohmann | email@example.com
10:05 Today’s Notes & Attendance
- 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:
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.
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
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.
12:25 – 12:55 Lunch
12:55 Independent Reading
1:30 Design Challenge
1:55 Production Time and Guided Support
- Pho Hong Menu using Bootstrap – Due January 5th
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive