1
00:00:00,710 --> 00:00:04,890
So far in this course we've been focused
on getting our projects set up and

2
00:00:04,890 --> 00:00:07,610
adding our first controller and view.

3
00:00:07,610 --> 00:00:12,700
Our website's design, well, let's be
honest, we really don't have a design yet.

4
00:00:12,700 --> 00:00:18,960
We've just been using some basic HTML
tags with no CSS styles whatsoever.

5
00:00:18,960 --> 00:00:23,490
As it turns out, our development team for
this project includes a designer.

6
00:00:23,490 --> 00:00:26,240
While we've been ramping
up on the development work,

7
00:00:26,240 --> 00:00:30,410
they've been working hard on creating
an interesting design for our website.

8
00:00:30,410 --> 00:00:33,240
It's built on a design
framework called Bootstrap.

9
00:00:33,240 --> 00:00:36,860
And if you're interested in learning more
about that, check the teacher's notes for

10
00:00:36,860 --> 00:00:39,370
a link to a Bootstrap course.

11
00:00:39,370 --> 00:00:42,360
In this video we're going to
use the fruit of their labor

12
00:00:42,360 --> 00:00:43,810
to update our website's design.

13
00:00:45,050 --> 00:00:47,030
To get started with this process,

14
00:00:47,030 --> 00:00:51,560
we need to download the zip file that
the designer has provided for us.

15
00:00:51,560 --> 00:00:54,960
You can find a link to the zip
file in the teacher's notes.

16
00:00:54,960 --> 00:00:58,750
I've already downloaded
the file to my desktop.

17
00:00:58,750 --> 00:01:04,410
To unzip it, right-click on the file and
select the extract all menu item.

18
00:01:04,410 --> 00:01:06,220
And then click on the extract button.

19
00:01:08,180 --> 00:01:11,040
Now we're seeing the contents
of the zip file.

20
00:01:11,040 --> 00:01:12,910
There are five folders.

21
00:01:12,910 --> 00:01:19,360
Content, fonts, images,
scripts, and views.

22
00:01:19,360 --> 00:01:22,050
Let's take a look at
each of these folders.

23
00:01:22,050 --> 00:01:24,938
The content folder contains two CSS files.

24
00:01:24,938 --> 00:01:29,850
One named bootstrap.min.css,
which is the CSS for

25
00:01:29,850 --> 00:01:32,900
the Twitter Bootstrap CSS framework.

26
00:01:32,900 --> 00:01:37,400
And site.css,
which contains the styles for our website.

27
00:01:37,400 --> 00:01:41,680
Bootstrap provides us with a set
of pre-built CSS styles for

28
00:01:41,680 --> 00:01:44,580
styling elements like menus and buttons.

29
00:01:44,580 --> 00:01:49,960
It also provides a responsive layout grid
which our design takes advantage of.

30
00:01:49,960 --> 00:01:52,500
The fonts folder contains files for

31
00:01:52,500 --> 00:01:56,880
a collection of icons that are part
of the Bootstrap CSS framework.

32
00:01:56,880 --> 00:01:59,930
The images folder contains
a cover image for

33
00:01:59,930 --> 00:02:03,530
each of the comic books that
we'll display in our website.

34
00:02:03,530 --> 00:02:07,150
The scripts folder contains JavaScript and
related files for

35
00:02:07,150 --> 00:02:09,680
the popular JQuery library.

36
00:02:09,680 --> 00:02:13,410
There's also JavaScript files for
the Bootstrap CSS framework and

37
00:02:13,410 --> 00:02:15,300
the Modernizr library.

38
00:02:15,300 --> 00:02:19,730
Modernizr can be used to detect what HTML,
CSS, and

39
00:02:19,730 --> 00:02:23,580
JavaScript features the user's
browser has available.

40
00:02:23,580 --> 00:02:27,280
The Views folder contains a shared
folder that in turn contains

41
00:02:27,280 --> 00:02:31,060
an _Layout.cshtml file.

42
00:02:31,060 --> 00:02:36,010
This file is an MVC layout page which
provides us with an overall look and

43
00:02:36,010 --> 00:02:38,800
feel for each of the pages in our website.

44
00:02:38,800 --> 00:02:42,080
We'll take a closer look at
this file in the next video.

45
00:02:42,080 --> 00:02:45,470
Let's add these folders and
files to our project.

46
00:02:45,470 --> 00:02:48,940
To do that, select the five folders and

47
00:02:48,940 --> 00:02:52,870
copy them to the clipboard
by pressing control-C.

48
00:02:52,870 --> 00:02:56,950
Then open the folder that
contains our project files.

49
00:02:56,950 --> 00:03:00,970
A handy shortcut for doing this is to
right-click on the project in a solution

50
00:03:00,970 --> 00:03:06,178
explorer panel and select the open
folder in File Explorer menu item.

51
00:03:06,178 --> 00:03:10,720
Then press control-V to paste
the folders from the clipboard

52
00:03:10,720 --> 00:03:12,590
into the root of our project.

53
00:03:12,590 --> 00:03:15,860
Now that we've added the design
files to the file system,

54
00:03:15,860 --> 00:03:18,790
we can add them to our
Visual Studio project.

55
00:03:18,790 --> 00:03:21,680
By default,
Solution Explorer will only show us

56
00:03:21,680 --> 00:03:24,640
the files that are already
part of the project.

57
00:03:24,640 --> 00:03:28,040
If it's not already selected,
click on the project name.

58
00:03:28,040 --> 00:03:33,570
Then, in the toolbar at the top of the
panel, click on the Show All Files icon.

59
00:03:33,570 --> 00:03:35,310
Now, we can see the folders and

60
00:03:35,310 --> 00:03:39,540
files available on the file system
that aren't part of our project.

61
00:03:39,540 --> 00:03:42,860
Their icons are outlined in dots.

62
00:03:42,860 --> 00:03:47,060
Let's start by adding the content folder
by right clicking on the folder and

63
00:03:47,060 --> 00:03:50,510
selecting the Include
in Project menu item.

64
00:03:50,510 --> 00:03:52,640
Notice that once we add the folder,

65
00:03:52,640 --> 00:03:56,930
each of the files within the folder
are also added to the project.

66
00:03:56,930 --> 00:04:03,840
Go ahead and do the same thing for
the fonts, images and scripts folders.

67
00:04:04,990 --> 00:04:08,950
The last folder that we need to add may
not be visible if you don't have the views

68
00:04:08,950 --> 00:04:10,460
folder expanded.

69
00:04:10,460 --> 00:04:14,840
Expand the views folder if you need to,
and add the shared folder to the project.

70
00:04:16,490 --> 00:04:19,770
If you're using GitHub,
let's commit our changes.

71
00:04:19,770 --> 00:04:26,680
Enter a commitmessage of added design
files and click the commit all button.

72
00:04:28,620 --> 00:04:32,990
If Visual Studio asks you to save
the comicbookgallery.sln file,

73
00:04:32,990 --> 00:04:35,490
go ahead and say yes.

74
00:04:35,490 --> 00:04:41,300
In the next video, let's take a closer
look at the _Layout.cs HTML file.