Thursday, December 12th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Last CCV class is tomorrow!

Movies next Friday!

10:10 Portfolio Pre-Planning

We are going to begin working on a multipage website that will serve as a portfolio about you. This portfolio will culminate into a final website due at the end of the semester. For many students, this professional portfolio is there first website published on the web with a custom domain name.

If you are an artist, this is a great way to share your work.
If you are a programmer, this is a great way to demonstrate your skills.
If you are a modeler, what better way to see your work.
If you are into photography, yes, this is a great way to view your style / photography
if you are all these things – then you must like CAWD

I’ll get more into the deliverables shortly. Additionally, I will carve out work time for you to build a nice professional website. Let’s start with the planning stages…

To prepare, you’ll want to do a little research. It’s common for most projects to include an inspiration board or mood board. When I worked for NIKE shoe company, all new models from shoes to clothing included a mood board for the design team to work from.

Artistic & Creative Directors often work from a mood board as part of the planning process.

Start by google searching 2023/24 and 2024 website trends, portfolios, web color palettes, student portfolios, web design awards… See anything you like?

The Deliverable

Create a Google Slide Show to showcase your inspiration. It can be a messy collection of ideas. Formatting is not that important. Just lots of ideas to communicate what you like.
ProTip: if you see something you like, put a link in the notes section of your slideshow. That way you can find it again.

Create a slide for:

Fonts
Color Palettes / Color Themes
Icons you might like to use and your logo
Design elements (layouts you like and are inspired by
Website features (sliders, gradients, lightboxes, interactions)
Links to websites you like
Anything else you see that you’d like to share

Your Mood Board Slideshow is due on Thursday (December 19th) by start of the day. We’ll take a quick look at your work on Thursday to get inspiration from each other and then begin the work after the new year.

Filename: Mood Board

11:00 Famous Photographer – Finish Up

Student / Photographer
Peyton Chris Burkhard
Braden Neil Liefer
Ben Manuel Alvarez Bravo

This will also serve as the order of presentations

11:15 Web

Web Stuff Cont….

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Style the first letter, or line, of an element
Insert content before, or after, the content of an element

Selector	Example	Example description
::after	p::after	Insert something after the content of each <p> element
::before	p::before	Insert something before the content of each <p> element
::first-letter	p::first-letter	Selects the first letter of each <p> element
::first-line	p::first-line	Selects the first line of each <p> element
::marker	::marker	Selects the markers of list items
::selection	p::selection	Selects the portion of an element that is selected by a user

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the <input> element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects <input> elements with a value within a specified range
:invalid	input:invalid	Selects all <input> elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with “it”
:last-child	p:last-child	Selects every <p> elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects <input> elements with no “required” attribute
:out-of-range	input:out-of-range	Selects <input> elements with a value outside a specified range
:read-only	input:read-only	Selects <input> elements with a “readonly” attribute specified
:read-write	input:read-write	Selects <input> elements with no “readonly” attribute
:required	input:required	Selects <input> elements with a “required” attribute specified
:root	root	Selects the document’s root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all <input> elements with a valid value
:visited	a:visited	Selects all visited links

Codepen to Fork

11:50 – 12:25 Purington Tree Farm – Group Work Session

The client wants:

A new website that incorporates the content found on the pages – like contact information, about us, social account information
A responsive design that works with different screen sizes
Prices of trees – kind of trees
Hours
Location
Amenities/Services: the farm offers tools like hand saws, sleds and trussing
Other products they sell

By the end of the day today – you are on track if you have a rough wireframe for your coder to begin the layout process.