⏰ 15 mins

1. Loop over an array of users and display their names on the page

<aside> 💡 TIP: An individual user looks like this. You’ll see an array full of them in the boilerplate code.

{ 
  id: 'f755ce63-8284-4304-bb7e-2449a57c39b9', 
  name: 'Debra Hunt', 
  avatar: '<https://api.adorable.io/avatars/285/66aff284-3da7-482a-91dd-1686a35d444a.png>' 
}

</aside>

1. Display their avatar with an img tag before the name
2. If the user does NOT have an avatar, display this placeholder image: /placeholder-avatar.jpg

<aside> 💡 All styles are already provided, you just need to use the classes in the boilerplate code (this is how it will be on the exam as well)

</aside>

1. By the end of the exercise, your page should look like this

💪 Bonus

If you complete the challenge with time left over try this slightly harder version where missing avatars display the user's initials instead of the same placeholder for all.

Helpful Resources

1. Vue.js Docs - Template Syntax
2. Vue.js Docs - List Rendering
3. Vue.js Docs - Conditional Rendering