In this tutorial we demonstrate how to build a single page application style theme for DNN.

Single Page Applications or SPA's have become very popular in modern web development, mostly due to the fact that the page doesn’t need to reload to access different information on the site. This drastically improves the user experience, the user can get to the information they want to see without waiting for a new page to finish loading.

In single page applications, the navigation is very important and it needs to work in a very different way to a standard website or DNN theme… When you click on a menu item, we need to automatically scroll the user’s viewport to the correct section of the page.

This video contains:

• Creating four independent page sections
• Correct IDs and CSS classes
• How to access Chrome's Developer Tools
• Inspecting the DOM
• How to set an element height to match the height of the viewport
• What are VH units
• Why the min-height property
• Using the Chrome color picker
• Adding demo content