# Creating Your First Template

Umbraco creates a corresponding template when you select the **Document Type with Template** option when creating a Document Type.

To edit the template:

1. Go to **Settings**.
2. Expand the **Templates** folder in the **Templating** section of the tree. You should see a template titled **HomePage**.

   {% hint style="info" %} If you do not see the template, try refreshing the page. {% endhint %}
3. Open the template. It contains a little bit of Razor code.

   **Code Breakdown:**

   * `@using Umbraco.Cms.Web.Common.PublishedModels;` - Imports the namespace for Umbraco's strongly-typed content models.
   * `@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage` - Sets the view to inherit from Umbraco's base view class for accessing Umbraco-specific features and helpers.
   * `Layout = "null";` - The view will not use a layout page unless explicitly specified. For more information on [Razor Pages Layout](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/layout), see the Microsoft Documentation.

   ![Home Page Template](/files/WS3g2nnmpURtN3wqRGjz)

Use the files from the [Custom Umbraco Template](/umbraco-cms/tutorials/creating-a-basic-website/getting-started.md#what-you-need) folder:

1. Open the **Custom Umbraco Template** folder and copy the contents of **index.html**.
2. Paste the content into the *HomePage* template below the closing curly brace "}".
   * Umbraco ***Templates*** uses ***Razor*** that allows you to add code in your ***Template*** files. ***Razor*** reacts to `@` signs.
3. Click **Save**.

We now have a *Template*. That's two out of the three stages complete for our first page.

## Creating Your First content node

Our third and final stage to creating our first page in Umbraco, is to create a ***content node***. The content node uses our ***Document Type*** and ***Template*** to serve up an HTML page to web visitors.

To add a content node:

1. Go to **Content**.
2. Select **...** next to **Content** in the tree.
3. Click **Create**.
4. Select **HomePage**. The Home Page opens in the content editor.

   * If you cannot see the content node, check that **Settings** > **Document Types** > **HomePage** > **Structure** > **Allow at root** is enabled.

   ![Home Page Content Node](/files/RRT4a5rrlvE8dUXvzi6J)
5. Enter the **Name** for the content node. We are going to call this *Homepage*.
   * The name will show up in the node list and will be used to create a URL for the page. Try to keep it short but descriptive.
6. Enter the following details:

   | Name        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
   | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
   | Page Title  | Welcome to Widgets Ltd                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
   | Body Text   | <p><strong>Lorem ipsum</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et aliquet ante, ut eleifend libero.</p><ul><li>Proin eleifend consequat nunc id vulputate.</li><li>Ut eget lobortis metus, non congue lorem.</li><li>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li><li>Maecenas tempus non lectus rhoncus efficitur.</li></ul><p>Sed est ligula, maximus in dolor sed, lacinia egestas ligula. Donec eu nisi lectus.</p><p><em>Morbi pharetra pulvinar arcu non gravida.</em></p> |
   | Footer Text | Copyright Widgets Ltd 2024                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
7. Click **Save and Publish**. The content tree will reload with the homepage node.

   ![Home Page in Content Tree](/files/22mHnLD0umbsBem7SGIv)

## Accessing the Frontend

To view your content on the frontend:

1. Go to the **Info** tab in the **Homepage** content node.
2. Click on the link under the **Links** section.

The default Umbraco page is gone and we can see a basic unstyled page. We are getting there.

{% hint style="info" %}
If you see a blank page, check if the template is entered and remember to save it.
{% endhint %}

![An Unstyled Homepage](/files/JV9OSPbPNS9PletPuSw5)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
