How To Create Your First Umbraco Webpage

Welcome to lesson 3, in this section, I will teach you how to create your first page within Umbraco. The aim of this guide is to get you used to the Umbraco backend, the components required to create a page and the process. I’ll warn you now, for simplicity and ease of teaching.. the page we will be creating will be ugly!  The aim of this guide is to help you understand how Umbraco works, so things like HTML, CSS etc.. are purposely kept to a minimum.

In This Guide

1. How To Architect Your First Umbraco Page
2. How To Create A Master Layout In Umbraco
3. Creating A Header and Footer Using Partial Views In Umbraco
4. How To Add Dynamic Fields And Page Information To An Umbraco Template
5. How To Create A Basic Navigation Menu In Umbraco 7


If you have followed the previous tutorials, then congratulations you have just created your first Umbraco page!  This is quite a big milestone as everything else you will learn will building on these principles.  Just think, you now know the basics of creating a whole website in Umbraco.. albeit a pretty naff one. As we continue through the lessons and you spend more time building components within Umbraco, you’ll become much more comfortable using it.

If you’ve followed this guide, then you should now have everything you need to create a basic website in Umbraco.  There are many ways of doing things and depending on your level of expertise and the complexity of your project, you may have corners like, if my document types are all virtual how do I add them to source control.  If you know about good design practices, you might also think having the menu logic in your view is bad practice.  If you want to write your code following SOLID principles, don’t worry too much now as I’ll go over these types of concepts in lesson 6.  As for the next lesson ‘Umbraco API explained’,  I’ll explain some of the most frequently used API calls.


Core Concepts


API Explained