Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Notes
- Video Contest – Prize Money
- Video Contest – Rules
- PowerSchool – Check grades – you don’t want zeros!
- NTHS National Technical Honor Society – Need semester average of an A- to qualify – finish HS strong.
9:40 Attendance & Article
9:45 – 10:45 Building Bootstrap – from Scratch
Today we are going to build a project using Bootstrap. To speed up load times and reduce files, we’ll grab our compiled CSS and JavaScript from the Bootstrap CDN.
Create a new folder on your desktop – Call it Diveshop. Inside create a CSS file and an Images file.
Open the folder in ATOM
Create an html page – name it home.html
Create a css page – name it custom.css and link it to your HTML document under the bootstrap CDN link in the <head> element
The upside to adding your own custom stylesheet after the default bootstrap stylesheet is that in the event that Bootstrap gets upgraded, you can simply replace the Bootstrap stylesheet with the new one and your custom styles will remain untouched
Activity: Update the Waterfront Diving Center website. Don’t worry, we are only going to tackle three pages – the Home Page and the About Us page including Services. Use as much Bootstrap as you can.
The Client is looking for:
- Top Navigation (even though we are only doing three pages include text for all of the navigation)
- Slideshow or Carousel on the Home page (grab images from Pexels or UnSplash)
- Organized and clean columns for Staff Bios
- Larger font
- Nautical / dive theme
Not sure what’s up with dive shops – here is a pretty ugly one
Before you jump into coding ….
I want you to sketch a couple of layout designs – look at some of the Bootstrap templates, look at some Scuba Dive Shop Websites – do some research.
I want to see a rough outline of your layout!
There will be two grades for this project. The first grade will be the creation of an outline, plan, wireframe or sketch of what you intend to code for each of your pages
The second grade will be the execution of the project and the incorporation of the Client Wishlist.
Filename:Diveshop_Lastname with all assets uploaded to your Week 14 Folder.
10:45 Break (15 Minutes)
11:00 – 12:10 Dive Project Continued….
12:10 Lunch (30 Minutes)
12:40 – 1:05 Literacy in Focus
Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.
1:05 Menu Challenge
Menu Challenge – Pho Hong – Goal – Build an attractive one page menu using Bootstrap
- Pho Hong is a Vietnamese Restaurant in Burlington. Take a look at this menu. Create a one page menu (pick one or two section) using Bootstrap. You can build this in Atom or CodePen – your choice.
- Use FontAwesome to help with icons
- Use HTML Special Symbols to help with those special characters
- Name CodePen project or file PhoMenu upload or send link
This is a graded afternoon project
2:00 Dailies
Link to Dailies and Link to Responses