Class Hours: 10:05 – 2:40
Mr. Bohmann | wbohmann@ewsd.org
10:05 Today’s Notes & Attendance
- CCV Class Tomorrow – then a well deserved vacation
- Game Day after CCV only if you are 100% complete with work due this week. This includes:
- My Favorite Things Website
- Flexbox Gallery
- Landing Page – we’ll talk about today
- CCV Lunch Order – go get it
- Sylvie – 1:15 Set up Driver Simulation
10:10 Navigating the Nav – Setting up your default landing page
A web portfolio is a curated selection of work that provides an overview of your creative experience. Each of you has web address on geocites and your very own set of web pages. While we’ll use this site to house projects we are doing in class – you could (as I mentioned) use it as a place to showcase some of your work. Maybe you might want to purchase a custom domain name and web hosting.
Regardless of what you plan to do with your geocities site in the future, for now, we need to spruce up your home page that serves as a directory or navigation to your other pages.
So let’s talk about the <nav> element!
Navigation is essentially nothing more than a list of links. Links can go to other pages or as we saw with using IDs, we can navigate to other sections on the same page by linking to those IDs (remember the smooth scroll CodePen). We’ll do some basics today but you can scale up for your own.
<nav>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</nav>
The example above will produce a horizontal row of links. Using the semantic HTML5 element <nav> means we don’t have to use an unordered list. Less to code!
Let’s go to CodePen and have a go at some custom Navigation. You can use the code above as a starting point.
Flexbox to the rescue!
With the addition of Flexbox to CSS, navigation has gotten even easier. For a flexible / responsive nav bar, just make sure you have a containing element. In this case the <nav> element is our containing element.
nav {
display:flex;
flex-direction:row; /*you don't actually need this line*/
flex-wrap: wrap;
}
Let’s use some flexbox built in properties to try some other layouts. Let’s add:
justify-content: center; /*also try flex-start, flex-end, space-around and space-between */ /* Then let's add some style to the anchor tags */
nav a {
padding:15px;
text-decoration:none;
background-color:gold;
text-align:center;
}
nav a:hover{
background-color: #efefef;
color: dodgerblue;
}
/* for fun, add transform: rotate(15deg); to the hover state */
Let’s go a bit further and add in the CAWD logo or a robot and a <header> because most often the navigation is found in this element. We’ll also add a button too.
<img src="https://cawdvt.org/wp-content/themes/cawdAdapt/images/cawdAdaptLogo.svg" alt="cawdlogo">How About a Vertical Nav?
Yeah, we can do that too. Let’s build one.
Font Awesome is a place to get icons. Super helpful. Accounts are free. You need to put some info in the head tag. For today you can use my code.
<script src="https://kit.fontawesome.com/ef8625f426.js" crossorigin="anonymous"></script>Your Assignment: Navigation for assignments
- Add some CSS and design up your landing page for your on the index.html of your web project directory so we can easily navigate to your web projects.
- Upload to your website – This will be due on Monday, December 1st – the day we return – but do it now!
10:50 Morning Break (10 minutes)
11:00 Decorative Silhouettes in Photoshop
Photography class is not over but it’s a little cold to go outside and practice. Instead, let’s create some nice art from our images using silhouette masks. The mask will give the appearance of a matte around the outside of your photos giving it shape, definition and meaning.
If we add in some nice touches like drop shadow, inner glow we can create depth in our art just like you see on the walls around you. Hey, maybe your can create something for your family as a nice gift!
Tools we’ll be using in Photoshop include:
- Photography and composition
- Organizing Assets / folders / layer stacks
- Using Pen or Magic Wand tools to create Masks
- Layer Effects for depth
- Rulers and Guides (Remember C.R.A.P?)
- Typography
- FX and Adjustments
Make a copy of my process for your records Vector Silhouettes from Clipping Masks
Setting up your work – as we might want to print:
- 8.5 by 11 inches at landscape at a resolution of 300 DPI
- CMYK Color Space
Your Assignment: Create Your Own – You Choose the Theme: 2 or more photos
Yes, we did one in class with one photo, now I’d like you to do one with two or more photos.
- Include your last name at the bottom in an appropriate and stylish font along with the year 2026.
- Filename: Vector Silhouette_LastName.jpg
- This project will not be due until December 11th (plenty of time)
11:55 Lunch
12:25 English with Mx. Yopp
1:10 Afternoon Break
1:25 Speed Design Jam Session!
1:25 Independent Production & Guided Support
- Past Due work
- Flexbox Gallery – get up on your webserver and create a link from your directory
- Style and Navigation to on your directory page – December 1st
- Parallax “How To” Web Project – Due Wednesday, December 3rd
- Famous Photographer Project – Due Wednesday, December 10th
- Decorative Silhouette in Photoshop – Due Wednesday, December 11th
I am here to assist you during this worksession – if you are stuck, want to go over a concept, have questions about web/flexbox, etc….. please ask
2:10 Dailies
2:15 Independent Reading
2:40 Dismissal
