Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

ASP.NET MVC Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding Design Files

4:41 with James Churchill

We’ve been focused on getting our project setup and adding our first controller and view. In this video, let’s update our website’s design.

Design Files

You can download a ZIP file of the design files at http://treehouse-project-downloads.s3.amazonaws.com/aspnet-mvc-basics-design-files.zip.

Follow Along

To follow along commiting your changes to this course, you'll need to fork the aspnet-comic-book-gallery repo. Then you can clone, commit, and push your changes to your fork like this: 

git clone <your-fork>
cd aspnet-comic-book-gallery
git checkout tags/v3.5 -b adding-design-files

Design Process

The design process for the Comic Book Gallery website started with creating an overall layout that adhered to Bootstrap’s layout conventions by following their documentation at http://getbootstrap.com. Then we downloaded a free Bootstrap compatible theme from the great website https://bootswatch.com. From there, we did some minor customization to the styles, using CSS.

Additional Learning

If you want to learn more about the great Bootstrap CSS framework, don’t miss these Treehouse resources.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    So far in this course we've been focused on getting our projects set up and 0:00
    adding our first controller and view. 0:04
    Our website's design, well, let's be honest, we really don't have a design yet. 0:07
    We've just been using some basic HTML tags with no CSS styles whatsoever. 0:12
    As it turns out, our development team for this project includes a designer. 0:18
    While we've been ramping up on the development work, 0:23
    they've been working hard on creating an interesting design for our website. 0:26
    It's built on a design framework called Bootstrap. 0:30
    And if you're interested in learning more about that, check the teacher's notes for 0:33
    a link to a Bootstrap course. 0:36
    In this video we're going to use the fruit of their labor 0:39
    to update our website's design. 0:42
    To get started with this process, 0:45
    we need to download the zip file that the designer has provided for us. 0:47
    You can find a link to the zip file in the teacher's notes. 0:51
    I've already downloaded the file to my desktop. 0:54
    To unzip it, right-click on the file and select the extract all menu item. 0:58
    And then click on the extract button. 1:04
    Now we're seeing the contents of the zip file. 1:08
    There are five folders. 1:11
    Content, fonts, images, scripts, and views. 1:12
    Let's take a look at each of these folders. 1:19
    The content folder contains two CSS files. 1:22
    One named bootstrap.min.css, which is the CSS for 1:24
    the Twitter Bootstrap CSS framework. 1:29
    And site.css, which contains the styles for our website. 1:32
    Bootstrap provides us with a set of pre-built CSS styles for 1:37
    styling elements like menus and buttons. 1:41
    It also provides a responsive layout grid which our design takes advantage of. 1:44
    The fonts folder contains files for 1:49
    a collection of icons that are part of the Bootstrap CSS framework. 1:52
    The images folder contains a cover image for 1:56
    each of the comic books that we'll display in our website. 1:59
    The scripts folder contains JavaScript and related files for 2:03
    the popular JQuery library. 2:07
    There's also JavaScript files for the Bootstrap CSS framework and 2:09
    the Modernizr library. 2:13
    Modernizr can be used to detect what HTML, CSS, and 2:15
    JavaScript features the user's browser has available. 2:19
    The Views folder contains a shared folder that in turn contains 2:23
    an _Layout.cshtml file. 2:27
    This file is an MVC layout page which provides us with an overall look and 2:31
    feel for each of the pages in our website. 2:36
    We'll take a closer look at this file in the next video. 2:38
    Let's add these folders and files to our project. 2:42
    To do that, select the five folders and 2:45
    copy them to the clipboard by pressing control-C. 2:48
    Then open the folder that contains our project files. 2:52
    A handy shortcut for doing this is to right-click on the project in a solution 2:56
    explorer panel and select the open folder in File Explorer menu item. 3:00
    Then press control-V to paste the folders from the clipboard 3:06
    into the root of our project. 3:10
    Now that we've added the design files to the file system, 3:12
    we can add them to our Visual Studio project. 3:15
    By default, Solution Explorer will only show us 3:18
    the files that are already part of the project. 3:21
    If it's not already selected, click on the project name. 3:24
    Then, in the toolbar at the top of the panel, click on the Show All Files icon. 3:28
    Now, we can see the folders and 3:33
    files available on the file system that aren't part of our project. 3:35
    Their icons are outlined in dots. 3:39
    Let's start by adding the content folder by right clicking on the folder and 3:42
    selecting the Include in Project menu item. 3:47
    Notice that once we add the folder, 3:50
    each of the files within the folder are also added to the project. 3:52
    Go ahead and do the same thing for the fonts, images and scripts folders. 3:56
    The last folder that we need to add may not be visible if you don't have the views 4:04
    folder expanded. 4:08
    Expand the views folder if you need to, and add the shared folder to the project. 4:10
    If you're using GitHub, let's commit our changes. 4:16
    Enter a commitmessage of added design files and click the commit all button. 4:19
    If Visual Studio asks you to save the comicbookgallery.sln file, 4:28
    go ahead and say yes. 4:32
    In the next video, let's take a closer look at the _Layout.cs HTML file. 4:35

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up