Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
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…
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.
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
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)
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)
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 A/B Day Project Smooth Scroll
“Choose Your Own Adventure”
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