OK, Umbraco

In this section we will talk through what you need in order to get started and the considerations on what kind of database to use for the data store.

Let's fire up Visual Studio and install the Umbraco goodness.

Pretend you are in a "choose your own adventure" story and watch this video if you want to install Umbraco using the Microsoft SQL Compact Edition database. This is ideal for local development and training purposes - not so great if you want to go and build a real Umbraco site. There is a way to migrate to a proper SQL Server later if you need to.

Choose this path if you want to install Umbraco and use Microsoft SQL Server as your data repository. This is the method you should use for real scenarios.

Here we'll show how Umbraco utilises Model-View-Controller in order to create it's pages.

Here we'll walk through creating the simplest of pages in Umbraco in order to host "Hello World".

Here I will just reflect on what we have done so far and set down a little challenge.

In this video I will go through how to create the About page - the answer to the challenge I set.

We start introducing concepts that enable us to leverage content management aspects of Umbraco. We start simple but we are going in the direction of maximum CMS!

Now a few pages have been added, let's re-organise things a little.

If you have an object-oriented programming background you may have heard of the terms composition and inheritance. Umbraco has a feature called Composition that is a little bit like that. It allows you to create document types that you can later inherit from allowing you to re-use common elements.

An introduction to master pages - these are pages that you can use as templates for other pages.

This is a talky video. I will chat about my website design process from hand drawn sketches to wire-framing the pages into a design document.

For this course I have created a fictional requirement for a website called Highly Developed. I'll talk through the requirements and the design process before producing the wireframe designs in the PDF that you can find in the resources section.

We will then refer back to this design document as we create the pages for the website in the following sections.

Here we introduce the use of Document Types without an accompanying template. We can use Document Types as data structures. We will do this for the storing of any website settings we want to be configurable - for example, the website name, the email address we use or any API keys we wish to store.

In this part we will add the third party references to bootstrap, jquery and fontawesome to our master page.

Here we are introduced to the Client Dependency Framework which Umbraco has adopted to provide bundling and minification.

Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.)

In this video we look at the Bootstrap 4 Navbar and add one to our master page to provide the site navigation component.

We have added a navigation menu but the menu items are hard coded. In this session we will query Umbraco and build the pages dynamically from the query results.

We will take out the navigation menu from the master page and place it in a partial view which we will then reference. This way, we are able to share the navigation functionality with other master pages and also reduce the cutter in the main master page.

In this session we will add the footer for the website.

We add a cookie confirmation to the site so we are compliance with data privacy regulations.

Just a quick review of the section.

An introduction to the work ahead. We finally start being productive!

As it turns out, we do need another hero. In this session we will create a jumbotron for the homepage.

Here, we will create an area for a call to action or mission statement. We'll make it customisable by combining a composition and a partial view.

In this one we create the document type to support capturing the data needed for a news article.

Here we see how we can hold lists of items. We create a New Articles document type to act as a container for the news.

In this session we query Umbraco for the latest news articles and then display them as cards using Bootstrap's card deck and card classes.

A quick introduction into how we are going to approach adding the Twitter feed to the homepage.

We will, initially, look to put an embedded Twitter timeline onto the homepage.

The Macro is introduced. A Macro, in Umbraco, is basically a partial view that allows parameters to be passed in via Umbraco's framework. Macro's will become a useful tool in our toolbox as they allow us to create reusable content that can be added dynamically to our pages.

We are starting to add custom code. It's best if we keep our custom code separate from the Umbraco code base. We'd usually do this if we were developed ASP.NET MVC applications and it's a good idea here too. Therefore, in this session we will create a Core project where we can house all our custom code - service classes, controllers and helper methods.

The surface controller is introduced. The surface controller allows us to call controller actions from our views. Here we simply use the controller to render a view with a custom view model.

We will add the Twitter API call here and look at the data that is returned. To save you have to type out a bunch of code refer to the resources section for the snippet you need to make the call to the API.

Previously we have created a surface controller that queries the Twitter API for the latest tweets, given a twitter handle. In this part we will take the JSON formatted data and render it to the view using Bootstrap Cards.

This is a quick overview of the Page -> Macro -> Controller -> View system that we have used in our Twitter Macro.

This is a quick introduction into what we are going to do in this section.

In this video we will see how to use a single document type as the blueprint to create more than one page. We will do this by creating a more generic, multi-purpose document type.

Here we will see how we can add a set of styles to the rich text editor "styles" menu. This give us then the ability to add a common set of header styles, body styles, title styles or whatever we want. Editors can then apply these styles when writing content in the rich text editor.

We finally get to use the Umbraco Grid which gives us a super flexible way of designing our pages without using any code. By leveraging the existing Umbraco controls and our Macros we should be able to create a diverse set of pages.

The culmination of this section is to learn how we can use the Macros we create and embed them in the grid.

Here we will create a Privacy page very quickly from the generic Content Page template.