For this tutorial I will be using Visual Studio 2010 Ultimate Beta 2 (which is currently available for free), but you can follow along just fine using Visual Studio 2008 Professional or Visual Web Developer 2008 Express (the free software detailed in my “Getting Ready Tutorial“).

For simplicity sake, whenever I refer to VWD (Visual Web Developer) or Visual Studio, I mean any all versions. If I’m talking about a specific version, I’ll refer to it by it’s full name or acronym (VS2010 means Visual Studio 2010). Regardless of whether you’re using a full copy of Visual Studio or the free Visual Web Developer Express, the layout is the same and, for our purposes, the functionality is identical (Visual Studio has some extra tools which, while nice, we won’t be covering for a very long time – so Visual Web Developer Express will do just fine). Just to set your mind at ease, here is what the three different pieces of software look like side-by-side.

Visual Web Developer 2008 Screenshot

Visual Studio 2008 Professional Screenshot

Visual Studio 2010 Ultimate Screenshot

As you can see, Visual Studio 2008 Professional and Visual Web Developer 2008 Express are almost indistinguishable. When Visual Web Developer 2010 Express is released, it should look almost exactly like the Visual Studio 2010 Ultimate screenshot above.

Personally, I recommend that use the free Visual Studio 2010 Ultimate Beta (if available) and switch to Visual Web Developer 2010 Express once it’s released (if you want to stick to free tools, that is). This way, you are learning on the most recent, up-to-date tools currently available.

Before we can really start talking about VWD’s interface, you should start up the program and follow along. This section will help you start a new project and change one little configuration setting that will make life easier later on.

The Start Page

The first thing you’ll see when you start of VWD is the Start Page (click here to see VWD 2008’s Start Page). Generally, this page includes .NET-oriented RSS updates and shortcuts to previous projects or other actions (such as the ability to create a new web site project).

Visual Studio 2010 Ultimate - Start Page

Now before we can continue on our tour, we need to create a test project so I can show you around. Don’t worry, this is almost sinfully easy.

Creating a New Website

To create a new website, go to your File menu, and select New Web Site….

Note: If you are running Visual Studio (instead of Visual Web Developer Express), be careful NOT to select New Project as it creates a new Windows Application project instead of a Web project.

You should then see a window like the one below. This screen lets you set some information about your new project – like the type of project, the programming language to use, and where the project should be saved.

On this screen, you want to make sure that you have “ASP.NET Web Site” selected, as well as “Visual C#” for the language. VWD allows you to create your websites in either Visual Basic or Visual C# – this site will only cover C#. The nice thing about C# is how similar it is to other major programing languages – like PHP, JavaScript, or Java. If you learn one, the others are that much easier to pick up. Before you continue, you should also rename your project folder under “Location” at the bottom. By default, it will be called WebSite1 – you can either leave the generic name or rename it to something more meaningful like TestSite (note on project location). When you’re happy with your project settings, click OK.

VWD will automatically put together a very basic website for you. If you’re using VS2010, it will look like this (or click here to see it in Visual Web Developer 2008 Express):

Visual Studio 2010 Ultimate - An Open Project

Configuring VWD

Before we go any further, there’s one little tweak I’d like you to make to your copy of VWD. By default, VWD does not show line numbers for all file types – we want to force it to display line numbers no matter what we’re looking at – whether it be HTML, JavaScript, or whatever.

On the top menu toolbar, select Tools, and then Options…. The options window will have only a couple scant options by default. To see everything, simply check the “Show all settings” checkbox. Your options should now look like this (sans arrow)…

Visual Studio 2010 Ultimate - Options

In the options list on the left side of the window, open the Text Editor category, and then click on All Languages. On the right side of the Window, under the Display section, click on Line Numbers so that it looks like a check (NOT a solid box). Click OK and you’re done with changing settings.

Visual Studio 2010 Ultimate - Options - Display Line Numbers

The following image splits Visual Studio into four distinct, color-coded sections. As I explain each section below, I’ll refer to it by color to make it easier for you to follow along.

Visual Studio 2010 Ultimate - Sections

Green Section (The Editor Window)

The big green section where code is displayed is called the Editor Window. This window can be divided into 3 parts – the tab bar at the top, the text editor in the middle, and your view options on the bottom.

The tab bar at the top of this section is used to quickly switch between all the different files you have open. If you have too many files open to fit in the bar, you can simply click the tiny down-arrow on the rightmost part of this tab to see a list of all open documents.

Visual Studio 2010 - Editor Window - Tabs

Beneath that is the text editor, where you will write or edit any all code (aspx, html, xml, etc). VWD helpfully colors your code based on what kind of code it is, making it much easier to quickly find things. As you can see, the leftmost portion of the text editor includes line numbers (remember that setting we changed a minute ago?) to make it even easier to find code, especially when there’s a problem.

At the bottom of this section is two things your view controls (available on webpages only) and a handy code navigator.

Visual Studio 2010 Ultimate - Views

The view options appear only for web pages, such as aspx and html files. You have three view options – Design, Split, and Source.

• Source is the default view and shows you only the code (html, etc).
• Design attempts to render the webpage so you can get an idea of what it will look like (this is a very rough preview and does not replace viewing the page in an actual browser).
• Split splits the window in two so that you can see both the Source view and the Design view at the same time.

