Learn your way! Get started

MVC 4.0, Part 11 of 11: UI Design and Mobile Development

with expert James Curtis


Watch trailer


Course at a glance

Included in these subscriptions:

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

Release date 8/6/2013
Level Intermediate
Runtime 2h 3m
Closed captioning Included
Transcript Included
eBooks / courseware Included
Hands-on labs Included
Sample code Included
Exams Included


Enterprise Solutions

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



Course description

The MVC 4 framework has a lot of tools that makes web development powerful. In this course you will learn how to use JavaScript, jQuery UI and Partial Views to enhance MVC 4 Web Applications. Then you will continue use JavaScript with jQuery Mobile to detect mobile browsers in a MVC 4 web application.

Prerequisites

This course assumes that you are familiar and experienced with Microsoft’s .NET Framework and ASP.NET development tools. You should be familiar with Web development and understand how HTTP and HTML work to produce Web pages for the user. You should have experience writing applications with ASP.NET 4.0 or later Web forms, and be familiar with how ASP.NET processes page requests, and have strong experience with .NET Framework 4.0 or later programming. You should have experience with Visual Studio 2012 for building Web application projects. Experience with building database applications using these tools will be helpful, although not strictly necessary.

Learning Paths

This course will help you prepare for the following certifications and exams:
MCSD: SharePoint Applications
MCSD: Web Applications
70-486: Developing ASP.NET MVC Web Applications

This course is part of the following LearnNowOnline SuccessPaths™:
Building MVC Web Applications

Meet the expert

James Curtis is a .NET Developer that primarily works in the UX space. He has worked on and for several large projects alongside Microsoft Consulting. James has spoken at several code camps about UX development for ASP.NET and SharePoint. He is an active participant in the development community tweeting and blogging about several topics in the UX area. James is an active consultant and is also assisting in several Start-ups contributing his UX experience.

Course outline



UI Design

UI Basics (14:13)
  • Introduction (00:19)
  • MVC 4 UI Basics (02:03)
  • Layouts (01:15)
  • Views (00:31)
  • Partial Views (00:40)
  • Demo: UI Basics (02:39)
  • Demo: Bundle Config (01:51)
  • Demo: New to MVC 4 (02:18)
  • Demo: Views (02:22)
  • Summary (00:11)
JavaScript Reloaded (16:22)
  • Introduction (00:20)
  • JavaScript Reloaded (02:23)
  • Modals, Tabs in MVC (01:25)
  • Demo: Partial Views with Tabs (03:59)
  • Demo: Tabs and JavaScript (04:06)
  • Demo: Modals (03:53)
  • Summary (00:14)
UI Layout (10:10)
  • Introduction (00:20)
  • Composing the UI Layout (01:48)
  • Responsive Framework? (02:54)
  • Layout Main Parts (03:40)
  • Layout Sections (01:11)
  • Summary (00:15)
Cascading Style Sheets (17:39)
  • Introduction (00:21)
  • Browser Detection (01:54)
  • CSS (02:43)
  • Mobile Phones and Tablets (02:48)
  • Enhance Testing in Visual Studio (01:14)
  • Demo: Detecting Browsers (05:08)
  • Demo: Emulators (03:11)
  • Summary (00:17)
Adaptive UI (08:48)
  • Introduction (00:19)
  • Adaptive User Interface (01:01)
  • Adaptive Layouts (01:09)
  • Responsive Framework Design (00:30)
  • Demo: Adaptive UI (03:02)
  • Demo: Using Foundation (02:28)
  • Summary (00:15)

Mobile Development

Mobile Development (11:46)
  • Introduction (00:23)
  • Mobile Development in MVC 4 (01:31)
  • Target Device (01:18)
  • What's Displayed (01:54)
  • Demo: Setting up for Mobile (03:00)
  • Demo: Mobile Simulators (03:27)
  • Summary (00:12)
HTML5 (15:03)
  • Introduction (00:25)
  • HTML 5 Viewport (04:19)
  • Demo: HTML 5 Viewport (03:25)
  • CSS Media Queries (01:03)
  • Targeting Screen Size (00:49)
  • Targeting Screen Orientation (00:50)
  • Demo: CSS Media Queries (03:54)
  • Summary (00:15)
Browser-Specific Views (15:32)
  • Introduction (00:19)
  • Browser-specific Views (01:54)
  • Display Modes (02:07)
  • Demo: iPhone View (05:00)
  • Demo: iPad View (03:56)
  • Demo: View Testing (02:00)
  • Summary (00:12)
What is Mobile (13:45)
  • Introduction (00:19)
  • The Mobile Template (01:55)
  • Demo: Mobile Template (04:24)
  • Demo: Mobile Page (03:39)
  • Demo: Mobile Page Index (03:14)
  • Summary (00:12)