Unit10 Senators
Overview
In this unit, you will create a responsive web page from the Senators JSON data.
Vocabulary
- Scaffolding
- Supporting students as they are learning new tasks
- Transfer
- The ability to apply knowledge from one task to similar task
- Prior Knowledge
- Information that students already have about the assignment they are going to complete
- Learning Styles
- There are 4 predominant learning styles: Visual, Auditory, Read/Write, and Kinaesthetic
- Reflection
- allows learners to step back from their learning experience, helping them to develop critical thinking skills and, improve on future performance by analysing what they have learned and how far they have come.
- Competency-Based Education
- Students progress through courses as soon as they can prove they’ve mastered each unit.
Objectives
At the end of this module, you should be able to...
- take what you learned from the previous module and build a similar project using a different data set.
Tasks
- Download the start file for this unit.
- Download the JSON data set for U.S. Senators
- View the link for the Senators photos
Watch
- Unit Lectures
- Watch 1720_10a Senators-Introduction
Reflection Questions
Read Ten Tips For Aspiring Designer Beginners (Part 1) by Luis Ouriach
- Which one of these 5 tips do you consider the most important to your work and why?
Assignment Example
- View the small screen version
- View the medium screen version
- View the large screen version
Assignment Checklist
Unit10 Senators (10 pts)
Create a responsive, dynamic page from the senators JSON file provided with buttons to filter the displayed results.
Page Header
- Styled header appropiate for this assignment
Navigation
- Using JavaScriopt, create 1 button thata displays all senators
- Then create 4 additional buttons and add them to the HTML using JavaScript
- All buttons has an event listener attached
- The last 4 buttons filter the senators list in some way (you choose)
Page Content
- Create cards for each senator displaying at least 5 items from the JSON file
- In addition, display a photo for each senator
- Use a JavaScript to change the card className based on JSON data
- Change color of each card based on the className
- Attach the card for each senator using appendChild()
Responsive Desigtn
- On small screens, display one card per row
- On medium screens, display two card per row
- On large screens, display three card per row
Footer
- Your Name and the assignment name
- Styled appropiatly
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