Creating Your First Umbraco Page

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.


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.

How To Create A Basic Navigation Menu In Umbraco 7

Welcome to the fifth part of 'Creating your first Umbraco page'. In the previous steps, we've broken a design into the components that we'll need to create in Umbraco, we created a master layout, a header, and a footer, and we've added properties int[...]

How To Architect Your First Umbraco Page

This post assumes that you know nothing of creating a page in Umbraco or MVC. By the end of this article, you will understand what a layout is, what a template is and what a partial view is. These are the fundamental concepts of creating your first p[...]

How To Create A Master Layout In Umbraco

[av_textblock size='' font_color='' color=''] In this article, I'll walk you through the process of creating an MVC layout within Umbraco.  First, open the Umbraco backend In the 'Settings' section in the left-hand main menu, right click on t[...]

Creating A Header and Footer Using Partial Views In Umbraco

[av_textblock size='' font_color='' color=''] This is the third article in the 'creating your first Umbraco web page' series.  In the first part we broke a static HTML file into the components we need within Umbraco, namely a master layout, a header[...]

How To Add Dynamic Fields And Page Information To An Umbraco Template

This is the fourth article in 'Creating Your First Umbraco Page' series.  So far we've split a very boring HTML page into a master layout, header component, footer component and a homepage template.  So far the page is all hard coded and content edit[...]

Homepage Learn Umbraco CMS Umbraco Developers Guide Creating Your First Umbraco Page
Back to top