AssignmentGrid004

CSS Grid

Objective:

Create a web page using Grid Line Placement

Basic HTML5 Layout

Customize your layout with the following elements:

• header
• nav
• main
• aside
• footer
• section
• article

12 x 12 Grid

Create design using grid line placement. Make sure the design is different than my design.

Demo Video - Grid Line Placement

Activity

ActivityGrid001

ActivityGrid002

ActivityGrid003

CustomGrid004

Graph Paper For Planning

AssignmentGrid005

CSS Grid

Objective:

Create a web page using Grid Line Placement and the minmax(100px, auto);

Complex HTML5 Layout

Create a complex design using grid line placement. Make sure the design is different than my design. Use the minmax function.

AssignmentGrid006

CSS Grid

Objective:

Create a web page using Grid Area Placement

Complex HTML5 Layout

Create a complex design using grid area placement. Make sure the design is different than my design.

Demo Video - Grid Area Placement

ACareer004.pdf

Imago

Post certificate on portfolio as as:

ACareer004.pdf

Leadership Certificate

Complete Leadership Video Questions

Lessons Required:

• Adaptability
• Appearance
• Attention
• Body Language
• Brand Your Story
• Communication Skills
• Design Solutions
• Digital Communication
• Digital Ethics
• Digital Investigation
• Diverse Perspectives
• Engagement
• Etiquette
• Eye Contact
• Fairness and Justice
• Feedback
• Handshake
• Hygiene
• Networking
• Organization
• Pattern Seeking
• Personal Development
• Systems Collaboration
• Systems Thinking
• Teamwork
• Values and Attitude

* If lessons don't appear, search for them

Objective:

Develop Leadership Skills

Earn Leadership Certificate

The Development of CSS Features

CSS3 added many new features. When features are introduced, they may require special browser prefixes to make them work. Here are some prefix examples for various browsers:

• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• Opera: -o-
• Safari: -webkit-
  

Learn about CSS prefixes and use them if appropriate. With time, you will no longer need to use prefixes as CSS features are widely adopted.

CSS Prefixes Article

Tools:

ShouldIPrefix

Border-radius - Rounded Corners

Objective:

Create a web page using Border-Radius

Explore: Border-Radius

Guide:
.header
{
border-radius: 35px;
}

Demo Video - Border Radius

Resources:

Border-Radius Generator

Box-shadow - Shadows on your Elements

Objective:

Create a web page using Box-Shadow

Explore: Box-Shadow

Guide:
.carimages
{
box-shadow: x-offset y-offset blur color;
}

.carimages
{
box-shadow: inset x-offset y-offset blur color;
}

Demo Video - Box-Shadow

Transform - Scale, Rotate, Skew...

Objective:

Create a web page using transformations such as rotate, scale, translate, and skew

There are several transformations to explore including:

scale(2,2)
rotate(7deg)
skew(20deg, 20deg)
translate(50px, 50px)

#logo
{
background-color:lightblue;
transform:scale(2,2);
}

Info on transformations

Transform

Demo Video - Transform

assignment029j3a2

Transitions

Objective:

Create a web page using transitions on hover pseudo elements

You can animate changes in CSS property values using transitions as follows:

#red
{
transform:rotate(20deg);
background-image:url(Images/pooh.png);
background-repeat:no-repeat;
height:200px;
width:145px;
transition: all 2s;
}

#red:hover
{
transform:rotate(7deg);
}

Example

Read More

Demo Video - Transitions

Keyframe Animations (From To)

Objective:

Create a web page using @keyframes for animations with the from and to code blocks

You can bind an element to a keyframes codeblock to animate the change of element properties.

#black
{
	background-color: black;
	animation-name:changecolor;
	animation-duration:4s;
	}

@keyframes changecolor
{
	from
	{
	background-color: black;
	}
	to
	{
	background-color: red;
	}
	
}

Keyframe Animations (From To) on Hover

Objective:

Create a web page using @keyframes for animations with the from and to code blocks and activate them on hover

