Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Week Sixteen
Today’s Notes
- Something to keep you busy
- Game Day on Thursday, December 22nd. It will begin at 10:45am.
Your ticket to participate is to be fully complete with Q2.
Sign up to bring something – it can be small or big - CSS Two Ways is overdue. I want to grade – you want to finish.
- Some Fun Generators:
- Fire Drill at 9:50 today
- A handful of web design trends seen in 2022
9:40 Attendance
9:50 Fire Drill
10:00 Finish our Hero Page & Image Gallery with Hover Effect
Yesterday we used an image as a background to create a nice Hero page. The background is called in the CSS, so it not only will load fast it also is just pure styling.
We added a sticky nav and positioned our items using flexbox.
We used the rgba colorspace for the header to create some opacity too.
Let’s revisit CSS Grid and some position properties to create an image gallery. To make it stand out a bit more, we’ll add on overlay so when you hover, some text will pop up. This might be a nice option for displaying an image gallery in your portfolio. Just an idea.
Some code below in case you get stuck or need a reference point. I made a concept in codepen
<!-- this div is doing to hold an image, text and an overlay -->
<div class="container">
<img src="images/tree1.jpg" alt="trees" class="images">
<div class="overlay">
<div class="overlaytext-container">
<h2>Choose & Cut</h2>
<p>Two Acres of Trees</p>
</div>
</div>If there is time we’ll add a footer with an embedded map.
When we finish today, be sure to upload the whole project to the webserver for reference.
10:35 Break
10:45 English with Mx. Yopp
11:30 Quick Search – Web Design Trends & Wireframing
Wireframing is a pre-production process that creates a prototype simple enough to be understood by everyone but with enough detail to show all the functionalities.
A wireframe is the first step to communicating your website ideas to other people!
Additionally, wireframing can help teams by finding problem areas and user experience issues within a new app before it’s launched and wireframing can help explain and share with key stakeholders within an organization how a webpage or webapp is going to work.
Wireframing is a quick sketch or illustration (it is not a detailed drawing) of a website’s hierarchy. Headings, Divs, Menus, Buttons, logos, images ,text all can be included in a wireframe. Common symbols used in wireframing.
Wireframing can be done on paper or digitally with a host of tools.
Personally, I prefer to work on paper first and skip the tools. However, there are some tools…
Let’s do a quick exercise where we create a wireframe from something already built in order to learn how it’s been made. We can use this site as our WireFrame model. Let’s work off pencil and paper to begin.
Try to be as neat as possible, most often it will be others that will be working off your design.
Your Task: This is the only assignment of this week (besides the Thursday Graph)
Wireframe the Desktop and Mobile page of your About Me page (this will serve as your landing page for your portfolio. We’ll look at your wireframe designs on Thursday morning!
If you know what the rest of your site will hold – you may continue wireframing the rest of your site. I typically use a sheet of paper for each page I design. Using my ruler and working as neat as possible.
- About Me
- Resume
- Best Works / Features Page(s) showcasing your work
- Fun Facts / fun Page
12:15 Lunch
12:45 Literacy in Practice
1:10 Break
1:20 20% Production Time & Guided Support
- Pin Design – Two Pack
- Make-Up Work
- WireFrame – Due Thursday Morning – showcase