Updating Content

The content that we currently have on our website is boilerplate content 0:00 that was provided for us by the Visual Studio ASP.NET MVC project template. 0:03 The one exception is the list of links that we added to our links page. 0:08 In fact we were so focused on the mechanics of creating our project 0:13 that we didn't decide what the focus of our website should be. 0:17 We need to pick a topic. 0:21 When I'm working on a learning project, I like to make it fun and interesting for 0:23 myself. 0:26 I find that if I enjoy what I'm working on, I'm more likely to make time for it. 0:28 I love to ski, so I'm going to make my website a directory of Oregon ski resorts. 0:33 The basic structure of our website is flexible enough to be used for 0:38 a variety of purposes, so feel free to come up with your own idea. 0:42 Now that we have our website's topic, let's update our content. 0:47 We'll start by updating our layout page. 0:51 As we mentioned in an earlier video, the layout page is used to specify 0:54 the overall look and feel for every page on our website. 0:57 So everything in the layout page appears on every page of the website. 1:01 The file that we're looking for is located in the Views > Shared folder. 1:06 There it is. 1:11 It's the file named _layout.cshtml. 1:12 Go ahead and double click it to open it. 1:17 The text My ASP.NET Application appears twice in this file. 1:20 in the title tag here in the document head and 1:25 if we scroll down a bit, here again in the footer. 1:28 Let's change both instances to Oregon Ski Resorts. 1:33 So select that text and type Oregon Ski Resorts. 1:36 Select and copy that text by pressing Ctrl+C then 1:42 move our cursor to the title tag in the header. 1:46 Select the text to replace and press Ctrl+V. 1:49 Let's save by pressing Ctrl+S and then F5 to run our website. 1:54 In the browser we can see a bit of our new page title here in the tab. 2:00 If we hover our mouse pointer over the tab 2:04 Chrome will display a tool tab showing the entire page title scrolling down a bit 2:07 here in the footer we can see our updated copyright line so far so good. 2:11 Now let's turn our attention to the menu. 2:16 The text application name still needs to be updated. 2:19 Let's switch back to Visual Studio and see if we can find where the text lives. 2:23 Go ahead and keep the website running. 2:28 For now, we'll only be making changes to our views 2:30 which can be edited while the website is running. 2:33 Open the Find and Replace dialogue using the keyboard shortcut Ctrl+Shift+F. 2:36 In the find what field let's enter the search criteria application.name and make 2:41 sure the looking field is set to entire solution then click the find all button. 2:47 Success down here in the Find one results panel. 2:54 We can see that we got exactly one match in line. 2:57 Double-click the search result to open the file. 3:00 The text we were looking for is in the _Layout.cshtml file, 3:04 which is the file that we already had open. 3:10 It really is true. 3:13 Sometimes what you're looking for is already right in front of you. 3:14 Let's change the text application name to Oregon Ski resorts then save the file, 3:18 switch back to Chrome and reload the page by clicking the refresh button here in 3:26 the address bar or by using the keyboard shortcut Ctrl+R. 3:30 If the page doesn't refresh right away don't worry, the delay is just the MVC 3:36 framework processing the changes that we've made to our view. 3:40 Great, here's our new website name in the menu. 3:44 Great job getting your hands dirty and updating your website content. 3:49 I'm gonna leave updating the rest of the content on your website as an exercise for 3:53 you to complete on your own. 3:57 By repeating the process that we just covered 3:59 you'll be able to update all of the remaining pages. 4:01 If you get stuck be sure to stick with it. 4:05 The most meaningful learning that you can do won't be easy. 4:07 In fact, it should challenge you. 4:11 If you can't figure something out reach out to others on the tree house community 4:13 for help or check the teacher's notes for links to additional resources. 4:17 Also don't forget to have fun with it. 4:21 Before we wrap up this video I wanna show you something that I think is pretty cool, 4:25 our websites look and feel which includes everything from the layout and 4:29 color of the menu to the background color of our pages 4:32 comes from the Twitter bootstrap CSS framework. 4:36 As you've seen in this workshop Bootstrap makes it easy for 4:39 developers to create websites or applications that look great. 4:42 Another advantage of using a popular CSS framework like Bootstrap is that there 4:46 are a wide variety of compatible themes that you can download and use. 4:50 Switching to a new Bootstrap theme is an easy way to completely change the look and 4:55 feel of your website. 5:00 Let's see how this is done. 5:02 Bootswatch is one of the many websites that offers bootstrap themes. 5:05 All the themes that we see here are free. 5:09 Here's one that looks interesting, the darkly theme. 5:12 Let's update our website to use this theme. 5:15 Back in Visual Studio, let's show the Solution Explorer panel by clicking 5:19 the tab here on the right and then the pin in the right-hand corner to keep it open. 5:22 That's a little narrow for my taste, so let's grab this divider and 5:28 drag it to the left to make the panel bigger. 5:32 There are two CSS files that we need to update in our project. 5:36 The bootstrap.css and bootstrap.min.css files. 5:39 Both of these files can be found in the content folder, 5:44 here and here. 5:47 Switching back to my browser. 5:52 I can download the CSS for 5:54 these files by clicking the down arrow here on the download button. 5:55 Let's start by downloading the bootstrapped.css file 5:59 clicking on the link will download the CSS into a new tab. 6:03 From here I can press Ctrl+A to select all the text then Ctrl+C 6:07 to copy the text to the clipboard. 6:12 Then in Visual Studio I can double click the bootstrap.css file to open it. 6:15 Press Ctrl+A to select all of the text and 6:21 Ctrl+V to paste the text from the clipboard into the file. 6:24 Then press Ctrl+S to save the file. 6:27 Be sure to repeat this process for the bootstrapped.min.css file. 6:31 Now switch back to the browser and refresh the page. 6:35 And just like that here's our website with a new code of paint. 6:40