Web Design Professional

Course code: DLC004

Become an expert in web design with this professional bundle!

  • Progress from a raw beginner to a highly skilled web developer, capable of producing professional-quality, responsive websites and dynamic interactive applications.
  • Understand the construction of a high-quality web site using Hypertext Mark-up Language (HTML), Cascading Style Sheets (CSS), and basic JavaScript.
  • Build responsive websites which allow an optimal viewing and interaction experience using the very latest HTML5 and CSS technology.
  • Develop powerful JavaScript functions and event handlers.
This course is only available to study online.
Course Overview

Progress from a beginner’s level right the way through to developing professional responsive websites.

This bundle contains the following courses:

  • Webmaster – HTML and CSS
  • Webmaster – JavaScript
  • Webmaster – Responsive Web Design

You decide when and where you learn, at your own pace. Your experienced and friendly tutor is there to help you every step of the way by email, so help is only a click away!

Start your journey and develop your skills and knowledge today and join over 90,000 students that already have!

Course Duration

Up to two years.

Study Hours

Approximately 480 hours.

Course Outcome

You will receive a Webmaster Diploma as well as three accredited Open Awards certificates.

Entry Requirements

There are no specific entry requirements for this course.

Assessment

Coursework.

Course Content

Webmaster – Responsive Web Design

  • What’s new in HTML5?
  • Creating a HTML5 document
  • HTML5 document validation
  • Incorporating a CSS3 style sheet
  • What’s new in CSS3?
  • CSS3 document validation
  • What is responsive web design?
  • Responsive web design with CSS3
  • Proportional Layout
  • Scaling images
  • Converting from fixed to fluid design
  • Cross-browser considerations
  • Examples of responsive web design
  • Introduction
  • The header, footer and nav elements
  • The section
  • Article and aside elements
  • Other semantic elements
  • The role of DIV and SPAN elements
  • Dropped elements and attributes
  • Background to CSS3
  • Understanding cascading style sheets
  • Internal, inline and external style sheets
  • CSS3 rules and selectors
  • New CSS3 colour formats
  • Text effects and transformations
  • Multi-column layout
  • Recognising content boxes
  • Setting margins and padding
  • Sizing and positioning elements
  • Formatting borders
  • Specifying backgrounds
  • Text formatting
  • Using shadows and gradients
  • List style types and positioning
  • Defining shorthand lists
  • New HTML5 table elements
  • Assigning elements as table components
  • HTML5 form components
  • Acquiring text input
  • Email, telephone and URL inputs
  • Check boxes and radio buttons
  • Selecting options and uploading files
  • Standard buttons and image buttons
  • Date, time and range inputs
  • Add some style with CSS3
  • Understanding CSS3 transitions
  • CSS3 transformations
  • CSS3 animations
  • Enhancing your text
  • Using special cursors
  • Hiding and revealing elements
  • Resetting browser defaults
  • Organising your style sheets
  • Optimising style rules
  • Specifying default styles
  • The drag and drop API
  • The web storage API
  • Inter-document messaging
  • The history API
  • The geolocation and Google maps API
  • The canvas API
  • Incorporating audio and video

Webmaster – Javascript

  • Performing arithmetic
  • Comparison and local operations
  • Working with numbers
  • Working with strings
  • Introduction to events and event handlers
  • Browser window event handlers
  • Event listeners
  • Form event handlers
  • Mouse event handlers
  • Keyboard even handlers HTML5 event handlers
  • Introducing document object model objects
  • JavaScript functions
  • Working with arrays
  • Controlling the flow
  • Let’s play hide and seek – build your first interactive game
  • Looping the loop
  • The top-level window object
  • The document object
  • Forms objects
  • Working with window objects
  • Timer objects
  • Document Interaction
  • Understanding and dealing with errors
  • The JavaScript console
  • Using breakpoints
  • Handling exceptions
  • Debugging hints and common errors
  • A guide to good scripting
  • Graphic design considerations
  • Designing the game
  • Building the HTML framework
  • Adding style with CSS
  • Populating the grid with random mines
  • Adding skill levels and sound effects
  • Tracking hits and misses
  • Testing and quality assurance
  • Introducing the HTML5 JavaScript APIs
  • The drag and drop API
  • The web storage API
  • The messaging API
  • The history API
  • The geo-location API
  • Google maps
  • The canvas API
  • What is jQuery?
  • Finding and working with elements
  • Creating a simple jQuery App
  • Handling events with jQuery
  • Effects and animation methods
  • Working with jQuery form elements
  • Dimension and positioning methods
  • The jQuery user interface
  • Introducing AJAX
  • JavaScript Object Notion (JSON)
  • Server side JavaScript
  • Function closure explained
  • What are prototypes?
  • Regular expressions and recursion
  • Working with cookies
  • Adding and removing event listeners
  • Game overview
  • Creating the game framework with HTML and CSS
  • Planning the JavaScript functions
  • Controlling the game
  • Providing a scoreboard to show current status
  • Generate random batting stroked and bowling appeals
  • A function to update status
  • Testing and quality assurance