This course teaches you essential Web page development skills. You will learn to develop Web sites using Hypertext Markup Language version 5 (HTML5) and Cascading Style Sheets (CSS). You will learn to write code manually, as well as use graphical user interface (GUI) authoring tools. You will also learn to insert images, create hyperlinks, and add tables, forms, video, and audio to your Web pages.

Who is this course for?

Students and professionals who are interested in Web site development can benefit from :

  • IT professionals
  • Marketing professionals
  • Graphic artists
  • Web site designers

Assumed Knowledge

No prior experience using the Internet, developing Web pages or configuring networks is necessary. However, students should be familiar with an operating system such as Microsoft Windows 7 before taking this course.

What you will learn

In addition to learning about HTML5 and CSS coding, you will learn how to use HTML5 Application Programming Interfaces (APIs) to extend the functionality of Web pages, such as geolocation, drag-and-drop, canvas, and offline Web applications.

Throughout the course, you will learn how Web sites are developed as managed projects. You will also identify e-commerce solutions and relate Web site development to business goals.

Markup Language and Site Development Essentials HTML5 Coding

  • Creating Web Pages
  • Mobile and Cloud Issues
  • Text Editors and Markup Languages
  • Graphical User Interface (GUI) Editors
  • History of Markup Languages
  • The HTML Web Development
  • Trifecta: HTML5, CSS and JavaScript
  • Web Site Development Principles
  • Hosting and Web Service Providers
  • The Habitat for Humanity Web Site

HTML5 Coding

  • Introduction to Using HTML
  • Elements and Markup Tags
  • Document Structure Tag
  • Web Site File Structure
  • Preparing Your Development Environment
  • Paragraph Formatting and Block-Level Elements
  • Text-Level Elements
  • Lists
  • Good Coding Practice

Cascading Style Sheets (CSS) and Graphical Elements

  • Cascading Style Sheets (CSS)
  • Separating Content in HTML
  • Images in Web Pages
  • HTML Entities
  • Specifying Colours
  • Page Colours and Backgrounds
  • Specifying Font Information
  • Web Design Issues
  • HTML5 and Older Browsers

Hyperlinks

  • Introduction to Hyperlinks
  • The Anchor Element
  • Creating Local Hyperlinks
  • Creating External Hyperlinks
  • Using Images as Hyperlinks
  • Creating Internal Links
  • Managing Hyperlinks

HTML Tables

  • Introduction to HTML Tables
  • CSS Properties for All Table Elements
  • Table and Data Alignment Options
  • Height and Width of Table Elements
  • Column and Row Spanning
  • HTML Tables vs. CSS Page Structure

Web Forms

  • Introduction to Web Forms
  • Web Forms and CGI
  • HTML5 and Forms
  • Basic Tags for Creating Web Forms
  • Web Form Fields

Video, Audio and Image Techniques

  • Introduction to Web Video, Audio and Image Techniques
  • The <video> Element
  • The <audio> Element
  • Graphic Types
  • Image Maps
  • Image Transparency
  • Image Interlacing
  • Animation
  • Mobile Device Issues with Animation and Plug-Ins
  • Creating and Managing Images

Extending HTML

  • Extending HTML
  • Server-Side and Client-Side Languages
  • Server-Side Languages
  • Client-Side Languages
  • Dynamic HTML (DHTML)
  • Document Object Model (DOM)
  • HTML5 APIs
  • Canvas
  • Offline Web Application
  • Geolocation
  • Drag-and–Drop Functionality
  • Web Application Frameworks
  • Connecting to a Database

GUI HTML Editors and Mobile Web Sites

  • Introduction to GUI HTML Editors
  • Types of GUI Editors
  • GUI HTML Editor Functionality
  • Creating Web Pages with a GUI Editor
  • HTML Text Editors vs. GUI Editors
  • Previewing Pages and Validating Code
  • Web Site Publishing
  • Developing Web Pages for Mobile Devices
  • Mobile Apps vs. Mobile Web Sites
  • Converting a Web site for Mobile Users
  • Working with Web 2.0

Web Site Development for Business

  • Developing a Business Web Site
  • E-Commerce Considerations
  • Internet Marketing and Search
  • Engine Optimization (SEO)
  • E-Commerce Payment Technologies
  • Working in a Global Environment
  • Databases and Web Pages
  • Optimizing the Impact of the Web Page
  • Front-End Issues
  • File Formats and Active Content
  • Back-End Issues
  • Bandwidth and Download Time
  • Naming Web Page Files

HTML5 Essentials

  • Introduction to HTML5 and CSS3
  • Migration to Mobile Devices
  • The Web Development Trifecta
  • The Evolution of HTML5
  • HTML5 Structure Elements
  • Validating HTML5 Code
  • The <video> Element
  • The <audio> Element
  • HTML5 APIs

Using Cascading Style Sheets (CSS) Technology

  • Cascading Style Sheets (CSS)
  • Style Guides
  • CSS and HTML
  • CSS Terms and Syntax
  • Applying CSS Styles
  • Page Layout with CSS
  • CSS Positioning Schemes
  • The CSS Box Model

Introduction to CSS Version 3 (CSS3)

  • Introduction to CSS3
  • CSS3 Selectors and Properties
  • CSS3 Background Properties
  • CSS3 Border Properties
  • CSS3 Font Properties
  • CSS3 Text Effects

Using Advanced CSS3 Techniques

  • Introduction to Advanced CSS3 Techniques
  • CSS3 2D and 3D Transformations
  • CSS3 Transitions
  • CSS3 Animations
  • CSS3 User Interfaces
  • Creating Menus and Buttons with CSS3

Using HTML5 APIs

  • Introduction to HTML5 APIs
  • Document Object Model (DOM)
  • Common HTML5 APIs
  • The Canvas API
  • The Offline AppCache API
  • The Geolocation API
  • The Drag-and–Drop API
  • The File API
  • The History API
  • Retrieving Data with XMLHttpRequest
  • Manipulating Data with jQuery

Developing HTML5 Forms

  • Introduction to HTML5 Forms
  • Cross-Browser Compatible HTML5 Forms
  • HTML5 Form Input Types
  • New Form Elements in HTML5
  • HTML5 Global Attributes for Form Elements

Completing, Submitting and Validating User Input Forms

  • Improving Forms with HTML5
  • HTML5 Attributes for the <form> Element
  • HTML5 Attributes for the <input> Element
  • Submitting Forms with the <button> Element
  • Concepts and Techniques for Validating User Input
  • Validating User Input with HTML5 Attributes
  • Validating User Input with JavaScript

Top of Form

Designing for Mobile Devices

  • Introduction to Mobile Design
  • Mobile Web Sites vs. Mobile Apps
  • Designing Web Sites for Mobile Devices
  • Page Layout for Mobile Devices
  • Navigation and Hyperlinks for Mobile Devices
  • Images and Mobile Design
  • Validating and Testing Mobile Web Pages
  • Responsive Web Design