Blend for HTML, which is a part of Blend for Visual Studio 11 Beta is optimized to help you build Metro style apps using as HTML, CSS, and JavaScript. If you have existing web assets, you can use those as the foundation for building your new Metro style apps.

A first look at Blend

The default workspace in Blend will be familiar to Blend users: the artboard, panels, workspace configurations, authoring views, and menus.

For new users, although the general layout of the workspace looks the same regardless of what kind of project you are working on, the specific panels that are available will change slightly depending on the type of project that you choose.

		Menus Create new projects and manage settings.
		Tools panel Create and modify objects in your application.
		Assets panel Displays all of the elements and media resources that are available to the project.
		Artboard The artboard is where you’ll be doing most of the visual layout tasks. You’ll notice that the application area is framed by a virtual tablet device that accurately represents the display of the device parameters that you specify in the Platform panel.
		Additional panels The specific panels that are available change depending on the type of project you are working on.

The Blend workspace for Metro style apps includes all of the visual interface elements of the default workspace. However, the tools that are available are specific to Metro style apps built using HTML.

		Document tabs Shows all the project documents that are currently open, including HTML, CSS, and JavaScript files.
		View controls Provides three options to control your app: Interactive mode Use interactive mode to trigger different states in your app, which you can then style. Error indicator Lets you know if there are errors in your app and displays the error list in the Results panel. Refresh Use Refresh to restore your app to its initial state before any state changes you made using interactive mode.
		Views Displays one of three real-time authoring environments: Design view Use Design view to author documents by using a visual representation on the artboard. Code view Use Code view to author HTML, CSS, and JavaScript. Split view Displays both Code and Design view. You can also change the orientation of the windows using the Split View Orientation item on the View menu.

For more information about the HTML workspace, see Blend workspace for Metro style apps built using HTML.

Design your first Metro style app built using HTML

You can begin designing your first Metro style app built using HTML by following this tutorial.

This tutorial creates a lightweight, dynamic version of the memory game commonly referred to as “Concentration.” In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed. This tutorial creates a lightweight, dynamic version of the memory game commonly referred to as “Concentration.” In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed.

To begin the tutorial, see Design your first Metro style app built using HTML.

We look forward to hearing about your experience working with Blend for Visual Studio Beta 11.