Skip to main content

Get Started


Since Lightning Web Components is the preferred way to build UI with Salesforce, head over to the Migrate from Visualforce to Lightning Web Components trail to learn how to use LWC and comply with current web standards. Otherwise, continue with this badge to learn more about Visualforce.


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 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