You can bind an element to a keyframes codeblock to animate the change of element properties.

Demo Video - Keyframes(From To)

#black
{
	background-color: black;
}

#black:hover
{
	animation-name:changecolor;
	animation-duration:4s;
}


@keyframes changecolor
{
	from
	{
	background-color: black;
	}
	to
	{
	background-color: red;
	}
	
}

Demo Video - Keyframes From To on Hover

Keyframe Animations (Percentages)

Objective:

Create a web page using @keyframes for animations with percentage code blocks

You can bind an element to a keyframes codeblock to animate the change of element properties.

Demo Video - Keyframes (percentages)

#gold
{
	background-color: gold;
	animation-name:changemanycolors;
	animation-duration:1s;
	animation-iteration-count: 20;
	animation-timing-function: ease-in-out;
}
	
@keyframes changemanycolors
	{
		0%
			{
				background-color:gold;
			}
		25%
			{
				background-color:lime;
			}
		50%
			{
				background-color:red;
			}
		75%
			{
				background-color:blue;
			}
		100%
			{
				background-color:yellow;	
			}
	}
	  

Resources:

CSSReference

Animista

text-shadow - Shadows on your text

Objective::

Create a web page using text-shadows

Guide:
p
{
text-shadow: x-offset y-offset blur color;
}

Demo Video - Text-Shadow

RGBa - Red, Green, Blue + Alpha Opacity

Objective:

Create a web page using RGBa colors and colors with opacity (transparency)

Guide:

#container
{
background-color:rgba(209, 226, 350, .5);
}

RGBa stands for Red, Green, Blue, Alpha.

in other words:

#container
{
background-color: rgba(red, green, blue, alpha);
}

red, green, and blue take values from 0 to 255
alpha (transparency) takes values from 0 to 1

Screen Pixel

RGB Slider

Demo Video - RGBa Overview

Demo Video - RGBa in Dreamweaver

Multiple Background Images

Objective:

Create a web page using multiple background images on one element

body
{
background-image:url(images/image1.gif), url(images/image2.gif);
background-position:center center, left top;
background-repeat:no-repeat, no-repeat;
background-attachment:fixed, scroll;
}

Demo Link

If you encounter problems, try adding the above code to the html element instead of the body. If you want to position an element at the bottom, use height:100%; on the html element.

Demo Video - Multiple Backgrounds

Background Size - Resizing background images to fit (scalable)

Objective:

Create a web page using a scaling background image (to fit an element)

html
{
background: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}

If you want to position an element at the bottom, use height:100%; on the html element.

Demo Video - Background-Size

Gradient Backgrounds

Objective:

Create a web page using gradient backgrounds

html
{
background-image: linear-gradient(to left, red , blue);
}

Demo Video - Gradient Backgrounds

dafont
fontsquirrel
fontex

History of Typography

Font Examples - Personality

Set 1 (Font Fight)
Set 2 (Font Conference)

Typeface Designers

Videos:

History of Typography

Font Men

Jonathan Hoefler and Tobias Frere-Jones (Font Men)

Article 1
Article 2

Times Newer Roman

Downloading and Installing Fonts - Photoshop

Objective:

Create an image utilizing online font files

download, extract, and install

Demo Video - Installing Fonts

CSS3 @font-face (basic)

Objective:

Create a web page utilizing online font-files with @font-face

.ttf, .otf, .eot

Demo Video - @font-face (basic)

CSS3 @font-face (generator)

Objective:

Create a web page using an online font generator (@font-face)

utilizing online font-files
using @font-face in CSS
using online generators

.ttf, .otf, .eot, .woff, woff2, svg

Demo Video - @font-face (complex)

Adobe Edge Web Fonts

Objective:

Create a web page using Adobe Edge Web Fonts

Use JavaScript for Web Fonts - <script></script>

Demo Video - Adobe Edge Fonts

Google Web Fonts

Objective:

Create a web page using Google Web Fonts

Use CSS for Web Fonts <link>

Demo Video - Google Fonts

Fonts Awesome

Use online Icons (Use your own icons)

