Creating the First Visualforce Page in Salesforce

There are mainly three ways to create a Visualforce page in Salesforce, i.e., by using the developer console and by using the Visualforce Pages option. In Salesforce, Visualforce has a very powerful development tools like syntax highlighting, tag pair matching, smart indenting, auto-complete, and auto-suggest.

In order to create a Visualforce page, we need to enable the development mode in Salesforce. We use the following steps to enable the development mode:

1. Click on the cat locating at the top of the page, and from the popup, we click on Settings.
   
2. From the sidebar, we click on Advance User Details, which will open the Advance User Details
   
   
3. From the Advance User Details page, we check the Development Mode and Show View State Development Mode checkbox and save the information.
   

Let's understand each way of creating Visualforce page one by one in Salesforce:

By using the Developer Console

In order to create a Visualforce page by using the developer console, we use the following steps:

1. Open the developer console by clicking on the gear icon => Developer Console location at the top of the page.

2. After clicking on the Developer Console option, the Developer Console will be opened in New Window.

3. In order to create a Visualforce page, we click on File => New => Visualforce page.

4. We enter the name of the Visualforce Page, e.g., HelloWorld, and click on the OK

5. We add the following code in the HelloWorld.vfp file and save it by using CTRL+S or by clicking on the Save option in the File menu.

6. Now, we click on the Preview button to see our new Visualforce page.

By using Visualforce Pages from the setup

We use the following steps to create a Visualforce page by using the Visualforce Pages from setup:

1. In order to create a VF page, we first navigate to Setup => Custom Code => Visualforce Pages.
   
2. We click on the New button to create a VF page.
3. It will then ask for the Label and Name of the VF page. After Label and Name, we put the code in the Visualforce Markup section.
4. Finally, click on the Save button.