Unit11 Single Page Portfolio

Overview

In this module, you will build a single, multi-section page using the intersection observer to automatically highlight the appropriate navigation item. You will combine this with a larger screen sticky navigation.

Vocabulary

Slow Scroll

A built in feature in modern browsers that scrolls to a section of a page rather then instantly jumping.

Portfolio

A portfolio is a systematic collection of your work that represents activities, accomplishments, and achievements over the time you have spent in the Digital Media program.

Tools

• Online Cohesive Color set tool

Objectives

At the end of this module, you should be able to...

• Implement the JavaScript intersection observer to provide a good user experience
• Implement sticky navigation
• Implement scroll behavior
• Use social media icon packs
• Create a cohesive color set

Icon Libraries

• View the Icon Monster collection
• View the Icon Scout collection
• View the Graphic Burger collection
• View the Flat Icon collection
• View the Flat Icon colection
• View the Graident collection
• View the Sketch Pack collection
• View the Icons8 collection
• View the Doodle collection
• View the Dusk collection
• A list of 40 different social media icon collections

Tasks

• Read about the Intersection Observer
• Read about Sticky Navigation
• Read about Scroll Behavior
• Learn Intersection Observer In 15 Minutes from Kyle

Watch

• Tutorials
• Download the JavaScript file for the Intersection Observer
• Watch 2610_11a Single Page Overview
• Watch 2610_11b Navigation HTML
• Watch 2610_11c Navigation Small Styling
• Watch 2610_11d Navigation Large Styling
• Watch 2610_11e Intersection Observer Explained
• Watch 2610_11f Intersection Observer Code
• Watch 2610_11g Colors
• Watch 2610_11h Wrapup

Assignment Example

• View the small screen open navigation
• View the small screen layout
• View the medium screen layout
• View the large screen layout

Assignment Checklist

Unit11 Single Page Portfolio (10 pts)

Page Requirements

Your page needs to meet these requirements

• Page is responsive from 320px wide to 1600px wide with no horizontal scroll bar.
• Add a google font in the head tag appropiate to the target audience.
• Includes normalize, variables, small, medium, and large SCSS partial files.
• Media Queries are included in the styles.scss file.
• Implements a CSS Preprocessor.
• Demonstrate Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Passes the WAVE web accessibility with no contrast errors.
• Initial page size is below 500k.

Navigation

The navigation should feature:

• SMALL - single column of icons at that stick to the top of the page
• MEDIUM - Sticky navigation bar with horizontal list of text links
• LARGE - Side by Side with the links on the left and the content on the right

Main

The main tag of your page should contain the following:

• At least 5 different sections set to a minimum height of 100vh
• Content of your choice in each section
• At least 4 social media icons that are not typical, boring, standard, icons

Scroll Behavior

• Implement scroll-behavior so when menus are clicked the page scroll and does not jump

Footer

The footer tag of your page should contain the following:

• Use a copyright entity and bullet entity
• Display the year and your name
• Center align the text

Hosting this Assignment

• Create a new GitHub public repository
• Make your repository into a GitHub pages site
• Submit a link to the GitHub page

Page Requirements

Your page needs to meet these requirements

• Page is responsive from 320px wide to 1600px wide with no horizontal scroll bar.
• Add a google font in the head tag appropiate to the target audience.
• Includes normalize, variables, small, medium, and large SCSS partial files.
• Media Queries are included in the styles.scss file.
• Implements a CSS Preprocessor.
• Demonstrate Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Passes the WAVE web accessibility with no contrast errors.
• Initial page size is below 500k.

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail