Creating dedicated layouts for multiple devices

Modern web applications use web page layouts to provide a consistent and coherent style. It is best practice to use HTML in combination with CSS to define this layout. In ASP.NET Core 2.0, the common web page layout definition is centralized in a layout page. This page includes all the common user interface elements, such as the header, the menu, the sidebar, and the footer.

Furthermore, common CSS and JavaScript files are referenced in the layout page, so that they can be used throughout your whole application. This allows you to reduce code in your views, thus helping you to apply the DRY (Don't Repeat Yourself) principle.

We have been using a layout page since the very early versions of the Tic-Tac-Toe sample application. It was first introduced when we added it in a previous chapter. We have used it since to give our application a modern look, as you can see here:

Let's look at the layout page in more detail, to understand what it is and how...