Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org
10:05 Today’s Notes & Attendance
- English Today
- CCV Lunch Order – go get it
- Upcoming College and Career Events – The More You Know
- Adrian – let’s look at your Vermont Foliage photography at the start of Thursday’s class.
- SLC is meeting today during lunch in M117
- Website address – write on board this morning
- geocities.ws/wbohmann is mine for example
10:10 English
11:00 Break
11:10 Fan Film Showcase
As a group – introduce your project. Share what each of your roles were.
We’ll watch each video 2x.
What was fun? What was challenging? What would you do different in your process?
After viewing, I’ll guide you through a short reflection about what is was like working in a group and the role you played in it.
11:35 Lunch
12:05 IDs and Classes
IDs / Classes & Ids Quick Review – and Flexbox
Sample Portfolio – Something you might consider building, You’ll see there are a lot of creative ways you can take a portfolio – Sample. A portfolio is not a requirement this year in GAWD2. However, you may want to take your new website on geocities and build out a collection of your projects in web, blender, animation and game. Not to mention some of your challenge work, motion graphics, vfx work and your Star Wars Fan Film.
HTML elements provide the structure to webpages while the CSS adds the style. JavaScript makes pages interactive.
To help the HTML elements stand out, we can use “styling hooks” by adding IDs and Classes to the elements. Did you know that an element can be loaded up with many classes – handy! IDs and Classes can be accessed and targeted with JavaScript. What you chose to name your ids and classes is entirely up to you. Best to make them make sense!
IDs 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 (just leave a space)
Flexbox Revisited
CSS flexbox (also referred to as flexible box) provides control over how elements are positioned, aligned, and sized within their container.
Remember, those elements have to be in a container (like a <div> or <section> or some other block level element).
Flexbox allows you to do things like, specify how elements are aligned vertically and horizontally, change their order of appearance, change the direction in which all elements are laid out, and more.
Before flexbox, elements had to be positioned and floated and complex layouts could be really challenging
A very good explanation of Flexbox #1 –
A very good animated explanation of Flexbox #2 –
CSS flexbox properties define how flex items are sized, how they wrap and which direction they go in.
Flexbox items grow and shrink depending upon how much content is needed to fit the box.
Let’s practice using IDs and Flexbox. We’ll also add some smooth scrolling to create a simple, scrollable web page linked by IDs. This is a great way to create a one page website. Open CodePen and start a new pen. Name it Smooth Scroll with IDs. We’ll also incorporate some flexbox as a review.
html{
scroll-behavior:smooth;
}Having a good understanding of IDs and Classes will assist you with learning and using JavaScript which relies heavily on accessing the structure of your code (HTML) so you can make your web applications do stuff and increasing the user experience (UX).
1:00 Afternoon Break (15 minutes)
1:15 Dailies
1:20 Independent Reading
