Learn your way! Get started

Windows 8 Using HTML5 and JS, Part 5: Page Layout

with expert Peter Thorsteinson

Watch trailer

Windows 8 Using HTML5 and JS, Part 5: Page Layout Trailer

Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack
  • Power Pack Plus

Release date Release date 2/14/2014
Level Level Advanced
Runtime Runtime 1h 11m
Closed captioning Closed captioning Included
Transcript Transcript Included
eBooks / courseware eBooks / courseware N/A
Hands-on labs Hands-on labs N/A
Sample code Sample code Included
Exams Exams Included

Enterprise Solutions
Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

This course will start out reviewing traditional CSS3 Layout, including flexbox, regions, and multicolumn layout. Then we will discuss WinJS controls that support additional UI layout options, including the ListView, SemanticZoom, and ViewBox controls. We will see that the ListView displays items in grid or list layout, whereas the SemanticZoom supports zoom between two semantic levels, and the ViewBox allows for dynamically scaling single child element to fill available space without changing aspect ratio.


This course assumes that students have some programming background and experience using Visual Studio 2010/2012 and Java Script, HTML5 and CSS3. In addition, the course assumes some basic knowledge of XAML markup and basic knowledge of Windows Store applications and Windows 8.

Learning Paths

This course is part of the following LearnNowOnline SuccessPaths™:
Building Windows Store Applications

Meet the expert

Peter Thorsteinson Peter Thorsteinson has been working for two decades in many areas of Microsoft-based software development technologies, including all the latest languages, frameworks, and tools. He has been involved in several large scale software development projects and has authored and co-authored several books and courses relating to ASP.NET, AJAX, JavaScript, WPF, WCF, WF, ADO.NET, and LINQ. Peter is currently focusing on ASP.NET MVC, jQuery, Task Parallel Library, Windows Azure, and SharePoint Development.

Course outline

Page Layout

CSS Layout (16:50)
  • Introduction (00:35)
  • CSS Layout (03:23)
  • CSS Position Attribute (01:53)
  • CSS Display Attribute (01:19)
  • Flexbox Layout (02:19)
  • Flexbox Layout (cont) (01:11)
  • Demo: Flexbox (03:02)
  • Demo: Altering the Flexbox (02:47)
  • Summary (00:18)
Grid Layout (10:20)
  • Introduction (00:22)
  • Grid Layout (04:33)
  • Demo: Grid Layout (05:04)
  • Summary (00:19)
Multi-Column Layout (06:01)
  • Introduction (00:18)
  • Multi Column Layout (01:01)
  • Demo: Multi Column Layout (04:29)
  • Summary (00:12)
Regions Layout (05:22)
  • Introduction (00:17)
  • Regions Layout (01:01)
  • Demo: Regions Layout (03:46)
  • Summary (00:16)
WinJS Layout (11:15)
  • Introduction (00:14)
  • WinJS Layout (01:41)
  • ListView (03:15)
  • Demo: ListView (04:46)
  • Demo: ListView UI (00:59)
  • Summary (00:17)
Semantic Zoom (14:03)
  • Introduction (00:17)
  • Semantic Zoom (01:31)
  • Demo: Semantic Zoom (03:35)
  • Demo: Semantic Zoom HTML (05:24)
  • Demo: Semantic Zoom UI (03:06)
  • Summary (00:08)
View Box (07:21)
  • Introduction (00:14)
  • ViewBox (01:19)
  • Demo: ViewBox (02:03)
  • Demo: ViewBox UI (02:16)
  • ViewBox versus Flexbox (01:07)
  • Summary (00:19)