Build a HTML5 Business Web Application
4.6 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
33 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build a HTML5 Business Web Application to your Wishlist.

Add to Wishlist

Build a HTML5 Business Web Application

Create a number of unique features that can be applied to a number of web applications for business.
4.6 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
33 students enrolled
Last updated 6/2015
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Develop a business web application
  • Write Javascript functions working with DOM and CSS
  • Create fully functioning tabbed navigation
  • Customize sliders and calculate values
  • This course steps you through the entire process from start to finish
  • No steps are left out. You will have the whole website built in less than 3 hours!
  • Each short video builds on the previous until you have the finished product!
  • See how the HTML, CSS and Javascript works together
  • Students will benefit from not only learning web development, but also will have a website to customize for your own use, or to add it to your portfolio.
View Curriculum
  • We will be using Dreamweaver as our development tool but it's not required. You can use any development tool of your choice or even Notepad.

This course is geared for people who want to learn a little more about building web applications that have a business slant to them. Although there is some coding involved to get the budget sliders to work, you don't need a programming or a business background to create these projects. The content is explained in a very simple way.

It will take about three hours to complete this course. There is no material that you need to download as you will create everything you need from scratch! You will access two online resources.

This course starts out by first looking at the completed project. We then take a planned and methodical process to build one small step at a time. The lessons typically are short and you'll see yourself building momentum as you quickly progress through these lessons.

This course is geared for people who would want to start to add interactivity to their sites. Rather than having just pictures, text and links, you can now start to build an interface that engages visitors.

So if you're interested in learning how to create some neat interactions that has a bit of a business approach to it, this is the course for you.

At the end, you will have a fully functioning HTML5 website that you can populate with your own content.

Who is the target audience?
  • This course is meant for people at all levels to build a business web application from scratch
  • No prior knowledge required
  • Students looking for a refresher of HTML, CSS and JS
  • Perfect addition to your web development portfolio
Students Who Viewed This Course Also Viewed
Curriculum For This Course
30 Lectures
Introduction to the project
5 Lectures 19:27

This is an overview of the course. You will be shown steps on how to build a web application as opposed to an entire website.


Before starting, professional developers define their. While this tutorial uses Dreamweaver, you can use your own editor to define the site. If you're editor doesn't work with sites, then you can just watch this lecture to get a sense of how to do it.

Preview 03:12

This lecture will show you the code used to make the HTML structure. There's no content, just the structure.

Create HTML Structure

The navigation is a little different than most websites. The code here will setup the navigation so they will eventually look like tabs.

Preview 05:08

This lecture will step you through the process of adding some randomly generated text for the first tab.

Adding Content

Introduction Quiz
5 questions
Adding CSS Style to the Project
4 Lectures 24:20

Starting with this lecture, we start creating rules to make the site look more professional.

Preview 04:14

Here you are going to write the rules to configure what the main tag will look like. This will shape the look of the main content areas of the web app.

Add a Rule for the main tag

This lecture is where you change the navigation links into tabs.

Add Rules for the Navigation

In this lecture you'll learn how to show and hide the appropriate div tags. It's a combination of CSS and JavaScript to get this to work. This lecture will deal with just the CSS.

Preview 02:40
Setup Navigation
3 Lectures 18:53

In this lesson you'll start adding the JavaScript to get the navigation to show and hide the appropriate DIV tags.

JavaScript and Navigation

This lecture will show you how to change the colour of the tabs as you click on them.

Highlight Tabs

This lesson will add the JavaScript code that shows and hides the DIV tags.

Show Hide Content
Build Budget App - Structure
3 Lectures 18:14

This first lecture on the budget shows what the finished product looks like.

Introduction to the Budget App

In this lecture we will step through the process of building the first slider which is the food slider.

Making the Food Slider

Once the first slider is made, we can follow the structure used for the first slider to make the rest of the sliders.

Make Remaining Sliders
JavaScript Coding for the Budget
6 Lectures 33:29

Rather than storing all the JavaScript code within the HTML file, you can write the code in an external JS file and link the HTML file to it. This makes it easier to reuse the code with other HTML files.

Preview 07:49

In order to get the values from the different sliders, you need to have some variables point to the sliders. You can't link variables to the slider until after they have been loaded. This lecture shows you how this is done.

Loading Slider Initializer Function

This lecture will step you through the process of changing the value of the text based on the value of the food slider.

Output for Food Slider

Once the food slider provides an update, we will follow the coding sample to make the other sliders work the same way.

The Rest of the Sliders

This lecture will step you through the process of getting values from the slider.

Get Values

Now that all the sliders are displaying the values, it's time to add the values together to get a grand total. This lecture will step you through this process.

Display Grand Total

JavaScript Quiz
5 questions
Add an Interactive Map
2 Lectures 06:01

This lecture will step you through the process of embedding a live map in from the web service Google Maps.

Embed Map

Once the map is in your app, you can alter the parameters to change the look of the app. This lecture will show you how to make some simple changes.

Preview 02:57

Adding a map
4 questions
Making a Form
5 Lectures 20:04

This lecture goes through the process of creating a basic HTML structure for a standard web form.

Create the Form

It's important to use the email input when asking for people's email. It doesn't change the look of the text input but it will change the virtual keyboard for the mobile user.

Email Input

Date and Time

This lecture coming up, we will step through some of the properties of the textarea input. We will also learn how to make some cosmetic changes.

Comment Input

In this lecture you will learn how to insert both a submit and a reset button.

Submit and Reset

Structure and CSS Quiz
5 questions
What's Next
2 Lectures 00:09
Completed Code

Here is an idea of what you can do as a next step.

Preview 1 page
About the Instructor
Krista Hildner
4.7 Average rating
10 Reviews
84 Students
3 Courses
Designer & Developer at Development Made Simple, Teacher

Krista is a professional developer, professor and conference speaker. She travels throughout North America speaking on topics related to development, design and delivers workshops specializing in explaining complex concepts in a straightforward and simple way to people with a variety of backgrounds.

Her background is in Advertising and Communications with a focus toward digital and electronic communications and development of web and native applications for iOS and Android devices. She was hired to teach technology related courses at the post secondary and post graduate level in 2013, and has been strengthening her skills and building up lessons and techniques for teaching that she's anxious to share.

Krista's has a Diploma in Advertising, a Degree in Communications and a Post-Grad Certificate in Mobile Application Development.

Phil Cowcill
4.7 Average rating
10 Reviews
84 Students
3 Courses
Professor & Developer

Phil Cowcill has been working with educational technology since 1983. He started developing websites in 1994. In 1995, he started teaching full-time multimedia and web development at the post-graduate level. In 2011, Mr. Cowcill designed and delivered Canada's first Mobile Application Development program for a college. This program was also at the post graduate level.

He's very passionate about helping people learn. Most of his students over the years come with out having a programming background. He has found a way to explain difficult concepts to non technical people. This has provided people without a programming background to now successfully build web sites, interactive learning, games and native mobile applications for both Android and iOS.

Now that Mr. Cowcill has retired from full-time teaching, he's looking to share his experience and knowledge with a much larger "class". Mr. Cowcill is first and foremost an educator and is here to help upgrade your skill by helping you learn.