Skip to content
Cawd Logo Cawd
  • Home
  • About
  • Assignments
  • Student Work
  • Resources
  • Contact

Wednesday, December 4th

Wednesday, December 4th

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

Padi dive logo
Professional Association of Diving Instructors

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)

coffee and cookies

11:00 – 12:10 Dive Project Continued….

Adam Sandler dressed as Scuba Steve from Big Daddy
Scuba Steve

12:10 Lunch (30 Minutes)

pizza

12:40 – 1:05 Literacy in Focus

image of book covers

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

2:05 Dismissal

Cawd Instructors:

Matt Cronin

Will Bohmann

Instragram Facebook Twitter

A little about Cawd:

Serving high school students interested in Computer Animation, Game Design, and Web Development in North Western Vermont.

Students continue at:

University of Vermont Ringling School of Art and Design Northeastern University Rochester Institute of Technology Concordia University

Students find careers at:

Dealer.com Union Street Media Rovers North Prudential Investments DockYard
Navigate to top of page