HTML5 & CSS3 Fundamentals LiveLessons (Sneak Peek Video Training)

HTML5 & CSS3 Fundamentals LiveLessons (Sneak Peek Video Training)

Released August 2012
Publisher(s): Pearson
ISBN: 0133259749

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

This video consists of over 18 hours of instruction. The video assumes that you know basic JavaScript. Advanced techniques are taught in the video.

You start by learning the basics of HTML5, then cover more sophisticated techniques such as creating tables, creating forms for collecting user input and using new features in HTML5, including page-structure elements that enable you to give meaning to the parts of a page (e.g., headers, navigation areas, footers, sections, figures, figure captions and more). Then you move on to the canvas element, which provides a JavaScript application programming interface (API) with methods for drawing two-dimensional bitmapped graphics and animations, manipulating fonts and images, and inserting images and videos.

Cascading Style Sheets (CSS) are used to specify the presentation, or styling, of elements on a web page (e.g., fonts, spacing, sizes, colors, positioning). CSS was designed to style portable web pages independently of their content and structure. By separating page styling from page content and structure, you can easily change the look and feel of the pages on an entire website, or a portion of a website, simply by swapping out one style sheet for another. CSS3 is the current version of CSS under development. You learn CSS basics, then you go on to the key new features in CSS3, including text and box shadows, transitions, transformations, animations, multicolumn layouts and more.

Finally, you learn about two new important HTML5 technologies: Web Workers and WebSockets. When a browser executes a long-running script, the browser typically becomes unresponsive for a period of time and sometimes displays an alert indicating that the script is busy or might have stopped working. This leads to a poor user experience. Web Workers enable portions of tasks to be off-loaded to background threads, allowing a web app’s GUI to remain responsive at all times. WebSockets enable clients to send data to and receive data from servers simultaneously using a persistent connection between the client and the server. In a web app with frequently updated data, the client typically polls the server repeatedly to get more data. With an open WebSocket connection, however, the server can push data to the client without the client specifically making additional requests, resulting in a more responsive app.

About the Author:
Paul Deitel, CEO and Chief Technical Officer of Deitel & Associates, Inc., is a graduate of MIT’s Sloan School of Management, where he studied Information Technology. He holds the Java Certified Programmer and Java Certified Developer certifications, and has been designated by Sun Microsystems as a Java Champion. Through Deitel & Associates, Inc., he has delivered Java, C, C , C# and Visual Basic courses to industry clients, including IBM, Sun Microsystems, Dell, Lucent Technologies, Fidelity, NASA at the Kennedy Space Center, the National Severe Storm Laboratory, White Sands Missile Range, Rogue Wave Software, Boeing, Stratus, Cambridge Technology Partners, Open Environment Corporation, One Wave, Hyperion Software, Adra Systems, Entergy, CableData Systems, Nortel Networks, Puma, iRobot, Invensys and many more. He has also lectured on Java and C for the Boston Chapter of the Association for Computing Machinery. He and his father, Dr. Harvey M. Deitel, are the world’s best-selling programming language textbook authors.

About Sneak Peek:
Sneak Peek videos are available to Safari Books Online subscribers offering early access to the very latest information on a given topic. Sneak Peek videos do not include post-production editing and may include further revisions before the video is complete.

