Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Week 13
Notes
- Week 13 Folder – Make your folders today
- Work for this week is due next Tuesday. It will be late if you do not have it in – regardless of the fact that we don’t have school.
- HTML/CSS Assessment (layouts, basics, styling Wednesday)
- Use the Study Guide!
- College Visits this week – VTC and Champlain
- Game Day on Thursday starting at 11am – Game Day Collection – Tuesday.
- To participate in Game Day, all your work needs to be complete!
- Skating Friday afternoon at 1pm.
- Week 12 What is Due is up. All work due Tuesday, end of day.
9:40 Attendance – no article
9:45 – 10:15 VTC
Vermont Technical College will be visiting us today. We’ll skip the article and head right over to Mr. Cronin’s room. Plan on a half hour.
You will earn bonus points for asking 1 good question of the presenter. The points will be added to your Transferable / Employability Trait Grade. How much bonus? Depends on the quality of the question.
10:15 CSS Grid Challenge
Open CodePen, do your very best with the remaining time up until break and create a CSS Grid layout using the provided code that looks like the following image:
Add: Set up a media query so that when the screen is smaller than 760pixels the <aside> switches from the left to right side.
Challenge: set up a third media query at 480 that makes the entire page a column layout with the header first, aside second and footer last.
<div class="wrapper">
<header>
<h1>My Fine Header</h1>
</header>
<article>
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Adipisci laborum, ex tempora esse fuga consequuntur dolores
excepturi, eaque quis incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Adipisci laborum, ex tempora esse fuga consequuntur dolores
excepturi, eaque quis incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Adipisci laborum, ex tempora esse fuga consequuntur dolores
excepturi, eaque quis incidunt?</p>
</article>
<aside>
<h3>My Aside</h3>
<blockquote>
A fine quote!
</blockquote>
</aside>
</div>Name your CodePen CSS Grid Layout. Email the link to me when you are complete. Use your notes.
If you complete early, work on this quick CSS Grid Game.
10:45 Break (15 Minutes)
11:00 – 12:10 Physics –
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 Inspiration Board
After the break, we are going to begin working on a multipage website that will serve as a portfolio about you. We’ll include your bio, an image, some reflections as well as a host of really nice exemplars of your work covering many disciplines.
To prepare, you’ll want to do a little research.
Create a Mood Board. A mood board is a way for people to communicate ideas in a visual way. They are collages of text, imagery and samples of objects in a composition.
You may use Google Slides or Google Draw or even a Google document. There are also a web applications for making mood boards. I have not used any, but you can find some by googling inspiration or mood board makers.
Visuals are much better at communicating ideas than words.
User Interface (UI) design is the process of making interfaces with a focus on looks and style.
Create a Mood Board that communicates ideas you have for:
- Fonts
- Color Palettes
- Icons
- Color/White Space, inspirational designs
- Design elements (layouts you like)
- Website features (sliders, gradients, lightboxes)
- Links to websites you like
Start by google searching 2019 website trends, portfolios, web color palettes, student portfolios, web design awards…
Name your Mood Board: Mood Board_Lastname
Share a link to your Mood Board for dailies and with me.
2:00 Dailies
Link to Dailies and Link to Responses