Andy is a freelance web designer. His new client wants a website designed for his guitar lessons courses.
Andy has discussed with his client what the site should look like. It will be a simple site with earthly tones, inspired by the wood in a guitar. The top part of the site will have a large image with text on top of it. The text will be the website name followed by a tagline.
The middle section will contain three columns that can featured different content. For example, the newest blog post summary, a product, or news.
The bottom part of the site will contain quotes from happy customers. The client wants to allow purchases of his courses from the site. He also wants an email signup form in the top right section.
We’re going to follow along with Andy as he builds a client website.
For a color scheme, we’re going to check out some popular schemes on Adobe Kuler. Head over to https://color.adobe.com and click Explore at the top then Most Popular. Looking for something with a good earth tone based scheme, HoneyPot looks like it will fit the bill.
If you move your mouse over this scheme, a hint will appear. Click edit. This lets you view the details of the color scheme. Click the brighter yellow. This is the color we’re use for our title font in the jumbotron.
While Visual Studio will provide a great application structure using MVC, Bootstrap is great for speeding up the design process. It is also fully responsive.
This first milestone site will look like this:
Let’s look at a few templates we’ll use in the website. Go to http://getbootstrap.com and click Getting Started at the top. Scroll down past “Basic template” until you reach Examples.
The Jumbotron looks like it will meet our requirements for the top part of the website.
It has a large grey area at the top that we can replace with our image. There is also text on top of the gray area. The three columns are there as well. Excellent!
Now we need to find something for the customer quotes. Looking at the template examples, it looks as though Carousel will do what we want.
You can see it in the thumbnail but if you click it, it will display the full template. Scroll toward the bottom of this template. There are several rows with larger text that would work great for quotes.
##Starting A New Project
Andy is going to take advantage of Visual Studio 2015. To aide with design, he is also going to use Bootstrap. Images will come from pixebay.com and fonts from Google Fonts.
You can downloaded Visual Studio 2015 here https://www.visualstudio.com/en-us/downloads/visual-studio-2015-downloads-vs#DownloadFamilies_1.
To begin, Andy starts a new project in Visual Studio and chooses ASP.NET Web Application as shown below.
Next, he chooses ASP.NET Preview Start Web:
If you run the project, it should display a webpage that looks similar to the following:
We’re going to modify the layout of this base site using parts from the Bootstrap templates described above.
Before we do, I’d like to point a few new features in Visual Studio 2015. Below is a screenshot of the application folder structure. Notice the wwwroot folder. This folder contains all of our static files. These include css, images, and js files.
The reasoning behind the wwwroot folder is to further separate dynamic code from static code. C# (dynamic) code files are still in the Controllers, Models, and Views folders, as you’d expect them to be. For any new css, images, or js files that we might add to the project.
Below I’ve expanded the wwwroot folder to provide a better look at its internal structure and what’s inside of it.
One other thing that has changed is how DLL and other references are now grouped. Rather than a large listing of references, we have a group, which can be expanded.
Notice below the ASP.NET 5.0 and ASP.NET CORE 5.0 are the only references listed.
If I expanded the ASP.NET 5.0 reference, I see a listing of Nuget packages and DLLs.
This is just a great way to not clog up the development environment with information you may not want to know until you need to.
##Development Of The Site
Our ASP.NET 5 Starter site includes Bootstrap. There is no need to download Bootstrap anymore. In previous versions of Visual Studio, we would need a Nuget package for Bootstrap or download it from the Bootstrap website and add it to our project.
To help manage client side frameworks, Visual Studio now includes Bower. If you look in the root of the project, you’ll see bower.json. In here, you’ll see references to Bootstrap with specific versions. Adding a new client side framework will retrieve that version and bring it into the project.
To get started, we want to do is download the code examples from the bootstrap website. Go to getbootstrap.com and click Download Bootstrap. Under Source Code, click Download source. Unzip this file and go to docs > examples > Jumbotron. Drag the jumbotron.css file into the wwwroot > css folder. You can also drag the index.html into the root of the project. It won’t display when the site starts, since this is an MVC site. But we’ll use it as a reference.
We’re going to start by modifying the main site layout. In the Solution Explorer, open Views > Shared > _Layout.cshtml. You’ll see the following CSS file references at the top of this file:
Remove the bootstrap-touch-carousel.css line. Create a new line under the bootstrap.css line. Drag the jumbotron.css file and place it on this new line. It should now look like the following:
Open the Home folder inside the Views folder then open the Index.cshtml file. Remove everything in this file except the top part:
ViewBag.Title = "Home Page";
Open the index.html Bootstrap file that we dragged in earlier. Collapse the nav, “div class=jumbotron” and “div class=container” nodes so they are easier to see, as shown below:
Copy the two divs and paste them into the Index.cshtml file. Now run the app. You should see the following webpage:
You’ll notice we have two footers. This can be fixed by removing the following code at the bottom of Index.cshtml:
In this same file, we can add some more meaningful headers to the three columns. Add the following headers in the H2 tags just under the three
Latest Blog Post
New York, New York Workshop
Beginner 1 Lessons
If you run the app, you should see the following:
##Updating The Jumbotron
We can now update our jumbotron with an image. The jumbotron is the large gray box at the top of the webpage.
We’ll use this image http://pixabay.com/en/musician-country-song-banjo-ukulele-349790/. Download the large version and place it wwwroot > images. Open wwwroot > css > site.css. Type in the following at the bottom of this file:
You can actually drag in the image and Visual Studio will create the necessary background-image code.
The color fffad5 is from our Adobe Kuler color scheme.
We can now update the Jumbotron text. Go back into Index.cshtml. Open the jumbotron node and replace:
This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
with the following
Rockstar Guitar Lessons!
Become an expert one step at a time.
Let’s run the app and see what we have so far. You webpage should look like the following:
As you can see, we’re getting close. The jumbotron should extend all the way to edges. This gives our overall design a little more depth. To accomplish this, in Index.cshtml, remove the “container body-content” div surrounding @Renderbody().
Now your could should look like the following:
Inside the jumbotron, we want a different front. Something more informal. We’re going to use a font called Dancing Script for this. Google Web Fonts is going to help us in getting the font.
Go to google.com and type in google fonts. Click the first link, which should be http://www.google.com/fonts. In the top left, type in dancing, which should bring up Dancing Script. Click Add To Collection then click Use. Uncheck Normal and check Bold. Copy the script link at the bottom.
In _Layout.cshtml, paste the script link under the title tag. It should look like the following:
Now we’re going to add a new class to site.css. This will allow us to target the font to specific text. Add the following to site.css:
font-family: 'Dancing Script', cursive;
In the jumbotron, add class=”scriptfont” to the H1 tag so it looks like the following:
Rockstar Guitar Lessons!
Run the app and check out the jumbotron title font. It should now be in script.
To provide a little polishing to this first phase of our design, we’re going to add a background and do a little adjusting to the footer, which is currently flush left.
We’ll use an image for the background and something to that matches our Earthy tones. Go to http://subtlepatterns.com and type in “seamless paper texture”. Download this texture and add it to wwwroot > images.
Open site.css. Add a new line within the first body tag. Then drag the paper texture into it. It should look like the following:
While we’re here, add the following at the bottom of this file:
If you run the app now, the background should be visible and the footer off the edge.