Sprint Challenge: Advanced CSS and Intro to JavaScript - Influential Artists
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 an 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 Responsive Design, and JavaScript Basics.
Introduction
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.
Commits
Commit your code regularly and meaningfully.
Interview Questions
(please edit this file and write your answer below each question.)
Please answer the following questions below, you may edit the readme file to include your answers below the question.
- How would you describe acessibility on the web to someone new to programming?
making web pages and the internet accessible to all people, regardless of how they need to interact with the page.
- Talk about 3 different things you can do to ensure your website is accessible.
1>Responsive Units: make sure website is accessible is to use responsive units, example, use REM, EM, %. 2>Screen Readers: it is important to make sure that tags are semantic. 3>Color: every colorfully displayed component should have a visual counterpart.
- How would you explain the concept of a variable to someone new to programming?
for example, starts with 0, and changes every time you gather points in the game.
- What is the purpose of using functions in code?
when you want to repeat a whole chunk of actions. In the case of the latter, we use functions.
- How do you access a key inside of an object inside of an array?
array[index].key
You are expected to be able to answer questions in these areas. Your responses contribute to your Sprint Challenge grade.
Instructions
Task 1: Project Set-Up
Follow these steps to set up your project:
- Fork the repo
- Clone your forked version of the repo
- cd into your repo and work on the main branch NOTE: Tests will run for the JavaScript portion of this challenge only
- connect to codegrade
- open the terminal in your vs code and type
npm install
- next type
npm run test
in 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
Testing & Debugging
Open a second terminal inside of your project by clicking on the split terminal icon
Inside of your second terminal type npm start
You will be running your tests in one terminal and debugging in the other. As you work on your code you should make use of console.log
to check your progress and debug.
Task 2a: Minimum Viable Product - Responsive Design
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.
- Ensure your website is responsive at 500px such that your styles match the mobile design file.
Task 2b: Minimum Viable Product - JavaScript
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.