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

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.

Each LearnNowOnline training course is made up of Modules (typically an hour in length). Within each module there are Topics (typically 15-30 minutes each) and Subtopics (typically 2-5 minutes each). There is a Post Exam for each Module that must be passed with a score of 70% or higher to successfully and fully complete the course.

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.

Meet the expert

James Curtis

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.

Video Runtime

123 Minutes

Time to complete

470 Minutes

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)