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.5 (3 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.
28 students enrolled
50% off
Take This Course
  • Lectures 30
  • Length 2.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2015 English

Course Description

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.

What are the requirements?

  • 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.

What am I going to get from this course?

  • 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.

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction to the project

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.


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


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


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

Introduction Quiz
5 questions
Section 2: Adding CSS Style to the Project

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


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.


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


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.

Section 3: Setup Navigation

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


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


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

Section 4: Build Budget App - Structure

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


In this lecture we will step through the process of building the first slider which is 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.

Section 5: JavaScript Coding for the Budget

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.


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.


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


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


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


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.

JavaScript Quiz
5 questions
Section 6: Add an Interactive Map

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


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.

Adding a map
4 questions
Section 7: Making a Form

This lecture goes through the process of creating a basic HTML structure for a standard web 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.

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.


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

Structure and CSS Quiz
5 questions
Section 8: What's Next
Completed Code
1 page

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Krista Hildner, 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.

Instructor Biography

Phil Cowcill, 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.

Ready to start learning?
Take This Course