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.
Introduction
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.
Resources
We won’t check any of your setup. Click Verify Step to proceed to the next step in the project.
