Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.
This challenge allows you to practice the concepts and techniques learned over the past week and apply them in a concrete project. This Sprint explored advanced CSS and introductory JavaScript concepts. During this Sprint, you studied responsive web design, variable declaration, conditionals, loops, functions, arrays, and objects. In your challenge this week, you will demonstrate proficiency by creating a website of influential artists with data from a JSON object.
This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.
You are not allowed to collaborate during the Sprint Challenge. Your work reflects your proficiency in Preprocessing, and JavaScript Basics.
You have three hours to complete this challenge. Plan your time accordingly.
In this challenge, you will use a data set of artists to build an "influential artists" webpage. This data comes from a set of "50 influential artists" on Kaggle. We have reduced the data to just 20 artists to make it slightly easier to work with. You are free to work with the full data set as a stretch goal.
Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons) and your team lead.
Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. You might prepare by writing down your own answers before hand.
- How would you describe acessibility on the web to someone new to programming?
- Talk about 3 different things you can do to ensure your website is accessible.
- How would you explain the concept of a variable to someone new to programming?
- What is the purpose of using functions in code?
You are expected to be able to answer questions in these areas. Your responses contribute to your Sprint Challenge grade.
Follow these steps to set up your project:
- Fork the repo
- Clone your forked version of the repo
- cd into your repo and create a branch with your first and last name NOTE: Tests will run for the JavaScript portion of this challenge only
- open the terminal in your vs code and type
npm install - next type
npm run test:watchin your terminal - Complete your work making regular commits, once you have all your tests passing and you are ready to submit your work please see canvas for instructions on how to submit
Before you jump in, take 10 minutes to review the code that has already been provided for you. Take time to see how the home page was built. During this time, Review the provided design files. You have been provided all content necessary in the index.html file and basic styling in the index.css file.
- Add a viewport meta tag to the head of your index.html page.
- Add responsive breakpoints to your code for 500px such that your styles match the mobile design file.
Navigate to index.js and complete the MVP challenges. Note that you need to scroll past data (or collapse data in VScode) to find the challenges below.
After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals:
- Website is responsive at multiple breakpoints and looks good in-between breakpoints because student is using responsive units of measurement where appropriate. Student is using most semantic HTML for each element on page and has included ARIA roles where applicable (More research may be required to impliment ARIA roles)
- Student demonstrates and can explain a deep understanding of basic programming concepts, when walking Team Lead through the explaination of their code.
- Use advanced array methods (.map, .reduce, .filer) to refactor your MVP code (create an array of all artists born in the 1900s with .filter, for example) - do this seperate from your MVP tasks
📚Best Practices for Responsive Design
🤝W3 Schools - Responsive Design
Please see canvas for cohort specific submission instructions