Unit13 Store
Overview
In this module, you will build your own JSON data file and then display the results to a dynamic web page with navigation.
Vocabulary
- display: grid;
- Defines the parent element as a grid container and establishes a new grid formatting context for its contents
- grid-template-columns
- Defines the columns and rows of the grid with a space-separated list of values.
- Learning Transfer
- Transfer of learning occurs when learning in one context or with one set of materials impacts on performance in another context or with other related materials. For example, learning to drive a car helps a person later to learn more quickly to drive a truck.
Objectives
At the end of this module, you should be able to...
- Use the JSON Editor to create your own correctly formatted JSON data file
Tasks
- Download the start file for this unit.
- Download the 4 friends images
- Download the friends JSON data file
- View one of many Character Entity charts
- Use one of many free online JSON editors
Watch
- Unit Lectures
- Watch 1720_13a Friends-Overview
- Watch 1720_13b Create-JSON-Data
- Watch 1720_13c HTML-Data-Link
- Watch 1720_13d Add-Navigation-Links
- Watch 1720_13e Create-Populate-Elements
- Watch 1720_13f Hobbies-List
- Watch 1720_13g Assemble-Card
- Watch 1720_13h Design-CSS
- Watch 1720_13i Project-Store-Intro
Reflection Questions
- What is something about this class that you really liked?
- What is one thing about this class that ou would like to see adjusted or changed or clarified?
Assignment Example
- View the small screen version of Friends
- View the medium screen version of Friends
- View the large screen version of Friends
- View the small screen version of my store
- View the medium screen version of my store
- View the large screen version of my store
Assignment Checklist
Unit13 Store (10 pts)
Create your own JSON file for at least FIVE products in a store and then build a dynamic and responsive page.
JSON file
- Create an array with at least 5 products
- Include at least 4 descriptive name:value pairs
- One of the values needs to be an array with between 2 and 4 items
- Include a link to an image
Page Header
- Title your store
- Add a scalable hero image (you leaned this in Web Essentials unit 7)
- Style the header to look nice
Page Navigation
- Add a link to the nav bar for all the products in your JSON catalog
- Display links in two columns for small screens
- Display links in three columns for medium screens
- Display links in four columns for large screens
- Style the navigation to look nice
Page Content
- Dynamically display the information for one item in your JSON catalog when that button is clicked
- Style the content to look good on small, medium, and large screens
Page Footer
- Add your name and project to the footer
- Style that information to look nice
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