💯Project Challenges

...for Class Roster API.

Challenge 1 : Content

• Complete this form

  • JSON Source : https://assets.codepen.io/16425/Spring-2025-Roster.json

• Display the fields of content for:

  • Required fields

    • Name

    • Image

  • Pick 2 or more fields from

    • Emoji, Quote, Superpower, Favorite Color, etc.

• Use more semantic figure and figcaption elements for group images with text i.e. captions, descriptions, headers, etc.

Challenge 2: Design

• Create an Art Direction for this project by creating a Style Tile

• Duplicate to your Drafts the provided template

  • Style Tile Template

• Complete all the sections

• Pick ONE CSS grid layout from

  • Code for CodeSpace: https://github.com/LinkedInLearning/css-layout-code-challenges-3155794/codespaces

    • For more infohttps://colin.manikoth.fun/desn-468-web-design-3/css-concepts/grid-layouts

Challenge 3 : Code

Use starter project for Class Roster API template

• JSON Source: https://assets.codepen.io/16425/Spring-2025-Roster.json

• Use this template button

  • https://github.com/ewuweblab/class-roster-via-api

• Change placeholder favicon with this SVG

  • https://lucide.dev/icons/laugh

• Dynamically output the data to the template in scripts.js

  • DO NOT statically (or “hard code”) content directly index.html

• Apply Art Direction to style.css

• Customize script.js

Challenge 4 : Process

Art Direction

• Complete Style Tile

CodePen Collection

• Complete Collection of 5+ Pens on CodePen

GitHub Repo

• Version Control is used with multiple commits, over multiple days

• README.md file edited with your-own-content e.g. name, citations, notes, links, or any relevant information

• Link to public Netlify Deployment

Netlify Deployment

• Deploy to Netlify

Challenge 5 : Submission

• URL to Figma Style Tile

• URL to CodePen Pens

• URL to your project repo stored on GitHub

• Example: *https://github.com/**YourUserName**/**RepoName***

• Provide URL to your project website deployed via Netflify

• Example: https://YourAppName.netlify.com