Advanced HTML5 and CSS3 Specialist

Advanced HTML5 and CSS3 Specialist:

CIW Web and Mobile Design Series Student Guide

CCL02-CDHTCS-CK-1405 ? version 1.0 ? rd042214

Advanced HTML5 and CSS3 Specialist

Student Guide

Chief Executive Officer

Barry Fingerhut

Vice President, Operations & Development Todd Hopkins

Senior Content Developer Kenneth A. Kozakis

Managing Editor

Susan M. Lane

Editor

Sarah Skodak

Project Manager/Publisher

Tina Strong

Customer Service

Certification Partners, LLC 1230 W. Washington St., Ste. 201 Tempe, AZ 85281 (602) 275-7700

Copyright ? 2014, All rights reserved.

Advanced HTML5 and CSS3 Specialist

Developer

Patrick T. Lane

Contributors

James Stanger, Ph.D., Sadie Hebert, Jason Hebert and Susan M. Lane

Editor

Susan M. Lane

Project Manager/Publisher

Tina Strong

Trademarks

Certification Partners is a trademark of Certification Partners, LLC. All product names and services identified throughout this book are trademarks or registered trademarks of their respective companies. They are used throughout this book in editorial fashion only. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with the book. Copyrights of any screen captures in this book are the property of the software's manufacturer.

Disclaimer

Certification Partners, LLC, makes a genuine attempt to ensure the accuracy and quality of the content described herein; however, Certification Partners makes no warranty, express or implied, with respect to the quality, reliability, accuracy, or freedom from error of this document or the products it describes. Certification Partners makes no representation or warranty with respect to the contents hereof and specifically disclaims any implied warranties of fitness for any particular purpose. Certification Partners disclaims all liability for any direct, indirect, incidental or consequential, special or exemplary damages resulting from the use of the information in this document or from the use of any products described in this document. Mention of any product or organization does not constitute an endorsement by Certification Partners of that product or corporation. Data used in examples and labs is intended to be fictional even if actual data is used or accessed. Any resemblance to, or use of real persons or organizations should be treated as entirely coincidental. Certification Partners makes every effort to ensure the accuracy of URLs referenced in all its material, but cannot guarantee that all URLs will be available throughout the life of a course. When this course was published, all URLs were checked for accuracy and completeness. However, due to the ever-changing nature of the Internet, some URLs may no longer be available or may have been redirected.

Copyright Information

This training manual is copyrighted and all rights are reserved by Certification Partners, LLC. No part of this publication may be reproduced, transmitted, stored in a retrieval system, modified, or translated into any language or computer language, in any form or by any means, electronic, mechanical, magnetic, optical, chemical, manual or otherwise without written permission of Certification Partners, 1230 W. Washington Street, Suite 201, Tempe, AZ 85281.

Copyright ? 2014 by Certification Partners, LLC

All Rights Reserved

ISBN: 0-7423-3250-0

iv

? 2014 Certification Partners, LLC. -- All Rights Reserved.

Version 1.0

v

Table of Contents

Course Description........................................................................................................................ ix Courseware .................................................................................................................................... x Course Objectives........................................................................................................................ xiv Classroom Setup ......................................................................................................................... xiv System Requirements ................................................................................................................. xiv Conventions and Graphics Used in This Book .............................................................................. xvi

Lesson 1: HTML5 Essentials ........................................................................................................ 1-1 Pre-Assessment Questions ................................................................................................................ 1-2 Introduction to HTML5 and CSS3...................................................................................................... 1-3 Migration to Mobile Devices ............................................................................................................... 1-3 The Web Development Trifecta........................................................................................................... 1-5 The Evolution of HTML5 .................................................................................................................... 1-6 HTML5 Structure Elements ............................................................................................................... 1-9 Validating HTML5 Code ................................................................................................................... 1-10 The Element ....................................................................................................................... 1-15 The Element ...................................................................................................................... 1-19 HTML5 APIs .................................................................................................................................... 1-21 Case Study...................................................................................................................................... 1-24 Lesson 1 Review .............................................................................................................................. 1-26

Lesson 2: Using Cascading Style Sheets (CSS) Technology ........................................................... 2-1 Pre-Assessment Questions ................................................................................................................ 2-2 Cascading Style Sheets (CSS) ............................................................................................................ 2-3 Style Guides...................................................................................................................................... 2-3 CSS and HTML.................................................................................................................................. 2-5 CSS Terms and Syntax...................................................................................................................... 2-6 Applying CSS Styles .......................................................................................................................... 2-9 Page Layout with CSS ..................................................................................................................... 2-14 CSS Positioning Schemes ................................................................................................................ 2-21 The CSS Box Model ......................................................................................................................... 2-22 Case Study...................................................................................................................................... 2-25 Lesson 2 Review .............................................................................................................................. 2-27