Objective:

Create a web page using Font Awesome

use CSS for Web icons

Typography

Objective:

Create a web page using three font pairs

Font Pairings

Make sure to specify the fonts you use in the assignment.

About Typography

ianobermuller

typepedia

tothepoint

typographydeconstructed

Easy Resources:

Typography Made Easy

Font Pair

CSS:

line-height:
letter-spacing:

Review:

Typography Video

WrittenResponse001

Helvetica Image

Helvetica Movie

Objective:

Understand the importance of the Helvetica type face in typography

Write a two paragraph response to the movie. The first paragraph should summarize the movie. The second paragraph should express what you learned about typography.

Define key terms:

Hierarchy
Leading
Tracking
Kerning

Include an image with you and a Helvetica typeface sign.

60 pts

Identify Helvetica

Helvetica Logos

Helvetica Quiz

Rubric

Image Maps

Objective:

Create a web page using an image map

Image maps allow you to create hotspots on an image. These hotspots are links.

Example

Make sure to use Alt Tags for Accessibility - Example

Student examples:

New York 1

New York 2

Paris 1

Demo Video - Image Maps

Custom Cursors

Objective:

Create a web page using a custom cursor

- cursor: crosshair

- cursor: url("ironman.png"), auto;

- Add your cursor to one of your projects.

Demo Video - Custom Cursors

Keyframe Animations (From To) with JavaScript

Objective:

Create a web page using @keyframes for animations with the from and to code blocks and activate them with JavaScript.

You can use JavaScript to add a class to an element. That class can have animation properties. This makes it easy to click on an element and have it animate.

	  
	  
<script>
	
// Create a function that adds and removes a class to an element 
function spinforever()
{
	this.classList.toggle("spinme");
}
	
	
// Add a click event to an element (id orange) and run function (spin forever)
window.document.querySelector('#orange').addEventListener('click', spinforever);
	
</script>		  
      

Demo Video - Keyframes From To with JavaScript

Custom Favicon

Objective:

Create a web page uisng custom favicons (Online Address Bar and Title Bar Icon)

Online Generator:

http://www.favicon.cc/

More Advanced and for Mobile:

http://realfavicongenerator.net/

Demo Video - Cusom Favicons

assignment001html5

Audio

Objective:

Create a web page using audio with support for various file types

Choose a favorite .mp3 file

Use Audacity to convert the .mp3 to .wav, and .ogg.

Audacity - Convert Music

How to video

Demo - audio.wav | egyptmusic.mp3

You need three file formats:
.mp3
.ogg
.wav

Lame (for .mp3 conversion)

Code your assignments using the html5 audio tag

<audio controls="controls" autoplay="autoplay" loop="loop">

<source src="mymix.mp3" type="audio/mpeg"> 
<source src="mymix.ogg" type="audio/ogg"> 
<source src="mymix.wav" type="audio/wav"> 
<!-- info for non supporting browsers --> 
Your browser does not support the audio element. 

</audio>

Demo Video - HTML5 Audo

Video - Screencast

Objective:

Create a web page using video with support for varous file types

Screencast-O-Matic - Create Video

How to video

Demo File - video.mp4

You need three file formats:
.mp4
.ogv
.webm

Convert at:

http://online-convert.com

https://www.media.io/

Create a screencast of your portfolio's favorite assignments

Code your assignment using the html5 video tag

<video controls="controls" width="480" height="360">

<source src="screencast.ogv" type='video/ogg; codecs="theora, vorbis"'/>

<source src="screencast.webm" type='video/webm' >

<source src="screencast.mp4" type='video/mp4'>

Video is not visible, most likely your browser does not support HTML5 video

</video>

Demo Video - HTML5 Video

Notes:

/*
css position property

possible values:
- static (default)
- absolute
- relative
- fixed

css z-index property (stack order)
only works on positioned elements

assign numeric value
highest stack order is on top (front)

*/

Assignment029j2

CSS positioning - Absolute

Objective:

Create a web page using absolute positioning

**Placement on browser window (parent element) **

