> For the complete documentation index, see [llms.txt](https://parthean.gitbook.io/web-dev-in-10-days/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://parthean.gitbook.io/web-dev-in-10-days/day-1.md).

# Day 1

Today, we'll start by getting our environment set up and making our first website.

## Getting Started

### 1. Download Sublime Text 3

When we write an essay, we need a text editor like Google Docs or Microsoft Word. So it would make sense that when we write code, we need a code editor! For our Code editor, we'll be using a tool called Sublime Text 3 -- you can download it here: <https://www.sublimetext.com/3>

{% hint style="info" %}
Ask your **Installation Questions** [**on** **Parthean Community**](https://platform.parthean.com/?redirect_uri=https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=30085e15-6e80-4df5-ba2e-743e585a33cc).
{% endhint %}

{% hint style="warning" %}
If you already have a code editor that you're comfortable with (like Atom, VSCode, or others, you can use those).
{% endhint %}

### 2. Create a file called `index.html`

Create a file called `index.html` and paste the following code inside of it.

```markup
<!DOCTYPE HTML>
<html>
    <head>
        <title>My first website!</title>
        <meta charset="utf-8">
    </head>
    <body>
        Hello world! My name is <!-- put your name here -->,
        and this is my first website!
    </body>
</html>
```

### 3. Drag and drop your `index.html` file into your web browser

Go to your file explorer and find your `index.html` file. Drag and drop that file into your favorite browser.

What do you see?

### 4. You just made your first website!

Rachel, Phoebe, and I are very happy for you!

![](https://media.giphy.com/media/31lPv5L3aIvTi/giphy.gif)

### Sooooo how'd that work?

Every webpage you look at is made of HTML code (even this webpage that you're looking at right now -- right click anywhere on this page, then click "Inspect," to see!). Web browsers just do the job of reading and interpreting that code to make it look pretty like it does here.

So to recap, in **Step 1**, you downloaded a code editor, which allowed you to write your first HTML code in **Step 2**. Then in **Step 3**, you ran the code in your web browser.

{% hint style="info" %}
Ask your **Day 1 Questions** [**on** **Parthean Community**](https://platform.parthean.com/?redirect_uri=https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=30085e15-6e80-4df5-ba2e-743e585a33cc).
{% endhint %}

## \[Optional] How the Internet Works

We use the internet all the time without knowing how it works and now doesn't have to be the time you learn. However, knowing how the entire system works, even at a high level, does make web development easier to think about, so I'd recommend it if you have the time.

{% embed url="<https://youtu.be/Dxcc6ycZ73M>" %}

{% embed url="<https://www.youtube.com/watch?v=ZhEf7e4kopM>" %}

{% embed url="<https://youtu.be/MwxMsaFFycg>" %}

{% hint style="info" %}
Ask your **Day 1 Questions** [**on** **Parthean Community**](https://platform.parthean.com/?redirect_uri=https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=30085e15-6e80-4df5-ba2e-743e585a33cc).
{% endhint %}
