---
title: Creating the website layout
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
> **Info:** This page is a part of a tutorial, which you should follow sequentially from beginning to end. [Go to the first page: Using the Xperience interface](https://docs.kentico.com/13tutorial/using-the-xperience-interface.md).
## You will learn about:
Your tutorial website is coming up nicely! In the previous steps, you have created all the resources you'll need to build your MVC application.
In this part of the tutorial, we'll focus on designing the live site MVC application serving as the front-end of your Xperience site. This section is mainly focused on MVC 5 development using Xperience API to make the process as smooth as possible.
First, to achieve a consistent experience on our website, let's create a layout view. The view will contain the website's header, navigation menu, and footer content, and ensure a uniform look across all pages on the website. We'll also add a _\_ViewStart_ file that assigns the default layout to all views in your MVC project.
## Adding CSS resources
The basic design of the _Medio clinic_ website relies on CSS styles from the _styles.css_ file in the tutorial resources (you can download the resources here: [TutorialWebsite.zip](https://docs.kentico.com/docsassets/13tutorial/creating-the-website-layout/TutorialWebsite.zip)). We recommend that you keep design-related resources apart from the rest of the code in the MVC application.
Add the CSS resources by following these steps:
1. In **Visual Studio**, include the necessary styles by adding the **styles.css** file from the tutorial resources to the _Content_ folder in the _MEDIOClinic_ project.
2. Open the **App\_Start/BundleConfig.cs** file and edit the _RegisterBundles_ method.
- The project template your MVC application is based on contains two bundles used for bundling CSS and JavaScript files. In this tutorial, you will only be working with the CSS bundle. You can safely ignore the JavaScript bundle.
3. Add the **styles.css** file to the _"\~/Content/css_" bundle. The _RegisterBundles_ method should now look like the following:
```csharp
public static void RegisterBundles(BundleCollection bundles)
{
// Custom JavaScript files from the ~/Scripts/ directory can be included as well
bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
"~/Scripts/site.js"));
// Custom CSS files from the ~/Content/ directory can be included as well
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css",
"~/Content/styles.css"));
}
```
> **Tip:** Use style and script bundling to reduce the overall size of the site's style and script files and minimize the number of requests made to the server when loading each page. Learn more abound bundling on Microsoft's official documentation portal: [Bundling and minification](https://learn.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification).
Your project now contains the stylesheet you will use to define the website's design.
## Creating the site layout
In this step, you will create the layout view.
1. In Visual Studio, open **Views/Shared/\_Layout.cshtml**.
2. Replace the code in _\_Layout.cshtml_ with the sample code in the **index.html** file from the tutorial resources (you can download the resources here: [TutorialWebsite.zip](https://docs.kentico.com/docsassets/13tutorial/creating-the-website-layout/TutorialWebsite.zip)).
3. Locate the _..._ tags, and replace the hardcoded page title "_Tutorial website"_ with a "_Medio Clinic -"_ prefix followed by the Razor call **@ViewBag.Title**.
4. Render the style bundle containing the site's _styles.css_ file inside the __ tags.
```xml
@Styles.Render("~/Content/css")
```
5. Add a **styles** Razor section before the closing __ tag. The section will be used to add page-specific stylesheets for views that use the page builder.
```xml
@RenderSection("styles", required: false)
```
6. Delete the content between the closing __ andopening __ tags, and replace it with the Razor call **@RenderBody()**.
7. Add a **scripts** Razor section before the closing __ tag. The section will be used to add page-specific scripts for views that use the page builder.
```xml
@RenderSection("scripts", required: false)
```
8. Your **\_Layout.cshtml** code should look like this:
```xml
@* Dynamically resolves the page's title *@
Medio Clinic - @ViewBag.Title
@* Loads the styles.css resource *@
@Styles.Render("~/Content/css")
@* Razor section for additional page-specific styles *@
@RenderSection("styles", required: false)
@* Loads the content of your Tutorial's pages as sub views *@
@RenderBody()
@* Razor section for additional page-specific scripts *@
@RenderSection("scripts", required: false)
```
9. Save your changes
You now have a consistent layout for your website. You also have the option to change the common layout for all views in a single location, if you want to provide your site's visitors with a different experience.
**Previous page:** [Working with generated classes](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-mvc-5-development-tutorial/working-with-generated-classes.md) — **Next page:** [Displaying the page content](https://docs.kentico.com/13tutorial/developer-tutorial/asp-net-mvc-5-development-tutorial/displaying-the-page-content.md)
**Completed pages:** 7 of 10