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

Wednesday, November 6th

Wednesday, November 6th

Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org

CSLSeniorCitizens
Community Service Learning – Thursday

Notes

  • Sweatshirts – Final Designs Front/Back due on Thursday by 1pm for voting. DeLu, Matisse, Hunter
  • Community Service Days – Thursday. Let’s talk about jobs, roles, expectations and the service to others we’ll provide on Thursday.
  • Link to Review

9:40 Attendance & Article

9:45 CSS Grid Continued…

CSS Grid

We’ll start the day reviewing the work we did yesterday.

When you open Atom, open a new window (and close the old windows). Add this project folder and get rid of any other tabs that are open. This will make your life much easier.

CSS-Grids2.0Download

Today we are going to code together 4 page layouts:

  • basic grid using fr (fractions)
  • nested grids in a grid (whoa, crazy!)
  • aligning items (in the container left and right and vertical)
  • across columns and row for some unique layout control
CSS Grid layout with numbers for rows and columns
Lines 1-4 in gray are the column numbers / Lines 1-3 in black are row numbers

Key Terms:
grid-column
grid-row
justify-items: start, end, center, stretch to align items left and right
align-items: start, end, center, stretch to align items on the vertical


Break (15 Minutes)

coffee and cookies

11:00- 12:10 CSS Grids

Activity: Create a CSS Grid of your own. Be unique.

  • 9 divs inside a container (use the section element as your container).
  • Set up like a series of Post It Notes (color is nice)
  • Each note (or div) will be a personal or professional goal
  • Vary the sizes of your notes
    • Challenge: use custom fonts and font sizing
    • Challenge: overlap some post-its
    • Challenge: include images

Upload the entire folder with your .html and css files to your Week 11 folder. Filename:CSSGrid_PostIts

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 A/B Day Project Smooth Scroll

“Choose Your Own Adventure”

Choose Your Own Adventure Book Covers

For the next two afternoons, you are going to create, write and code a simple “Choose Your Own Adventure” story.

The entire html document will be one page, styled with CSS. Use the example I showed last Thursday on smooth scroll (remember the CodePen).

My suggestion is to organize your document into sections so you can smooth scroll to each section.

Include at least 7 sections to your story. The story does not have to be too involved, but it should be entertaining. Here is a website that hosts many “choose your adventure” stories. Try one out.

Your original story must Smooth Scroll to the different sections. Your reader must be able to win or lose. I suggest you plan on paper first.

If you don’t want to have access to a scroll bar and ruin the story, add the following code to your CSS stylesheet:

html, body {margin: 0; height: 100%; overflow: hidden}

Test the story with someone from class before submitting. Run your HTML through the Validator and your CSS

Style with CSS and make the experience nice. Upload the entire folder to Week 11. Filename: AdventureScroll

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