Building Mobile Web Sites Using Web Forms, Bootstrap, and HTML5

This course is specifically designed for the Web Forms developer who wants to learn to build modern, responsive, web applications. You can use Bootstrap, HTML5, CSS3, and jQuery within Web Forms.
Course info
Rating
(167)
Level
Intermediate
Updated
Aug 29, 2014
Duration
4h 25m
Table of contents
Course Introduction
Modern Web Apps Using Web Forms and Visual Studio
Creating Horizontal Navigation for Your Application
Creating Sidebar Navigation for Your Application
Creating Forms Over Data Pages
Standard Business Forms
Description
Course info
Rating
(167)
Level
Intermediate
Updated
Aug 29, 2014
Duration
4h 25m
Description

Most of us build typical business web sites using ASP.NET Web Forms. We are now being asked to build these as mobile-aware web sites. Using Bootstrap is a great place to start and Web Forms can do all of this - without having to learn MVC. This course will teach you how to build business applications using Web Forms, Bootstrap, HMTL5 and CSS3. You will be shown how to create standard business pages such as a Member Log In, Forgot Password, Member Sign Up, About, Contact Us, Address, Member Profile, Credit Card, and many others. You will also learn how to create navigation for your business application.

About the author
About the author

Paul loves teaching and technology, and has been teaching tech and business topics for over 30 years. Paul helps clients develop applications, and instructs them on the best use of technology.

More from the author
Angular Security Using JSON Web Tokens
Intermediate
2h 50m
2 Apr 2018
More courses by Paul Sheriff
Section Introduction Transcripts
Section Introduction Transcripts

Creating Sidebar Navigation for Your Application
Hello everybody, Paul Sheriff here with Pluralsight. This module is Creating Sidebar Navigation for Your Application. Now there's a lot of reasons why you're going to want to watch this particular video. We're going to be talking about how to build side navigation which means a side. On the side, left side or right side. But the problem is these are not built into Bootstrap. So that means we have to do our own custom styling. We're going to talk about how to use an accordion to make drop downs on the side. We'll create a side bar island. And will even make the sidebar disappear when we're on small devices. And then display icons instead of text, also on small devices. Finally we'll bring top and side navigation together into a master page. So with that, let's get started. So first off, were going to start out by creating CSS that looks like the screen shot. So were going to have a side bar navigation going down the side, as you see here in the black. And again the idea is keep the html clean, and use CSS to style everything. So the first style we're going to do is the sidebar wrapper. Sidebar wrapper is the entire black outline area there on the left. We then have the sidebar nav style we're going to create to style the unordered list. And the individual list items that make up that particular menu system. And we're going to add a sidebar brand. So we tried to keep it similar to the way Bootstrap does their horizontal navigation as well. All right, let's dig in and take a look at simple sidebar navigation.

Creating Forms Over Data Pages
Hello, everybody. Paul Sheriff here with Pluralsight. This module is Creating Forms Over Data Pages. So there's a lot of reasons why you're going to want to watch this particular video. We're going to be talking about layouts for the GridView control. How to use the GridView and make it responsive, so that it runs on smaller devices. We're going to take a look at using the GridView and the DetailView controls together. Then I'm going to show you an alternative layout still using the GridView, but it doesn't use a tabular format. I'm going to show you how to build input forms for adding and editing data. We're going to talk about using the Repeater control, as well. And then finally, I'll show you how to do a dual purpose form so that you can detect the device size and then change the layout based on that device. So with that, let's get started.

Standard Business Forms
Hello, everybody. Paul Sheriff here with Pluralsight. This module is Standard Business Forms. Now there's a lot of reasons why you're going to want to watch this particular video. We're going to see how to create several standard business forms. This will include things like login screens, forgot password, registration, member profile, about, contact us, credit card and address. In a lot of cases we'll see several examples of each. So we're going to talk about using standard web form controls within each of these standard business forms, we're going to see how to use the ASP. NET validator controls. We'll take advantage of the bootstrap glyph icons. We're going to employ jQuery UI library for accordions and tabs, use modal dialogues and talk about media query usage. So with that, let's get started.