HTML5 & CSS3 For Dummies Cheat Sheet - dummies
Cheat Sheet

HTML5 & CSS3 For Dummies Cheat Sheet

From HTML5 and CSS3 For Dummies

By David Karlins, Judith Muhr

HTML and CSS are the basic building blocks of websites. The advent of HTML5 and CSS3 represents a dynamic and powerful evolutionary stage in the development of web design. Maximizing the potential of HTML5 and CSS3 makes it possible to apply styling and formatting, present audio and video, and create animation and interactivity in ways that have never before been possible without stringing together plugins, image files, and JavaScript.

Top Free Online Resources for HTML5 and CSS3

You’ve heard the old saying, “Freedom of speech ain’t free.” That applies to web design as well, unless you tap into the most useful free resources. Here’s a list of the top free resources you can find online for HTML5 and CSS3:

  • Free web hosting is available from Their free sites are ad-free, support server-side scripting, and have a reasonably reliable uptime record.

  • You need books (like HTML5 & CSS3 For Dummies — to take a random example) to provide an overview of how to build websites. But detailed resources that supplement that knowledge are available online and the most useful is

  • You can build a powerful, fully mobile-friendly Web app using the tools at jQuery Mobile.

  • While at jQuery Mobile, check out free, custom theming (styles) from ThemeRoller.

  • Trouble-shoot and validate your code with tools at W3C. Check CSS at and HTML at

  • Generate free color schemes at Adobe’s Kuler.

  • Need a reliable search box for your site but have zero dollars in your search box budget? Use FreeFind, which creates search boxes for your site, without using or selling data on who searches for what at your site.

  • How about a free blog? Get one at Blogger.

  • Finally, help people find you with a Google map embedded in your site.

Tools for Preparing HTML5 Video for the Web

Native video that plays without plug-ins (like Windows Media Player or QuickTime Player) is one of the most exciting new features in HTML5. But where do you get HTML5-compatible video? How do you present it? Here are some tools to help solve those challenges:

  • Turn your video files into Firefox-friendly Theora Ogg.

  • Microsoft has a nice tutorial on building JavaScript controls for Native video

  • Who can keep track of the ever-changing list of which browsers support which HTML5 native video formats? Answer: the Wikipedia folks track

  • One of the most valuable online (free) resources for web design, let alone web video, is the Miro Video Converter. You plug in any video, and it produces HTML5-friendly video formats.

  • Need to test your video in different browsers? The tools are not free, but they offer free trials that provide a preview of your video in any device from a Windows desktop computer with IE 6 to the latest version of iPad’s operating system.

  • Need to do a bit of editing on your video before posting it? Loopster has free online video editing tools

  • YouTube and Vimeo will host your videos free, but for about $60 a year, Vimeo offers a service that hosts your video and gives you full control over who can see it, and presents the video without any ads or promo material for vimeo.

Optimize Images with Large Areas of Solid Color Using the GIF Format

When optimizing graphics that have text overlaid on a photorealistic image, you need to create separate slices for the areas of the image that are photorealistic as well as create additional slices for the areas of the image that contain text. Export the areas containing text using the GIF format, and export the photo-realistic areas of the image using the JPEG format. Here are some tips to help you out:

  • For high quality JPEG images, use a quality setting of 70 when exporting. For smaller JPEG images, you can get by with a quality setting of 50.

  • If you’re creating a photo gallery for a product, or for a photographer, export the images in the JPEG format with a quality setting of 80.

  • When compressing images using the JPEG format, pay careful attention to the edges of objects in the image. When you begin to see pixels, or the edges lack definition, you’ve compressed the image too far.

  • When exporting images using the GIF file format, use the least number of colors that yields a crisp image and you’ll have a fast loading image.

  • When you resample images for websites, the maximum resolution you need is 72 pixels per inch.

Websites with no video are becoming rarer. Video is everywhere on the Internet: it’s used for entertainment, in ads, and to promote rock stars and other artists. When video is well done, it’s a thing of beauty. Here are some things you need to consider when adding video to a web page:

  • Video takes up lots of bandwidth. If the bandwidth for a website is exceeded, the charge can be rather costly. Instead of hosting video on a website, upload it to YouTube, and then embed the video in a webpage or blog.

  • Don’t violate copyright laws. Don’t copy video from other web sites, or other people’s YouTube videos and use them on your website.

  • Check the license: If you do use a video from a supplier or manufacturer on a commercial website, make sure you are covered by the supplier or manufacturer’s license.

  • Use a high quality camcorder to record video: No, an iPhone is not a high quality camcorder. If you encode poor quality video for the web, you get poor quality video. Remember the old axiom: Garbage in, garbage out.

  • Make sure the website viewers have the necessary plug-ins to view the video.

  • If you create HTML5 pages with video, make sure the intended audience for the site uses HTML5-compliant browsers.

  • Don’t use transitions when you edit multiple video clips to create a video for the web. Video transitions look great on HD video, but don’t look good when you encode a video for the web.