> For the complete documentation index, see [llms.txt](https://helpdesk.contakt-ph.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpdesk.contakt-ph.com/page-builder-101/how-to-use-view-code-panel.md).

# How to use View Code Panel?

#### The View Code Panel is mainly for getting the code to modify it base on the user's preference. 

<figure><img src="/files/x6GXIIVOlosi9ZCU4ztS" alt=""><figcaption></figcaption></figure>

#### To make use of the code follow these steps. Take note you must have a code editor and a local development server to view the extracted page. You can use VS code for this and Live Server extension from Microsoft:

{% embed url="<https://code.visualstudio.com/>" %}

<https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer>

#### Step 1 - Create a folder  and make two files: index.html and style.css. Copy the code from editor into their respective files.

<figure><img src="/files/02axv3XhSzYM2d8ew258" alt=""><figcaption></figcaption></figure>

#### Step 2 - Don't forget to reference the CSS file into the html file otherwise it won't look good.

````html
```html
<link rel="stylesheet" href="style.css">
```
````

#### Step  3 - Once done click the go live section on the bottom right of the editor from the extension you installed.&#x20;

<figure><img src="/files/g6h2ZSQ7JzIZ1CwNvvMi" alt=""><figcaption></figcaption></figure>

#### Step 4 - Once clicked, your browser should now display the site.&#x20;

<figure><img src="/files/jybjCp0v25QYyX5lfrFY" alt=""><figcaption></figcaption></figure>