Design your first Windows Store app (HTML)
This tutorial will help you get started with the most basic HTML design tasks in Blend for Visual Studio 2012. When you complete this tutorial, you will have created a lightweight, dynamic version of the memory game commonly referred to as "Concentration."
To work through the tutorial, download the HTML Memory game sample project from the Windows Store app samples gallery. This project is the starting point for following this tutorial, and includes all of the files, including all of the images, necessary to create the app.
After you download the HTML Memory game sample project, extract the files to a location on your computer, for example, \My Documents\Visual Studio 2012\Projects\. After you extract the files, you are ready to open the project.
To open an existing project
On the File menu, click Open Project/Solution.
In the Open Project dialog box, browse to where you extracted the project files and locate the solution file (memory.sln) in your project folder, or in one of the project subfolders. Click OK.
You can also open a project by right-clicking the project file (.jsproj) in File Explorer, pointing to Open with, and then selecting Blend.
The project folder
If you look in the Projects panel, you can see the default files and folders that are automatically generated when you create a new project.
If the Projects panel isn’t visible, on the Window menu, click Projects.
css Contains any custom CSS files used by your app.
images Contains image assets for your app.
default.html The default starting page of your app.
package.appxmanifest Lists your app and its assets. This file also defines the starting page of your app.
The source files
In the Projects panel, in addition to the default files and folders, you will also see the source files for the project. These files include the following:
The images The photos folder includes the source images for the game.
The semantic structure defined in HTML The HTML file provides the document object model (DOM) as well as some ID and class names. By default, default.html opens in Split view. You can view the code for default.html by clicking either Code or Split view.
If default.html isn't visible on the design surface, double-click default.html in the Projects folder.
In addition to the source files, the developer also handed off Developer notes (HTML), with some details about the code and suggestions about how to style elements of the game.
It's a good idea to save your project from time to time as you progress. To save the current document, on the File menu, click Save, or press Ctrl+S.
If multiple files have changed, you can save all of the changes by clicking Save All on the File menu, or pressing Shift+Ctrl+S.
An asterisk on the document tab indicates that a file has changed. If multiple files have changed, an asterisk will appear on each of the tabs.
The next step: Style the app.