data object,Grid,Responsive

Great job solving this challenge! 👍

About your question, you need to iterate over data. You can use the map() method to go over each element in the data array. My solution might require reworking your HTML and CSS a bit, but here's what you could try out:

• In index.html, make a div that contains all the cards. You will be modifying the content of this div in your app.js with innerHTML.
• In app.js, you'll want to map() through your data and save the results to a variable. After which, join() the results and then set the variable as the innerHTML.

Here's what mapping through your data would look like:

    let markup = data.map((category) => {
        let { title, timeframes } =  category; // You can use object destructuring here
        // Use template strings below so you can set the category title (Work, Play, etc) and the timeframes as well.
        return `
            <div class="card">
                <h2 class="card__title">${title}</h2>
                // you can type out the rest of your code for your card
            </h2>
        `
    }).join('');
    cards.innerHTML = markup; 

You can refactor things further and make a function so you don't have to keep rewriting the map() part for each timeframe.

It's a bit of a long suggestion, but I hope it helps!

Nice work 😁 If u want to get your component to the center of the web page u should use

body {
           display:flex;
           flex-direction:column; 
           justify-content: center;
           align-items:center; 
}