*Make divs position absolute

Div Position Demo File

Demo Video - Absolute Positioning Intro

Demo Video - Absolute Positioning

Place any element anywhere on the page (browser window) using absolute positioning.

Specify the location using top, right, left, and/or bottom position for elements and it will be positioned on the browser window (parent element).

examples:

top:0px;
left:0px;

or

bottom:0px;
right:0px;

Stack Order - Layers using Z-index

Create page layers using z-index. The higher index number is layered on top of other elements.

examples:

z-index:-1;
z-index:2;

To get credit, add position absolute and top, bottom, left, or right values to 4 new divs.

Here is a nice past assignment that utilizes images:

Example Assignment

Demo without images

Assignment029j3

CSS positioning - Relative

Objective:

Create a web page using relative positioning

** Placement away from origin **

Move an element from its normal position (origin) on a document using relative positioning.

*Make divs position relative

Specify the change in top, right, left, and/or bottom.

Complete Try it yourself

To get credit, place your divs in different locations than the example. Add position relative and top, bottom, left, or right values to the divs.

Notice that the divs move, but they still occupy their original space on the web page.

Here's a nice past assignment:

Example Assignment

Demo without images File

Demo Video - Absolute versus Relative

Demo Video - Position Relative Introduction

Notes:

/*
css position property

possible values:
- static (default)
- absolute
- relative
- fixed

css z-index property (stack order)
only works on positioned elements

assign numeric value
highest stack order is on top (front)

*/

Assignment029j3a

CSS positioning - Absolute and Relative

Objective:

Create a web page using absolute and relative positioning

Absolute placement with Relative element

Move an element from it's normal position on a document using absolute positioning when it is WITHIN a relative position div.

*Make divs position absolute
Parent element has position set to relative

Specify the location top, right, left, and/or bottom for absolute.

Specify change in top, right, left, and or bottom for relative.

Can be used for a 3 dimensional effect. Make an element can come out of the box.

Here's a nice past assignment:

Example Assignment

Demo without images File

To get credit, place your divs in different locations than the example and add a 3 dimensional look.

You must also use transparent images within the divs

Assignment029j3a2

CSS positioning - Absolute and Relative

Objective:

Create a web page using absolute and relative positioning

Logo Header and Logo Footer

Move an element from its normal position on a document using absolute positioning when it is WITHIN a relative position div.

Demo Download

Demo Video - Absolute with Relative Positioning

Summary

Position Summary - Demo Video

Demo

Essentials

• HTML5 tags

<header><nav><main><aside><footer><section><article>

Demo Video

• Flexbox for Simple Layouts and Element Management
• CSS Grids for Advanced Layouts
• Media Queries for Responsive Design
• The CSS Reset - normalize.css (Reset styles across all browsers)
  
  

  <link rel="stylesheet" href="normalize.css"> 
  
    

  Demo Video - Normalize CSS
• REM for responsive text
• Image Floats and Clear (source)

Assignment000RWD

Media Queries for Responsive Design

Objective:

Create a responsive web page using the Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Apply Media Queries for Responsive Design

@media only screen and (max-width: 320px )
   {
     #container
   	{
   		background-color:purple;
   	}
   }

@media only screen and (min-width: 321px)
   {
     #container
   	{
   		background-color:pink;
   	}
   }

* min-width and max-width in media queries

Common Breakpoints:

320px, 480px, 600px, 768px, 960px

For full credit, apply other properties to the media query breakpoints such as font, color, border-radius, background-images, etc.

Demo Video

Assignment005RWD

REM Units for Responsive Typography

Objective:

Create a web page using fonts sized using REM units

Set the root font-size to 10px using a percentage. Use 62.5% of the default 16px set by the browser. This will enable easy calculations using familiar pixels sizes.

1.0rem is 10px
1.2rem is 12px
1.6rem is 16px
1.8rem is 18px

html
{
font-size:62.5%;
}
body
{
font-size:1.6rem;
}

* min-width only in media queries

Demo Video

AssignmentFB001

