Website Development with HTML5 and CSS3

DKV Logo


Preference Timing Location
27 – 31 December 2015 Weekly 9:00AM – 5:00PM Dubai Knowledge Village



5 Days

Participation Fees

$1,500 USD per participant

Course Description

Learn to build functional sites with HTML5 and CSS3.
This course offers an overall picture to what’s new and improved in the world of HTML and CSS.HTML5 offers new flexibility, ease-of-coding, and other powerful new features. Meanwhile, CSS3 offers us more sophisticated properties and elegant solutions for styling and animating elements.
This course will show you a sampling of new techniques that you can use today, in almost all of the major browsers.
As quickly as the web is changing, the tools used to design websites are as well. You will be introduced to a compiled list of the best tools for HTML pages with a guide to mostly free resources, to help you generate complex CSS – fast.

Download Detailed Course Description


  • Readers just stepping into the world of web page layout and design in a serious way. You have been exposed to HTML and CSS and now want to jump in with both feet and learn the basics of web page design with the latest versions of HTML and CSS.
  • Experienced web designers who have explored pieces of the HTML5 and CSS3 puzzle and have applied some HTML5 and CSS3 tools but want to deploy a full understanding of HTML5 and CSS3.


  • No prerequisites. Just dive in and start playing with it.

Recommended next course

Course Objectives

  • Understanding HTML/CSS Foundations
  • Checking what’s new in HTML5 and CSS3
  • Creating web pages with HTML5
  • Working with the new HTML5 tags for forms, audios and videos
  • Applying various styling effects and transforms to web pages using CSS3
  • Introducing the various online tools available for HTML5 and CSS3

Course Outline

Unit 1 – Structure and Design with HTML5 and CSS3

  • Realizing the power of HTML5 and CSS3
  • Understanding HTML foundations
  • Breaking down basic CSS
  • Moving forward with HTML5 and CSS3

Unit 2 – Deploying HTML5

  • Identifying the advantages and disadvantages of using HTML5
  • Understanding HTML5’s new standardized structured elements
  • Taking a quick look at HTML5’s new form tools
  • HTML5 elements for scripting with JavaScript

Unit 3 – CSS3 for Design, Interactivity and Animation

  • Breaking out of the box with CSS3 design
  • Replacing images with CSS3
  • CSS3 and mobile – A perfect fit
  • Animating with CSS3
  • Designing with web fonts

Unit 4 – Compatibility Issues and Solutions

  • Making HTML5 and CSS3 work in older browsers
  • HTML5 and CSS3 browser wars
  • Mobile compatibility
  • A Word on Flash

Unit 5 – HTML5 Semantic Tags

  • Understanding the different kinds of semantic elements
  • Organizing content with five elements
  • HTML5 for specific content
  • Advantages of HTML5 semantic tags

Unit 6 – HTML5 Forms

  • HTML5 forms
  • Creating HTML5 forms
  • Defining placeholder text
  • Implementing HTML5 input types
  • Defining a datalist
  • Creating form output elements
  • HTML5 form validation
  • A final word on HTML5 forms

Unit 7 – Native Video and Audio

  • Getting familiar with native audio and video
  • Compressing video formats
  • Optimizing native videos
  • Embedding native audios

Unit 8 – Going Mobile: Responsive Design and jQuery Mobile

  • Understanding the nature and role of responsive design
  • Implementing responsive design with media queries
  • Defining media queries with multiple CSS files
  • Deploying responsive designs in a single CSS file
  • Building web apps with jQuery mobile

Unit 9 – Styling with CSS3 Properties

  • The evolution of CSS
  • CSS3 transitions
  • Redefining color with CSS3

Unit 10 – Applying CSS3 Effects

  • Getting the most from CSS3 effects
  • Defining CSS3 effects
  • Animating effects

Unit 11 – Applying and Animating CSS3 Transforms

  • Knowing how to use transforms
  • Animating transforms with transitions
  • Animating with keyframes

Unit 12 – Styling Gradients with CSS3

  • The evolutionary path to CSS3 gradients
  • Competing CSS3 gradient syntax
  • Defining gradients with free online generators
  • Using ultimate CSS gradient generator

Unit 13 – Top Ten HTML5 Design Resources

  • Notepad ++
  • TextWrangler
  • Komodo edit
  • Adobe Dreamweaver
  • W3Schools
  • jQuery widget factory

Unit 14 – Top Ten CSS3 Design Tools

  • Ultimate CSS gradient generator
  • Adobe kuler
  • Color scheme designer
  • Animate CSS

Unit 15 – Top Ten Form Data Resources

  • MailChimp
  • FreeFind
  • Google docs
  • jQuery menu widget

Share Button
Skip to toolbar