A [Front-End Project] by: Steve Calla
The static comp challenge is a challenge to get you working that HTML/CSS muscle. 💪 You will be asked to recreate a webpage based off of the provided static comp. Don’t worry, we’ll give you a bit of creative license, however the objective is to build something that respects the integrity of the original design. Once you get into the workforce - building out comps that reflect the designer’s choice in layout, spacing, font, imagery, and color to the smallest detail is a requirement.
-
Learning Objectives:
- Create static comp to practice HTML & CSS skillset
- Create media queries to manage reponsiveness for small, medium, large screen.
- Use normalize css to create cross browser compatability (Chrome, Safari, Firefox).
- Create entire project from scratch including Github repo, file structure, file content and gathering assets.
-
Project Upgrades:
- Added JS to dynamically create character cards on window load.
- Added JS data file to consolidate data in array of objects.
- Worked with Marvel API to get raw data.
- Used WAVE accessiblity chrome extension to eliminate improper use of H5 tag, reduce contrast issues and improve quality of alt tags.
-
Possible Enhancements:
- Setup direct API from Marvel.
-
Known Issues/Bugs:
- None at this time.
- JavaScript
- GitHub
- Get The Repo: Go to https://github.com/stevecalla/MOD2_Static_Comp.
- Fork & Clone: Fork the repo to your GitHub, then clone it to your local machine.
- Directory: CD into the MOD2-Static Comp directory.
- Open: Open index.html using "open index.html" to access on local browser.
- Creators: Steve Calla
- Project Description: https://frontend.turing.io/projects/module-1/m1-static-comp
- GitHub Repo - Steve Calla: https://github.com/stevecalla/MOD2_Static_Comp
- Project Board: https://github.com/stevecalla/flashcards-starter/projects/1
- GitHub Hosted URL: file:///Users/stevecalla/turing_repeat/2Mod/MOD2_Static_Comp/index.html