Flexbox

Objective:

Create a web page using flexbox with flex-direction set to row

Flex Parent -

Flex Direction Row - Justify-Content and Align-Items

Guide to Flexbox
Source:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Demo Video

To earn credit, you must use different flexbox property values than the ones I have.

AssignmentFB002

Flexbox

Objective:

Create a web page using flexbox with flex-direction set to column

Flex Parent -

Flex Direction Column - Justify-Content and Align-Items

Demo Video - Flex Direction Column

Demo Video - Flex Direction Instructions

AssigmentFB003

Flexbox

Objective:

Create a web page using flexbox with flex-wrap set to wrap

Flex Parent -

Flex Wrap

* Make sure to set the parent width with a percentage so you can see the children wrapping. Label all your work.

Demo Video

AssignmentFB004

Flexbox

Objective:

Create a web page using modified flex children properties (order and align-self)

Flex Children -

Flex Order and Flex Align-Self

* Label the child elements with the property selected.

Starter

Demo Video - Flexbox Children Adjustments

Activity

Flexbox Froggy

Flexbox Practice (a simple layout)

Demo Video

AssignmentFB005

Flexbox - Responsive

Objective:

Create a simple responsive web page using flexbox

* Add at least one extra media query breakpoint. Change a background-image, color, or fonts.

AssignmentFB006

Flexbox - Responsive

Objective:

Create a complex responsive web page using flexbox

* Add at least one extra media query breakpoint. Change a background-image, color, or fonts.

Assignment001acc

Images alt attribute

Objective:

Create a web page with support for users with disabilities

Assignment029j3b

CSS positioning - Fixed position and Named Anchors

Objective:

Create a web page using fixed position navigation and named anchors

link
<a href="#aboutus">about us</a>

destination - named anchor
<a name = "aboutus"></a>

Demo Video - Fixed Header

Demo Video - Named Anchors

Demo Video - Navigation flexbox list (ul)

Assignment004acc

Floated Images

You must use: Theme, Color Palette based on an prominent image, Google Fonts, Floated Images, Normalize CSS, Alt tags, and the Clear-Fix

Objective:

Create a web page with floated images using clear-fix to prevent overflow errors

clearfix:after
{
content: "";
display: table;
clear: both;
}

Demo Video - Pseudo Elements (::before ::after)

Demo Video - Floated Images (clearfix class)

Demo Video - Selecting a Color Palette (Adobe Color CC)

Demo Video - Normalize CSS

Use lorem ipsum text generators

• CatIpsum
• BaconIpsum
• ZombieIpsum

Use image placeholders

• LoremPixel
• Placehold.it
• PlaceKitten
• PlaceZombie

Image color selector

• Adobe Color CC

Assignment 029j3a3

Grid HTML5 Layout - Create Various Layouts 60 points

Objective:

Create 5 CSS grid layouts using the normalize.css (reset)

Use the CSS reset - normalize.css

Include the usual divs and HTML5 tags

• header
• footer
• nav
• section
• main

layoutone - Demo

layouttwo

layoutthree

layoutfour

layoutfive

layoutlogo

Videos:

Demo Video - Box-Sizing

Demo Video - Mobile First Part - HTML

Demo Video - Mobile First - CSS

Demo Video - Responsive Layout

Demo Video - Responsive Layout Complete

Animations - Animate.css

Apply a logo header

Apply normailze.css

Apply the animate.css stylesheet to:

layoutthree.html

* Old non-flexbox code (don't copy)

- animate.css only

- animate-css with css modifications

Demo Video

Animations - Animations - Transitions and Keyframes

Apply normailze.css

Apply the animate.css

Apply a transition

Apply a keyframe to:

layoutthree.html

* Old non-flexbox code (don't copy)

Assignment001csc

New York (Individual)

Demo Video

Instructions

NewYork.zip (resources required)

Video (for future use)

You get two grades on this:

Project Grade 120 pts.

Grading Guidelines

Prior year projects:

Example 1

Example 2

Example 3

Example 4

Example 5

Example 6