Share via

Design your first Windows Store app (HTML)

  • Article

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."

Memory game project

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

  1. On the File menu, click Open Project/Solution.

  2. 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.

    Tip

    You can also open a project by right-clicking the project file (.jsproj) in File Explorer, pointing to Open with, and then selecting Blend.

JJ129451.collapse_all(en-us,VS.110).gifThe 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.

Tip

If the Projects panel isn’t visible, on the Window menu, click Projects.

  • References   Contains the read-only CSS and Windows Libraries for JavaScript.

  • css   Contains any custom CSS files used by your app.

  • images   Contains image assets for your app.

  • js   Contains your customized JavaScript files.

  • 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.

Open Memory Project

JJ129451.collapse_all(en-us,VS.110).gifThe 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 The Code view icon or Split Split-View button view.

    Note

    If default.html isn't visible on the design surface, double-click default.html in the Projects folder.

  • The game logic in JavaScript   The JavaScript provides the game functions. The script also dynamically creates some IDs and classes. To view the JavaScript for the game, in the Projects folder, expand the js folder and then double-click default.js to open the file.

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.

Tip

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.