Web

HTML5 and CSS3 Primer, Plus a Dozen Useful Tools and Resources to Get You Started

5

HTML has been web pages standard language for ages. But new updates and technologies such as HTML5 and CSS3 will make it remain as industry standard for a longer period of time. These latest updates on markup programming changes how we interact with web sites.

Before we proceed in giving you some handy HTML5 and CSS3 tools and resources, let me discuss shortly in simple terms what they can do and why you should care.

The Basics

Web designers and developers have been using HTML to build web sites even in the early days, but just HTML is not enough. Building web sites with only HTML can be tedious and limiting. This is where CSS or Cascading Style Sheets helps make it a lot easier. CSS tells web browsers how to properly display an HTML page. Simply put, HTML is the skeletal structure, while CSS specifies the proper elements to fill up the skeletal HTML structure to be served as web pages. CSS lets you control fonts, colors, backgrounds, etc, of an HTML page thus making it less complex, easier and time consuming to change the styles of a web page. With CSS, you can make small changes to one CSS style sheet document and apply these changes across all HTML pages or your entire site.

HTML5

HTML5 and CSS3 aren’t fully completed and implemented yet. HTML5 is the latest version of HTML or Hypertext Markup Language. Currently, it is only fully supported by a few popular web browsers but is expected to be fully completed and implemented in the coming years. HTML5’s idea is to build small parts that works together instead of one large chunk of codes. And each browser may support different features or small parts making it easier for developers to figure out features they need for certain browsers. HTML5 is also built from HTML4 so that means you don’t have to throw away existing codes but you can rather build upon it and improve it with HTML5.

HTML5 highlighted features include:

  • HTML5’s audio visual support will allow you to add and watch audio and video without using a external plugins like Flash or Silverlight.
  • Simplified doctype declaration from previous HTML to just <!DOCTYPE html>.
  • Simplified content editing using contenteditable attribute where you can easily edit or change your text by adding contenteditable=”true”.
  • Canvas element in HTML5 allows for dynamic, scriptable rendering of 2D shapes and bitmap images.
  • HTML 5 provided a smarter solution to offline application caching. With this feature, you can now specify the files that the browser should cache and be able to access them even if you’re offline.

CSS3

Although CSS3, like HTML5, is not yet fully supported by all browsers. It has increasingly becoming popular because it makes building web sites a lot easier. A lot of new CSS3 properties and features allows web builders to enhance layout and appearance of websites.

Some of these cool new CSS3 tricks include:

  • Box-shadows allows the main content to slide beneath another area.
  • Text-shadows provides a drop shadow underneath an HTML text element.
  • Easy addition and management of font by simply uploading them in a server and linking those to the CSS file.
  • Possibility of overlaying multiple backgrounds.
  • Border images is an upgraded option from using old HTML/CSS plain broder allowing you to use images as borders.
  • Simplified implementation of opacity levels.
  • RGBA coloring instead of using hex coloring method allowing you to choose the amount of red, green and blue with opacity options to an element in your design.
  • Transform property allows you to choose how large you want an area to grow when hovered.
  • Rounded corners to get rid of sharp corners without using the old image trick.

With all these outstanding new features HTML5 and CSS3 brings, we have rounded up some cool handy tools and resources to help you get running with HTML5 and CSS3 in your web designs.

1. HTML 5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is a downloadable useful cheat sheet for web designers and developers presented in an essentially simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

2. HTML5 and CSS3 Browser Support Checklist

This checklist displays all browser support for HTML5 and CSS3 including CSS3 Properties, CSS3 Selectors, Web Applications, GFX & Embedded Content and Web Forms 2.0.

 

3. HTML5 Demos and Examples

HTML 5 compilation of demos and examples with browser support icons and technology tag to filter the demos.

4. The HTML5 Browser Test

Launch this online tool on your web browser and it will show the extent of support by assigning marks out of 160 on different parameters like: doctype, canvas, video, audio, geolocation, storage, offline web apps.

5. HTML5 & CSS3 Readiness

A cool yet simple data dashboard, completely created with CSS3, which tracks how much browser support exists for each new HTML5 and CSS3 feature. It is presented in a rotary, sun ray-like design based on an existing infographic about America’s Wealthiest Religions.

6. Initializr

Initializr is an online HTML5 templates generator to help you get started with your HTML5 project. It is built on HTML5 Boilerplate, a powerful HTML5 template that will generate you a clean and customizable HTML5 template.

7. CSS Tricks

CSS Tricks is a web design community site that offers tons of CSS3 and HTML5 tools and resources like video tutorials, downloadable tools, code snippets and many more.

8. CSS3 Please!

CSS3 Please! allows web designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically. It also allows you to copy the whole or part of it and paste it into your own stylesheet.

9. CSS3 Generator

CSS3 Generator is an online CSS3 tool that allows you to create and customize multiple CSS3 effects where it automatically generates the code which you can copy and paste on your own stylesheet.

10. CSS3 Gradient Generator

This online CSS3 tool will help you generate a various gradients in CSS. You can select and customize various gradient options and it will generate real time gradient preview image with corresponding CSS3 code that you can copy and paste on your stylesheet.

11. CSS3 Cheat Sheet

This CSS3 cheat sheet from SmashingMagazine presents the main features of CSS 3 in a handy, printable reference card downloadable in pdf format.

12. 52 Framework

52 Framework is a next generation cross-browser, HTML5 and CSS3 specific framework which aims to provide an easy way to build websites using HTML5 & CSS3.

5 comments

  1. jesica 18 July, 2011 at 20:28

    Somebody necessarily help to make significantly posts I might state. That is the first time I frequented your web page and to this point? I surprised with the research you made to create this particular post extraordinary. Great task!

  2. Martina 24 December, 2015 at 20:05

    Fantastic site. A lot of helpful info here.
    I’m sending it to several pals ans additionally sharing in delicious.
    And of course, thank you in your effort!

Post a new comment

Recommended for you