November 13th – November 20th
Class hours: 9:40 – 2:05
Mr. Bohmann | wbohmann@ewsd.org
9:40 Notes
- Remote Link for today (if you are not here) – Google Meets
- Sweatshirt Sizes – Check your Email to fill out the survey!
9:45 Attendance & Graph of the Day
Open up a Google Doc. Label it Graph of the Day with today’s date.
When looking at graphs, we’ll be guided by the following questions:
- What do you notice?
- What do you wonder?
- What’s going on in this graph? Write a catchy headline that captures the graph’s main idea.
- What impact does this topic have on you and your community?
Take 5 minutes to write responses to these prompts
10:00 Classes and Id’s
HTML elements provide the structure to webpages while CSS adds the style. JavaScript makes pages interactive.
To help the elements stand out, we can use “styling hooks” by adding ID’s and Classes
ID’s are unique
- Each element can have only one ID
- Each page can only have one element with that ID
Classes are not unique
- You can use the same class on multiple elements
- You can use multiple classes on the same element
Let’s practice using IDs and smooth scrolling to create a simple, scrollable web page linked by IDs. Open CodePen and start a new pen. Name it Smooth Scroll with IDs.
10:25 Mask Break
10:35 Academics
11:25 Lunch
12:00 CSS Grids
CSS grid layout or CSS grid is a technique in CSS that allows web devs to create complex responsive web design layouts more easily and consistently across browsers. The layout above is very easy to accomplish with Grid!
Let’s see how Grid works by doing some work in CodePen.
Now, let’ create our own Grid Layout– We’ll code together. Open Atom and follow along. We’ll cover as many basics as we can.
CSS Grid Property Terminology to Know
display: grid
grid-template-columns: (for setting number of columns)
grid-gap
grid-template-rows (for setting rows) [explicit grid]
nth-child ()
fr (stands for fraction, can be used instead of percentage)
minmax (for setting height min and max or width min and max)
One of many resources on the topic: LearnCSSGrid
1:05 Mask Break
1:15 CSS Post Its
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: change grid-template-rows to grid-auto-rows (what happens? You can now overlap!
- Challenge: include images
- Challenge: Make them flip
Upload the entire folder with your .html and css files to your Week 11 folder. Filename:CSSGrid_PostIts
2:05 Dismissal
Remote Days – Homework
Posted at the end of the second in class day of the week will be the remote homework you are to complete. This work will be due at the start of the next in person cohort meeting.
This homework be an extension of learning from the week and may comprise of assigned and independent projects.
Remember, you must be completing articles by 2:05 for each remote day (except Wednesdays) to count for CTE attendance.
#1. Recreate the Handout
Activity: The Perfect Hamburger. Recreate the handout I gave you in class using HTML and CSS. (Digital PDF if you lost it) To organize yourself, create a folder on your desktop. Call that folder CSS Review. You will need to find an image that is in the likeness of the one on the handout. Using CSS Grid may be a handy way to quickly layout this project. Don’t forget to incorporate Google Fonts!
*Ignore the spiral binding. This should not be part of your design.
Inside, store all of the items you use to recreate the handout. (that means an image folder, css folder and your .html file). Load the whole folder to your Week 11 Folder on the server. Name the folder: CSS Review
Mr. B’s Workflow – I like to work off my desktop first, building all my folders and collecting all my assets and materials. CSS goes in the CSS folder. Images go in the Images folder. Html pages go in the root folder.
I then upload the entire folder at the end of the day to the server. But hey, that’s me and my workflow. You may be different or have a better way.
For your reference, there are many great resources on how to write good CSS. If you are a little rusty or just plain worked up about having to do this kind of coding – take it easy. Ask questions, do a little searching. W3Schools CSS, ZenDev. Get inspired at the CSS Zen Garden with what you can do with CSS.
Don’t forget! Validate your HTML and your CSS
#2. Flexbox Trading Cards
Tackle a CSS Flexbox Project – Learn how to make Flexbox Cards
- Choose a card style of your choice and make at least 3 trading cards. Your topic can be about Video Game Characters or Games or Thanksgiving Menu items.
- Create at least 3 cards
- Include an image
- Include a description
- Link to something with a button (recipe, wikipedia entry, etc…)
To organize yourself, create a folder and place Place entire project (html, css) in your Week 11 Folder. Filename: Flexbox Trading Cards
*Advice, don’t just cut and paste. Work on writing the code yourself. Comment as you see fit. Stay organized. Try to learn what the code is doing.
Don’t forget! Validate your HTML and your CSS
#3. Your Web Portfolio – Tinkering
The last couple of week you started on a web portfolio. To date, you have created two pages – aboutme.html and html5resume
- Your AboutMe page can be your homepage.
- Add a CSS folder and stylesheet
- Add your logo to your about me page
- Add your image to your about me page
- Begin some styling with CSS, but you don’t have to finish. Get started, it will save you time later. Keep things simple. Try to understand what you are doing.
- Consider using Flexbox or Grid to layout your work.
- Add CSS to your html5resume. Grid might be a good way to handle the dates!
Lastly, move your WebPortfolio out of week 10 and place in the root folder of Year Two.