Memory Game Tutorial: Create a Game in Blend using JavaScript, HTML5, and CSS

At the //build/ conference, Christian Schormann presented A deep dive into Expression Blend for designing Metro style Apps with HTML that showed step-by-step how you can use Blend to create a UI from scratch in less than an hour. The game he created is the basis for the nine-part end-to-end tutorial just we’ve just published. When you’re ready to try your hand at creating the UI for yourself, check out our step-by-step instructions. You’ll get to practice layout and styling for Windows 8 Metro style apps.     When you’re ready to get started, all you need to do is:

• Install the Windows Developer Preview with developer tools
• Go to the first part of the Memory Game tutorial and get started

For the fullest experience, you can also

• Download the Memory Game Demo Files sample code, and open it in Blend
• Watch Christian Schormann’s awesome presentation A deep dive into Expression Blend for designing Metro style Apps with HTML video

Memory Game Tutorial Series:

Blend Tutorial Part 1: Design Your First Metro Style App with JavaScript, HTML5, CSS Blend Tutorial Part 2: Create the Project—Memory Game Blend Tutorial Part 3: Add a Style Sheet—Memory Game Blend Tutorial Part 4: Create a Flexible Layout—Memory Game Blend Tutorial Part 5: Align Content to The Grid—Memory Game Blend Tutorial Part 6: Style the Game Board—Memory Game Blend Tutorial Part 7: Style the Cards—Memory Game Blend Tutorial Part 8: Add CSS Transitions—Memory Game Blend Tutorial Part 9: Build and Run Your App—Memory Game

Let us know if you have feedback, you can always reach us at blendfeedback@microsoft.com or comment below. Enjoy building and designing Metro style apps with Blend! ~Lori