HTML5 & CSS3 for the Real World: Sitepoint Learnable Lecture Series
Lazaris (Louis)
Source: Goldstein (Alexis), Lazaris (Louis) & Wehl (Estelle) - HTML5 & CSS3 for the Real World
Paper - Abstract

Paper StatisticsNotes Citing this PaperColour-ConventionsDisclaimer


  1. Welcome to HTML5 & CSS3 for the Real World. We’re glad you’ve decided to join us on this journey of discovering some of the latest and the greatest in front-end website building technology.
  2. If you’ve picked up a copy of this book, it’s likely that you’ve dabbled to some degree in HTML and CSS. You might even be a bit of a seasoned pro in certain areas of markup, styling, or scripting, and now want to extend those skills further by dipping into the new features and technologies associated with HTML5 and CSS3.
  3. Learning a new task can be difficult. You may have limited time to invest in poring over the official documentation and specifications for these web-based languages. You also might be turned off by some of the overly technical books that work well as references but provide little in the way of real-world, practical examples.
  4. To that end, our goal with this book is to help you learn through hands-on, practical instruction that will assist you to tackle the real-world problems you face in building websites today — with a specific focus on HTML5 and CSS3.
  5. But this is more than just a step-by-step tutorial. Along the way, we’ll provide plenty of theory and technical information to help fill in any gaps in your understanding — the whys and hows of these new technologies — while doing our best not to overwhelm you with the sheer volume of cool new stuff. So let’s get started!
What’s in This Book
  1. This book comprises eleven chapters and three appendices. Most chapters follow on from each other, so you’ll probably get the most benefit reading them in sequence, but you can certainly skip around if you only need a refresher on a particular topic.
  2. Chapter 1: Introducing HTML5 and CSS3
    Before we tackle the hands-on stuff, we’ll present you with a little bit of history, along with some compelling reasons to start using HTML5 and CSS3 today. We’ll also look at the current state of affairs in terms of browser support, and argue that a great deal of these new technologies are ready to be used today — so long as they’re used wisely.
  3. Chapter 2: Markup, HTML5 Style
    In this chapter, we’ll show you some of the new structural and semantic elements that are new in HTML5. We’ll also be introducing The HTML5 Herald, a demo site we’ll be working on throughout the rest of the book. Think divs are boring? So do we. Good thing HTML5 now provides an assortment of options: article, section, nav, footer, aside, and header!
  4. Chapter 3: More HTML5 Semantics
    Continuing on from the previous chapter, we turn our attention to the new way in which HTML5 constructs document outlines. Then we look at a plethora of other semantic elements that let you be a little more expressive with your markup.
  5. Chapter 4: HTML5 Forms
    Some of the most useful and currently applicable features in HTML5 pertain to forms. A number of browsers now support native validation on email types like emails and URLs, and some browsers even support native date pickers, sliders, and spinner boxes. It’s almost enough to make you enjoy coding forms! This chapter covers everything you need to know to be up to speed writing HTML5 forms, and provides scripted fallbacks for older browsers.
  6. Chapter 5: HTML5 Audio and Video
    HTML5 is often touted as a contender for the online multimedia content crown, long held by Flash. The new audio and video elements are the reason — they provide native, scriptable containers for your media without relying on a thirdparty plugin like Flash. In this chapter, you’ll learn all the ins and outs of putting these new elements to work.
  7. Chapter 6: Introducing CSS3
    Now that we’ve covered just about all of HTML5, it’s time to move onto its close relative CSS3.We’ll start our tour of CSS3 by looking at some of the new selectors that let you target elements on the page with unprecedented flexibility. Then we’ll follow up with a look at some new ways of specifying color in CSS3, including transparency.We’ll close the chapter with a few quick wins — cool CSS3 features that can be added to your site with a minimum of work: text shadows, drop shadows, and rounded corners.
  8. Chapter 7: CSS3 Gradients and Multiple Backgrounds
    When was the last time you worked on a site that didn’t have a gradient or a background image on it? CSS3 provides some overdue support to developers spending far too much time wrangling with Photoshop, trying to create the perfect background gradients and images without breaking the bandwidth bank. Now you can specify linear or radial gradients right in your CSS without images, and you can give an element any number of background images. Time to ditch all those spare divs you’ve been lugging around.
  9. Chapter 8: CSS3 Transforms and Transitions
    Animation has long been seen as the purview of JavaScript, but CSS3 lets you offload some of the heavy lifting to the browser. Transforms let you rotate, flip, skew, and otherwise throw your elements around. Transitions can add some subtlety to the otherwise jarring all-on or all-off state changes we see on our sites.We wrap up this chapter with a glimpse of the future; while CSS keyframe animations still lack widespread support, we think you’ll agree they’re pretty sweet.
  10. Chapter 9: Embedded Fonts and Multicolumn Layouts
    Do you prefer Arial or Verdana? Georgia or Times? How about none of those? In this chapter, we’ll look at how we can move past the “web-safe” fonts of yesteryear and embed any fonts right into our pages for visitors to download along with our stylesheets and images. We’ll also look at a promising new CSS feature that allows us to lay out content across multiple columns without using extra markup or the dreaded float.
  11. Chapter 10: Geolocation, Offline Web Apps, and Web Storage
    The latest generation of browsers come equipped with a wide selection of new standard JavaScript APIs. Many of these are specifically geared towards mobile browsers, but still carry benefits for desktop users. In this chapter, we’ll look at three of the most exciting: Geolocation, Offline Web Apps, and Web Storage. We’ll also touch briefly on some of the APIs that we won’t be covering in detail — either because they’re poorly supported, or have limited use cases — and give you some pointers should you want to investigate further.
  12. Chapter 11: Canvas, SVG, and Drag and Drop
    We devote the book’s final chapter to, first of all, covering two somewhat competing technologies for drawing and displaying graphics. Canvas is new to HTML5, and provides a pixel surface and a JavaScript API for drawing shapes to it. SVG, on the other hand, has been around for years, but is now achieving very good levels of browser support, so it’s an increasingly viable alternative. Finally, we’ll cover one more new JavaScript API — Drag and Drop — which provides native handling of drag-and-drop interfaces.
  13. Appendix A: Modernizr
    A key tool in any HTML5 superhero’s utility belt, Modernizr is a nifty little JavaScript library that detects support for just about every HTML5 and CSS3 feature, allowing you to selectively style your site or apply fallback strategies. We’ve included a quick primer on how to use Modernizr in this appendix, even though Modernizr is used throughout the book. This way, you have a ready reference available in one place, while the other chapters focus on the meat of HTML5 and CSS3.
  14. Appendix B: WAI-ARIA
    A separate specification that’s often mentioned in the same breath as HTML5, WAI-ARIA is the latest set of tools to help make sophisticated web applications accessible to users of assistive technology. While a whole book could be devoted to WAI-ARIA, we thought it beneficial to include a quick summary of what it is, as well as some pointers to places where you can learn more.
  15. Appendix C: Microdata
    Microdata is part of the HTML5 specification that deals with annotating markup with machine-readable labels. It’s still somewhat in flux, but we thought it was worthwhile to get you up to speed with a few examples.

Text Colour Conventions (see disclaimer)

  1. Blue: Text by me; © Theo Todman, 2019
  2. Mauve: Text by correspondent(s) or other author(s); © the author(s)

© Theo Todman, June 2007 - Jan 2019. Please address any comments on this page to File output:
Website Maintenance Dashboard
Return to Top of this Page Return to Theo Todman's Philosophy Page Return to Theo Todman's Home Page