Website Designing Course Description - Join Now

The Skill Pedia's Website Designing Course introduces HTML5, CSS3 and responsive web design to web designers and developers. Attendees learn the HTML, CSS and JQuery skills needed to create professional looking web pages that will render on any screen, laptop, phone, tablet or desktop. HTML5 and CSS3 is the next big thing in the world of web development. HTML5 has risen to the status of a core markup language due to a number of new attributes and elements that are apt for use in professional websites.

Website Designing Course Objectives

All students will learn how to:

  • Use HTML5 & CSS3 to design responsive websites that render well on all devices and browsers.
  • Work with images, including thumbnails, rollovers, and image maps
  • Create and format tables
  • Create and Validate Forms using HTML5
  • Add audio and video to your web pages
  • Use embedded fonts from third party website like google fonts
  • Format web pages for printing
  • Use advanced CSS3 features to enhance & beautify the web page.
  • Use JavaScript and jQuery to enhance web pages

Detailed Course Contents - Join Now

Introduction to WEB

  • W3C and W3C Members
  • Why WHATWG?
  • What is Web?

     

HTML Basics

  • Introduction
  • Parts in HTML Document
  • Attributes
  • Headings
  • Paragraphs
  • Formatting
  • Links
  • Head
  • CSS
  • Images
  • Tables
  • JavaScript
  • HTML XHTML
  • HTML4 Drawbacks

     

HTML5 Introduction

  • New Features and groups
  • Backward Compatibility
  • Why HTML5?
  • Common Terms in HTML5

     

HTML5 Syntax

  • The DOCTYPE:
  • Character Encoding:

     

HTML5 New Elements

 
  • New Semantic/Structural Elements
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

     

 

HTML5 Canvas

 

  • What is Canvas?
  • Create a Canvas
  • Canvas Coordinates, Paths, Text, Gradients and Images

     

 

HTML5 SVG

 

  • What is SVG?
  • SVG Advantages
  • Differences Between SVG and Canvas
  • Comparison of Canvas and SVG

     

 

HTML5 Drag/Drop

 

  • Introduction
  • Make an Element Dragable
  • What to Drag? Where to Drop?

     

 

HTML5 Geo location

 

  • Introduction
  • Locate the User’s Position+
  • Handling Errors and Rejections
  • The getCurrentPosition()
  • Geolocation object

     

 

HTML5 Video

 

  • Introduction
  • Video on the Web
  • How It Works?
  • Video Formats and Browser Support
  • HTML5 Video Tags

     

 

HTML5 Audio

 

  • Introduction
  • Audio on the Web
  • How It Works?
  • Audio Formats and Browser Support
  • HTML5 Audio Tags

     

 

HTML5 Input Types

 

  • Introduction
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

     

 

HTML5 Form Elements

 

  •  

     

 

HTML5 Form Attributes

 

  • New attributes for and New attributes for :
  • autocomplete
  • novalidate

     

 

New attributes for

 

  • autocomplete
  • autofocus
  • form, formaction
  • formenctype,formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list, min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required, step

     

 

HTML5 Semantic

 

 

HTML5 Web Storage

HTML5 App Cache

HTML5 Web Workers

HTML5 SSE

HTML Media

HTML Multimedia

HTML5 – MathML

CSS3

Borders

CSS3 Backgrounds

CSS3 Text Effects

CSS3 Fonts

CSS3  Transforms

CSS3 Transitions and Animations

CSS3 Multiple Columns

CSS3 User Interface

JavaScript

Join Now

  • Introduction
  • What are Semantic Elements?
  • non-semantic elements:
    and
  • semantic elements: , , and
  • New Semantic Elements in HTML5
  •  
  •  
  •  
  •  
  •  
  •  

  •  

    • What is HTML5 Web Storage?
    • Browser Support
    • The localStorage Object
    • The sessionStorage Object

       

    • What is Application Cache?
    • Cache Manifest Basics
    • HTML5 Cache Manifest

       

    • What is a Web Worker?
    • Check Web Worker Support
    • Create a Web Worker File
    • Terminate a Web Worker

       

    • One Way Messaging
    • Browser Support
    • The EventSource Object

       

    • New Media Elements
    •  
    •  
    •  
    •  

       

    • What is Multimedia?
    • Browser Support
    • Multimedia Formats
    • Video Formats
    • Sound Formats

       

    • Introduction
    • Using MathML Characters
    • Matrix Presentation
    • Math Formulas

       

    • Introduction
    • CSS3 Modules
    • Selectors
    • Box Model
    • Backgrounds and Borders
    • Text Effects
    • 2D/3D Transformations
    • Animations
    • Multiple Column Layout
    • User Interface

       

    • border-radius
    • box-shadow
    • border-image

       

    • background-size
    • background-origin

       

    • text-shadow
    • word-wrap

       

    • @font-face Rule
    • font-stretch
    • font-weight

       

    • How Does it Work?
    • Browser Support
    • 2D Transforms
    • translate(), rotate(), scale() and
    • skew()
    • matrix()

       

    • rotateX(), rotateY()

       

    • How does it work?
    • transition-property, duration and delay

       

    • CSS3 @keyframes Rule
    • Browser Support
    • Animation, animation-duration

       

    • column-count, column-gap and column-rule

       

    • resize
    • box-sizing
    • outline-offset
    • The Email List application in JavaScript
    • Introduction to jQuery
    • The Email List application in jQuery
    • How to use jQuery as a non-programmer