Visual Studio 2010 Ultimate - Code Navigator

The code navigator is just to the right of the view options. This is similar to the file path in your Windows operating system and changes based on what you have selected in the text editor. For instance, the above screenshot shows that the cursor is currently within an <a> tag, which is within a <p> tag, which is currently within the <asp:Content> tag (which also has an id of BodyContent). You can click on any of these to see a popup list of all the elements within it. This can sometimes be very helpful for finding specific items on large pages without having to scroll all through the Text Editor.

The Blue Section (Explorer & Properties Panels)

The blue section on the right can be divided into 2-3 parts. The upper half usually includes two tabs – the Solution Explorer and the Server Explorer (the Server Explorer is called the Database Explorer in Visual Web Developer Express). The bottom half is the Properties window.

Visual Studio 2010 Ultimate - Solution Explorer

The Solution Explorer is a lot like Windows Explorer – it simply shows all the files in your current project. Using the Solution Explorer you can:

• Create new folder or files (web pages, xml files, database files, etc)
• Open files currently in your project
• Reorganize files in your project
• Delete files
• etc

Visual Studio 2010 Ultimate - Server/Database Explorer

The Server Explorer/Database Explorer can be used to view, manage, edit, and administer databases. This is handy since it means you don’t need to run any other software in order to work with your databases – you can do pretty much everything right from inside VWD.

The Properties panel is a context-sensitive way to interact with any item in Visual Studio that you currently have selected. For instance, you could click within the page properties element at the top of an aspx page and the Properties window would show you all the options available for that element. You can even edit the properties right there in the Properties panel. It is not limited to just code, though – you can Select on Databases in the Database Explorer or files in the Solution Explorer to see/edit their Properties… or even the website project itself by clicking on the uppermost item in the Solution Explorer (the one that looks like a Windows file path).

The Red Section (Toolbox)

The red section contains three tabs, all of which start collapsed (to save on screen space). These are the Toolbox, CSS Properties, and Manage Styles. Of these, the only panel we’ll look at in-depth during this tutorial is the Toolbox.

The Toolbox panel (simply click on the Toolbox tab to open it) contains categorized listings of ASP.NET’s most common web controls and is used almost exclusive with ASPX files. To open the toolbox panel, simple locate the “Toolbox” tab on the left side of the screen and click on it.

Visual Studio 2010 Ultimate - Toolbox Tab

You can use any of them by either drag-and-dropping a control from the Toolbox into the Text Editor, OR by double-clicking on a control in the Toolbox to insert it straight into the Text Editor (wherever you clicked last). You may also notice that the Toolbox panel contains categories (such as “Standard”, “Data”, “Validation”, etc). These can be opened and closed by simply clicking on them, and contain various ASP.NET objects that you can use in your own web pages, organized by category.

Visual Studio 2010 Ultimate - Toolbox Panel

The other two panels – the CSS Properties panel and the Manage Styles panel are simply tools to help you handle your stylesheets – but are not critical to building any .NET web project. If you’re already familiar with CSS then you can just keep doing things the way you always have. I should note, however, that when you have a CSS file open in Visual Studio, another panel appears called CSS Outline. This is a very powerful tool for working in your CSS files as it sorts out your CSS for you structurally, allowing you to quickly jump between style blocks in the CSS file.

Yellow Section – Toolbar

The toolbar at the top of the screen contains top-level menu options (like “File”, “View”, “Window”, etc) with other context-sensitive options appearing in toolbars beneath that. Generally this works on the same principal as other Windows software you may be familiar with (such as Microsoft Word).

For instance, the Window menu allows you to choose which Visual Studio windows/panels you’d like to view (such as the Start Page or Solution Explorer – if either happen to get accidentally closed). Or, if you have an ASPX page currently open, you will see drop-down list that allows you to select the DocType you want to use for on-the-fly validation (those red, squiggly underlines that tell you when there’s a problem). The screenshot below shows the toolbar with a webpage open (which automatically makes the HTML Source Toolbar appear). In the screenshot below, on the bottom right of the toolbar you’ll see a selection box that says “XHTML 1.0 Transition[al]“… this is the drop-down box that lets you select your validation DocType.

Visual Studio 2010 Ultimate - Toolbar and Menus (with a webpage open)

Besides the context-sensitive toolbars, there are some options that are always available. This is called the “Standard Toolbar”… it contains shortcuts to common tasks like creating new projects (icon that looks like a little globe), adding items to a project (icon that looks like a white box with colored specs inside), open files, save files, etc. There are two items on the Standard Toolbar that I want you to notice – one looks like a little Green Arrow and the other is an empty white box (next to an icon of a folder and binoculars). The green arrow icon is going to become your best friend – it starts the debugging process on your project. Debugging allows you watch your code (or whatever pieces of your code that you specify) execute one piece at a time for the purpose of solving problems with the code. It’s is extremely powerful, neat stuff.

The white box to the right of the Debugging icon simply allows you to search the currently open document. Of course you could always click Ctrl+F to bring up the old-fashioned finder if you prefer – the decision is entirely yours.