Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Today’s Notes
- Today is an EHS A Day
- Non-Perishable food items – let’s fill the box!
- Game Day – 100% complete through December 21st to qualify. 100% complete means that all of your materials are turned in and graded. Grading will be ongoing, so if you submit your work on Game Day, I will grade it and you might just be eligible. Don’t wait to the last day though, not very professional.
- Last CCV Class is this Friday, December 17th
9:40 Attendance
9:45 Monday Mail
9:50 Image Gallery w/Hover Overlay
This morning we will build another image gallery to go with last week’s lightbox. This one is done purely with CSS and has a nice effect with a absolute positioned div.
After we complete this bit of code, think about your own work and how you might want to display it.
Remember to position something, the parent element needs to be also positioned. position:relative.
10:35 Mask Break
10:45 English with Ms. Yopp
11:35 Front End Frameworks
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 https://alistapart.com denes 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 play around a little with Bootstrap – Check Out My CodePen
12:15 Lunch
12:45 Skinny Lesson – Bootstrap Challenge
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.
1:10 Mask Break
1:20 Production Time & Guided Support
Bootstrap Codepen Challenge(drop in the dropbox)
Purinton Tree Farm (past due)
Font Perfect (due Tuesday, December 14th)
If you are all caught up, begin to sort and collect your favorite images and work from this year or past years in preparation for your web portfolio.