Unit08 Posters

Overview

This is your opportunity to complete an assignment on your own by applying what you have learned so far. Think of this as a midterm test.

Vocabulary

No new vocabulary

Tools

Download films JSON data set and put it into a "data" folder
Import it into your JavaScript file using this syntax: import {films} from '../data/films.js'
Use this link to the poster images and remember to change the number.jpg to a variable using template literals.https://starwars-visualguide.com/assets/img/films/1.jpg'

Objectives

For this module, you will be practicing things you have learned in previous units.

Use an external script link (module 1)
Use variables numbers and strings (module 2)
Implement functions with returns (module 2)
Build fat arrow functions (module 4)
Use querySelector to grab a reference to an existing HTML element (module 2)
Use module import and export (module 7)
Use a for loop to loop through a data set (module 7)
Use JavaScript to create elements (module 4)
Use innerHTML to put content into those elements (module 4)
Appended those elements to a page (module 4)
Set the src attribute and alt attribute of an image (module 7)
Add event listeners that waited for a click event (module 4)
Set the className of an HTML element (module 6)
Construct template literals to mix words and variables (module 4)
Grab images from another website (module 7)
Design a responsive web site.
Apply CSS to make a beautiful presentation of the data.
Upload your assignment to GitHub
Publish your assignment to Netlify

Tasks

Build a page showing all the Star Wars movie posters with a layout switch
Download the start file for this unit.
Download a GRID svg icon
Download a LIST svg icon
Download a round red png file for the practice activity
Download a round green png file for the practice activity

Watch

Reflection Questions

ReadDesigning for Attention by Victor Yocco

Describe three methods you can use to help you design for the attention needs of your users.

Assignment Example

View the small screen grid version
View the medium screen grid version
View the large screen grid version
View the small screen list version
View the medium screen list version
View the large screen list version

Assignment Checklist

Unit08 Posters (10 pts)

A list of the Star Wars movie posters with details.

Page Header

Assignment title
Two layout icons

Page Content

Build cards using JavaScript
Display the movie title
Display an image of the movie poster
Display the Movie Director
Display the movie producer
Display the Release Date
Style

Design

Use your best design skills to build a responsive, user-friendly web page
Style the page using a color scheme that is NOT red
Present the posters as a responsive grid with multiple columns
Also present them as a list

Page Footer

Your Name
Copyright Information

Overall Page Requirements

Your page needs to meet these requirements

Link to a normailze.css file (this creates a common starting point for all browsers)
Link to a small.css file
Link to a medium.css file
Link to a large.css file
Link to an external Google Font of your choice
Media Queries are included in the medium and large css files
Demonstrate the design principles of Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
Passes the HTML5 validation test.
Passes the CSS3 validation test.
Upload your assignemnt to GitHub
Change your repository to private
Publish the GitHub repository to Netlify using the name that they provide

Grade

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

Pass
Fail