Lesson 3: Introduction to CSS Version 3 (CSS3) .......................................................................... 3-1 Pre-Assessment Questions ................................................................................................................ 3-2 Introduction to CSS3......................................................................................................................... 3-3 CSS3 Selectors and Properties........................................................................................................... 3-3 CSS3 Background Properties............................................................................................................. 3-8 CSS3 Border Properties ................................................................................................................... 3-14 CSS3 Font Properties ...................................................................................................................... 3-18 CSS3 Text Effects ............................................................................................................................ 3-20 Case Study...................................................................................................................................... 3-24 Lesson 3 Review .............................................................................................................................. 3-26

Lesson 4: Using Advanced CSS3 Techniques ................................................................................ 4-1 Pre-Assessment Questions ................................................................................................................ 4-2 Introduction to Advanced CSS3 Techniques ...................................................................................... 4-3 CSS3 2D and 3D Transformations..................................................................................................... 4-3 CSS3 Transitions .............................................................................................................................. 4-8 CSS3 Animations ............................................................................................................................ 4-11 CSS3 User Interfaces....................................................................................................................... 4-15 Creating Menus and Buttons with CSS3.......................................................................................... 4-17 Case Study...................................................................................................................................... 4-21 Lesson 4 Review .............................................................................................................................. 4-23

Lesson 5: Introduction to JavaScript........................................................................................... 5-1 Pre-Assessment Questions ................................................................................................................ 5-2 HTML5 and JavaScript ...................................................................................................................... 5-3 Introduction to Scripting ................................................................................................................... 5-4

? 2014 Certification Partners, LLC. -- All Rights Reserved.

Version 1.0

vi

JavaScript Characteristics................................................................................................................. 5-4 JavaScript vs. Other Languages ........................................................................................................ 5-6 Embedding JavaScript into HTML5 Documents ................................................................................. 5-8 JavaScript and Common Programming Concepts............................................................................. 5-10 Objects, Properties and Methods ..................................................................................................... 5-10 Variables......................................................................................................................................... 5-14 Expressions and Operators ............................................................................................................. 5-17 Case Study...................................................................................................................................... 5-23 Lesson 5 Review .............................................................................................................................. 5-25

Lesson 6: JavaScript Events, Functions and Methods.................................................................. 6-1 Pre-Assessment Questions ................................................................................................................ 6-2 User Events and JavaScript Event Handlers ...................................................................................... 6-3 Introduction to JavaScript Functions ................................................................................................ 6-4 Defining a Function........................................................................................................................... 6-5 Calling a Function ............................................................................................................................. 6-9 Methods as Functions ..................................................................................................................... 6-19 Errors In JavaScript ........................................................................................................................ 6-22 Case Study...................................................................................................................................... 6-26 Lesson 6 Review .............................................................................................................................. 6-27

Lesson 7: Using HTML5 APIs ....................................................................................................... 7-1 Pre-Assessment Questions ................................................................................................................ 7-2 Introduction to HTML5 APIs .............................................................................................................. 7-3 Document Object Model (DOM).......................................................................................................... 7-3 Common HTML5 APIs ....................................................................................................................... 7-4 The Canvas API ................................................................................................................................. 7-4 The Offline AppCache API ................................................................................................................ 7-10 The Geolocation API ........................................................................................................................ 7-13 The Drag-and?Drop API................................................................................................................... 7-16 The File API ..................................................................................................................................... 7-20 The History API ............................................................................................................................... 7-22 Retrieving Data with XMLHttpRequest.............................................................................................. 7-24 Manipulating Data with jQuery ....................................................................................................... 7-24 Case Study...................................................................................................................................... 7-28 Lesson 7 Review .............................................................................................................................. 7-30

Lesson 8: Developing HTML5 Forms ............................................................................................ 8-1 Pre-Assessment Questions ................................................................................................................ 8-2 Introduction to HTML5 Forms ........................................................................................................... 8-3 Cross-Browser Compatible HTML5 Forms ......................................................................................... 8-3 HTML5 Form Input Types.................................................................................................................. 8-4 New Form Elements in HTML5 .......................................................................................................... 8-9 HTML5 Global Attributes for Form Elements ................................................................................... 8-13 Case Study...................................................................................................................................... 8-21 Lesson 8 Review .............................................................................................................................. 8-23

Lesson 9: Completing, Submitting and Validating User Input Forms ............................................ 9-1 Pre-Assessment Questions ................................................................................................................ 9-2 Improving Forms with HTML5 ........................................................................................................... 9-3 HTML5 Attributes for the Element ......................................................................................... 9-3 HTML5 Attributes for the Element ........................................................................................ 9-5 Submitting Forms with the Element ................................................................................... 9-8 Concepts and Techniques for Validating User Input......................................................................... 9-11 Validating User Input with HTML5 Attributes .................................................................................. 9-13 Validating User Input with JavaScript ............................................................................................. 9-20 Case Study...................................................................................................................................... 9-22 Lesson 9 Review .............................................................................................................................. 9-24

Lesson 10: Designing for Mobile Devices ................................................................................... 10-1 Pre-Assessment Questions .............................................................................................................. 10-2 Introduction to Mobile Design.......................................................................................................... 10-3 Mobile Web Sites vs. Mobile Apps .................................................................................................... 10-3

? 2014 Certification Partners, LLC. -- All Rights Reserved.

Version 1.0

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download