Creating a Basic Website

A guide to creating a basic website using Umbraco

This tutorial is based and tested on the latest version of Umbraco 14.

Introduction

This tutorial will guide you through building an Umbraco website step by step. It will show you how to take any website template, such as flat HTML, CSS, and JavaScript, and install it into a new Umbraco site. Then, you can connect the sections that require content management by Umbraco.

We will not be using any starter kits in this tutorial. While these can be helpful, they do not offer a full understanding of the basics of Umbraco. Instead, we will focus on creating Document Types and Templates and how they work together to build pages.

It is recommended that you work through the sub-sections in the following order.

Getting Started

To follow this tutorial, ensure to complete this section first.

Creating Your First Document Type

Learn how to create Document Types and understand their purpose.

Creating Your First Template and Content Node

Discover how to create your first template and set up a content node.

CSS & Images

Learn how to integrate CSS and JavaScript into your Umbraco site.

Displaying the Document Type Properties

Find out how to connect Document Type Properties (Umbraco Data Fields) to templates to display the editor's data correctly.

Creating a Master Template

Learn how to create a Master Template to streamline the creation of additional pages and reduce repetitive HTML code.

Creating Pages and using the Master Template

Use the Master Template to generate new page types.

Setting The Navigation Menu

Manage the navigation menu in your template.

Articles Parent and Article Items

Learn how to create a parent page that automatically lists and links to child nodes. Ideal for something like blogs or news sections.

Adding Language Variants

Explore how to expand your basic site by introducing Language Variants to support multiple languages.

Conclusions

By this stage, you will have a basic functioning site. Discover where to go next and explore the deeper capabilities of Umbraco with additional resources.