Get Started


In this project, you’ll use the Lightning Design System along with Visualforce to build a page that displays your contacts as tile components. The page will conform to the new Lightning UI look and feel, and you don't have to write a single line of CSS in the process!

The Lightning Design System consists of a few different pieces:

  • CSS framework
  • HTML components
  • Icons
  • Design tokens
  • Design guidelines

Over the course of this project, we’ll focus on the CSS framework, HTML components, and briefly cover icons. For a more detailed introduction of the Lightning Design System, check out the longer Trailhead module and the documentation on the Lightning Design System site.

Lightning Design System is quite a mouthful, so we’ll be referring to it here as the Design System.

Create a Contact List

What You’ll Do

  • Create a Visualforce page that displays a list of contacts

Here's a simple wireframe of what you’ll be building. It consists of a page header, followed by a list of contacts tiles, and a footer at the bottom.

Wireframe of Visualforce page to be built


We won’t check any of your setup. Click Verify Step to proceed to the next step in the project.

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities