---
title: Precourse FTW - Building personal page - Intro to CodeSandbox
tags: FTW, Precourse, BuildingPersonalPage
---

# Intro to CodeSandbox

## About Code Editors

What is a code editor? A code editor is first and foremost a text editor. However, it has more powerful features that help speed up your coding process, like syntax-highlighting, autocompletion, code snippets, auto format and more.

CodeSandbox is an online editor for multiple programming languages. In this short course, we will use CodeSandbox for our web development. The advantage of it is that we don't need to install or set up anything.

## Register an Account

To begin, let's register an account on CodeSandbox. While you can use it without an account, it is recommended that you create an account there for easy management of your projects.

1. Go to https://codesandbox.io
2. Click `Sign In` and use either your Github account or Google account to log in. This will create a new account for you on CodeSandbox if one doesn't exist yet.
3. Fill in your information and click `Finish Sign Up`. 
4. You'll be greeted with this screen. 
:::success
👌 Great! You have created a CodeSanbox account!
:::

## Create a new HTML Project

Each project on CodeSandbox is called a Sandbox.

1. Click `New Sandbox` or  to create a new project.
2. Choose `static` with an HTML5 icon () to create a web project.
3. You will start with a basic template of a website!


- On the left is your folder and file structure. You can add new files here.
- In the middle is the content of the opened file (in this case the `index.html` file).
- On the right is the rendered view of your website.

## Share your Website

There are two ways to share your website/project.

#### 1. Share the URL in the address bar

The person you share this link with will see code editor view. It's good to share with your coding classmates or instructor for feedback.

#### 2. Share the web view URL


With this like, the person you share it with will only see the website, not the code editor with your source code.

:::warning
⚠️ People can still see your website's code via the browser's web inspector tool (Ctrl/Cmd + Shift + C).
:::