Table of contents

  1. Introduction to HTML5: Part 1
    1. Lesson Introduction 00:02:50
    2. First HTML5 example 00:15:01
    3. Heading elements h1 through h6 00:04:54
    4. Linking to other web pages 00:09:40
    5. Linking to an email address 00:02:33
    6. Including images in HTML5 files 00:08:10
    7. Images as link anchors 00:06:31
    8. Inserting special characters 00:08:55
    9. Unordered list containing hyperlinks 00:04:00
    10. Nested lists and ordered lists 00:06:02
    11. Creating a basic table 00:09:13
    12. Complex HTML5 table 00:06:05
    13. Form with a text field and hidden fields 00:09:36
    14. Form using a variety of components 00:08:21
    15. Internal hyperlinks to make pages more navigable 00:04:16
    16. meta elements provide keywords and a description of a page 00:02:14
  2. Introduction to HTML5: Part 2
    1. Lesson Introduction 00:06:25
    2. New HTML5 form input types and attributes: input type “color” and the autofocus attribute 00:06:16
    3. New HTML5 form input types and attributes: input type “date” 00:04:08
    4. New HTML5 form input types and attributes: input types “datetime” and “datetime-local” 00:02:57
    5. New HTML5 form input types and attributes: input type “email” and the placeholder and required attributes 00:04:25
    6. New HTML5 form input types and attributes: input type “month” 00:00:50
    7. New HTML5 form input types and attributes: input type “number” 00:02:03
    8. New HTML5 form input types and attributes: input type “range” 00:02:06
    9. New HTML5 form input types and attributes: input type “search” 00:00:54
    10. New HTML5 form input types and attributes: input type “tel” 00:03:28
    11. New HTML5 form input types and attributes: input type “time” 00:00:52
    12. New HTML5 form input types and attributes: input type “url” 00:01:34
    13. New HTML5 form input types and attributes: input type “weak” 00:01:40
    14. HTML5 form autocomplete attribute and datalist element 00:05:33
    15. HTML5 page structure elements 00:18:22
  3. Introduction to Cascading Style Sheets™ (CSS): Part 1
    1. Lesson Introduction 00:03:09
    2. Using inline styles 00:08:27
    3. Embedded style sheet 00:17:18
    4. Inheritance in syle sheets 00:20:17
    5. External style sheet 00:06:09
    6. Absolute positioning of elements 00:07:12
    7. Relative positioning of elements 00:06:38
    8. Adding background images and indentation 00:08:05
    9. Element dimensions and text alignment 00:05:49
    10. Box model, text flow and borders of block-level elements 00:09:08
    11. Floating elements 00:11:17
    12. Media types and media queries 00:05:22
    13. CSS drop-down menu 00:07:00
  4. Introduction to Cascading Style Sheets™ (CSS): Part 2
    1. Lesson Introduction 00:03:53
    2. Text shadow 00:04:53
    3. Using border-radius to add rounded corners to two elements 00:04:28
    4. Creating box shadow effects 00:03:55
    5. Linear gradients 00:14:25
    6. Radial gradients 00:03:08
    7. WebKit only: text stroke 00:01:53
    8. Multiple background images 00:08:38
    9. WebKit only: Reflections 00:03:50
    10. Stretching and repeating an image to create an image border 00:09:18
    11. Animation 00:11:02
    12. Transitioning an image over a four-second duration and applying rotate and scale transforms 00:07:47
    13. Skewing elements 00:07:15
    14. Melting one image into another 00:03:26
    15. Embedding web fonts for use in your page 00:05:15
    16. Flexible box layout module and :nth-child selectors 00:12:12
    17. Multicolumn text 00:03:45
    18. Using media queries to reformat a page based on the device width 00:05:37
    19. Colors with rgb, rgba, hsl and hsla 00:03:22
  5. HTML5: Introduction to canvas
    1. Introduction to canvas 00:02:28
    2. Drawing a rectangle with a border on a canvas 00:09:04
    3. Drawing lines on a canvas 00:12:28
    4. Drawing arcs and circles on a canvas 00:07:22
    5. Creating shadows on a canvas 00:03:55
    6. Drawing a rounded rectangle on a canvas 00:05:05
    7. Drawing a Bezier curve on a canvas 00:01:43
    8. Drawing linear gradients on a canvas 00:05:24
    9. Drawing radial gradients on a canvas 00:03:57
    10. Drawing an image to a canvas 00:04:01
    11. Manipulating an image’s pixels to change colors and transparency 00:20:34
    12. Creating a pattern using an image on a canvas 00:02:57
    13. Drawing an ellipse on a canvas 00:06:09
    14. Using the rotate method to rotate a rectangle on a canvas 00:04:05
    15. Using the translate and transform methods to skew rectangles 00:06:50
    16. Drawing text on a canvas 00:06:13
    17. Using the globalAlpha attribute on a canvas 00:03:42
    18. Demonstrating compositing on a canvas 00:05:44
    19. Cannon Game: Overview 00:03:48
    20. Cannon Game: HTML5 document 00:03:57
    21. Cannon Game: Variable declarations 00:01:32
    22. Cannon Game: Function setupGame 00:02:25
    23. Cannon Game: Functions startTimer and stopTimer 00:02:01
    24. Cannon Game: Function resetElements 00:02:46
    25. Cannon Game: Function newGame 00:01:26
    26. Cannon Game: Function updatePositions 00:06:55
    27. Cannon Game: Function fireCannonball 00:01:35
    28. Cannon Game: Function alignCannon 00:01:26
    29. Cannon Game: Function draw 00:02:26
    30. Cannon Game: Function showGameOverDialog 00:03:42
    31. Saving the current state and restoring the previous state 00:03:42

Product information

  • Title: HTML5 & CSS3 Fundamentals LiveLessons (Sneak Peek Video Training)
  • Author(s):
  • Release date: August 2012
  • Publisher(s): Pearson
  • ISBN: 0133259749