Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org
CAWD
2025
10:05 Today’s Notes & Attendance
Welcome to Week – Seventeen! (2 day week) – make those folders
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!
Braden: Hireability Meeting at 12:10pm in the Library!
Quarter 2 Ends on January 21st
10:10 Bootstrap
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 design, media queries for mobile 1st 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 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.
11:50 – 12:25 Purinton Tree Farm – Client Meetings
12:25 – 12:55 Lunch
12:55 Independent Reading
1:20 Break
1:30 Design Challenge
1:55 Production Time and Guided Support
Current Assignments:
- Wireframe – About Me page
- On Paper – or digitally – Create a wireframe for your About Me page for both mobile and desktop. I have wireframe paper you can use (or just use scrap paper). Take your time to use your mood board to assist you with the layout that you are after. Use a ruler and make this a document that someone else could read and code.
2:38Dailies
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive