Web Design Ledger » css

7 Useful Resources to Help You Learn HTML5

Henry — Wed, 11 Aug 2010 04:15:31 +0000

Even though HTML5 is relatively new and it’s not supported yet by all major browsers, it is being used now by a lot of web designers and developers. Without a doubt, HTML5 is going to play a big part in the way we develop on the web, for many years to come. As I just mentioned, many people are using it now, but there are also many of you out there that hasn’t touched it yet. Now is a good time to start learning it. So, in order to give you a helping hand with that task, we’ve rounded up 7 Useful Resources to Help you Learn HTML5.

A Web Developer’s Guide to HTML 5

This document illustrates how to write HTML 5 documents, focussing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.

The WHATWG Blog

The WHATWG Blog is the blog of The Web Hypertext Application Technology Working Group, which are the people responsible for the HTML 5 spec.

Dive Into HTML 5

Dive Into HTML 5 is a book that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards.

HTML5 Doctor

HTML5 Doctor publishes articles relating to HTML5, its semantics, and how to use it right now. They also invite questions via Ask the Doctor, and post answers in future articles so that everyone can benefit.

When can I use…

This is a one-pager that acts as a cheat sheet of compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies.

HTML5 Visual Cheat Sheet

This cheat sheet is essentially a simple visual grid that contains a list of all HTML tags and of their related attributes supported by HTML 5.

HTML5 Gallery

HTML5 gallery has two primary aims, the first is to showcase sites that use HTML5 for markup, so that we can see how people have interpreted the specification and how they’ve implemented it. The second is to help people learn about html5 and how it should be used and how to implement it.

10 HTML5 Demos to Make You Forget About Flash

Henry — Thu, 24 Jun 2010 06:02:23 +0000

You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. Personally, I think that it will slowly replace Flash for some things, but Flash will always have a place, especially for developing complex games and rich internet applications. If you’ve yet to see what HTML5 can do, I’ve rounded up 10 demos that show off some of its capabilities.

So what do you think – will HTML5 replace Flash?

Canvas Minimal Particle Animation

CanvasMol

Flickr and Canvas in 3D

Cloth Simulation

etchaPhysics

Google Images Gift Box – CSS 3D example

Liquid Particles

HTML5 Canvas Nebula

Ball Pool

Bomomo

13 Pure CSS Techniques for Creating JavaScript-like Interactions

Henry — Tue, 18 May 2010 07:55:22 +0000

We all know that JavaScript allows us to do great things when it comes to user interfaces, but with a little imagination and creativity, the same types of effects can be created with only CSS. Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing. You’ll notice that some of these techniques can be very useful, while others are simple for proving it can be done.

How To Create a Pure CSS Polaroid Photo Gallery

Creating a Bubble Coda Style with CSS3

Accordion using only CSS

How to Create a Fancy Image Gallery with CSS3

CSS3 Hover Tabs without JavaScript

Create a JQuery Content Slider Using Pure CSS

How to Create a Valid Non-Javascript Lightbox

Pure Css Data Chart

Bubble Effect with CSS

CSS Image Switcher

Pure Css Line Graph

CSS Image Switcher

Pure CSS Timeline

15 Useful HTML5 Tutorials and Cheat Sheets

Henry — Wed, 28 Apr 2010 05:03:31 +0000

HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. In an effort to encourage you to do the same and to prepare you for the future, we’ve rounded up 15 useful HTML5 tutorials and cheat sheets.

Tutorials

How to Make an HTML5 iPhone App

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Design & Code a Cool iPhone App Website in HTML5

Coding A HTML 5 Layout From Scratch

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

Have a Field Day with HTML5 Forms

Designing a blog with html5

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Structural Tags in HTML5

Coding a CSS3 & HTML5 One-Page Website Template

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

Cheat Sheets

HTML 5 Cheat Sheet

HTML 5 Visual Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML 5 Pocket Book

12 Excellent CSS3 Button and Menu Techniques

Henry — Fri, 23 Apr 2010 04:59:34 +0000

CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations. So, in order to encourage you to start experimenting with CSS3, we’ve rounded up 12 excellent CSS3 button and menu techniques.

Roll Your Own Google Buttons

CSS3-Only Tabbed Area

Radioactive Buttons

Apple’s Navigation bar using only CSS

How to Build a Simple Button with CSS Image Sprites

Creating Dynamic Buttons With CSS3

How To Create Depth And Nice 3D Ribbons Only Using CSS3

CSS3 Chunky Menu

CSS3 Dropdown Menu

Pretty CSS3 Buttons

jQuery style menu with CSS3

CSS3-only horizontal drop line tab menu

The Most Common HTML and CSS Mistakes to Avoid

snoak — Tue, 16 Feb 2010 05:27:46 +0000

Beginners through advanced coders make mistakes in their HTML and CSS files, either through carelessness or lack of experience. Clean code is very important though and will help further your skills as a developer, as well as save you time in editing later on! It never hurts to review if you’re a skilled developer, many mistakes are caused by going too quickly and not practicing good coding skills from the beginning. Here’s a helpful list of common mistakes and missteps that I’ve encountered through my own work, as well as working with others.

HTML Mistakes

Forgetting to Close a Tag

This is very common, especially in beginners. Several tags require closing tags such as divs, strong tags, and links to name a few. Other tags require a closing slash to end the line such as an img tag.

Text inside the div.

Incorrect DOCTYPE

HTML requires that you start out the document with the correct DOCTYPE declaration. It needs to be before anything else in the code, starting the document by declaring what type of HTML you’re using. Here’s the DOCTYPE for XHTML 1.0 Transitional.

Improperly nesting tags

It’s very important to open and close tags in the proper order. Once something (for example a div) has opened, it must close before anything above it can close. The following is incorrect.

text

Capitalizing tags

This is just considered bad practice, but won’t result in your code not being validated. You should always use lowercase for tags like divs, links, and images. The following is incorrect.

Forgetting to open or close quotes

I’ve seen this a lot in beginners and will result in broken code and things not functioning properly. HTML requires double quotes that open and close correctly. Here’s an example of correct usage.

Using Inline Styles

This is another one that is considered bad practice. Inline styles do work but will result in headaches later on! Items should be styled globally through an external stylesheet. It will be much easier to edit and add styles to in the future. An example of inline styles:

link name

Not Encoding Special Characters

Characters like “©” and “&” should be shown with the proper HTML code for the character. Here’s a great list of characters and their HTML counterparts that you should use.

Confusing Classes and Ids

Classes are for items that are used more than once on one page. This can be a link style that you’ll call in multiple times on one page but doesn’t follow the global link styling. Ids are items that are called in just once, like the header div. Classes and ids are often overused and used in unnecessary places as well. Stick to the minimum amount of classifications that you need.

CSS

Forgetting to Close Things Properly

Each div or item called in starts with the opening curly bracket and ends with the closing curly bracket. Each style called in needs to end with a semicolon. The last declaration within an item doesn’t need a semicolon, but it’s best to use it in case you plan on adding more items later on, you may forget to add it back in. An example of proper use:

#divname {
width: 40px;
height: 30px;
}

Condensing your stylesheet and putting all declarations for a div on one line is up for debate. I prefer to put each declaration on its own line, I think it’s easier to edit that way, but some may say that it just produces longer code.

Not Using Global Styles

Many things should be styled globally like paragraph and heading styles for text as well as link styles. This will reduce the risk of mistakes and will also cut down on the amount of code in your stylesheet.

Not Using Unique Names for Ids and Classes

It’s very important to choose names that are unique so that it’s easy to edit later on, and easy to identify in your stylesheet. Name your divs specific things like #home-left-column which is better than just #left.

Not Using Shorthand Code

Shorthand code is another way to condense your stylesheet, which is helpful for speeding up user load times as well as finding things when you’re editing later on. Instead of calling in padding-top, -left, -bottom, and -right you can just use:

padding: 5px 10px 0 10px;

Shorthand code can be used for many declarations including: padding, margin, border, and font.

Not Using Shortened Color Declarations

Hex numbers that repeat like #ffffff and #000000 can be condensed to #fff and #000. This is another way to condense your code and keep things short and easy to look at.

Incorrectly Using Positioning

Positioning is tough to understand when you’re first starting out with CSS. Your choices are static, relative, absolute, and fixed. Static is the default option and is positioned according to the normal page flow. A relative item is positioned relative to itself, meaning you can move it up, down, left or right, based on where it would normally sit. Absolute allows you to place an item anywhere on the page, and is the most misused positioning statement. The values you set for it will be relative to the last parent item with relative or absolute, and if there aren’t any, it defaults back to the html tag, allowing you to position it anywhere by declaring top left right or bottom values. Fixed is positioned relative to the browser window, so an item will stay in place if a user has to scroll. Learning how to use positioning correctly is important, but shouldn’t be used excessively. I rarely use these at all in my stylesheets.

Validate

Validating your HTML and CSS files will help in reducing errors and figuring out where a problem might be coming from. Your website may function correctly with some of the common HTML and CSS mistakes, but it doesn’t make it good practice or valid code. The validator will help identify these problems and you’ll be able to adjust the way you code for the future.

More Resources

Many of us are guilty of these HTML and CSS errors, myself included! We can only strive to learn from our mistakes and practice better coding in the future. Cleaning up your code will help you further your coding skills and allow you to create better sites with more functionality for your users.

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

14 Helpful Cheat Sheets for Front-end Web Development

Henry — Tue, 19 Jan 2010 06:44:59 +0000

For web developers and designers, it can be difficult to memorize the syntax for multiple programming languages and frameworks, especially since they are always evolving and growing. This is where cheat sheets come in handy. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Here is a collection of useful cheat sheets specifically for front end web development that will help you with HTML, JavaScript, and CSS.

HTML

HTML 5 Cheat Sheet

HTML 5 Visual Cheat Sheet

(X)HTML Elements and Attributes

HTML Cheat Sheet

HTML5 Canvas Cheat Sheet

CSS

CSS Level 2 Visual Cheat Sheet

CSS 3 Cheat Sheet

CSS Cheat Sheet (V2)

CSS Cheat Sheet

JavaScript

jQuery 1.4 API Cheat Sheet

jQuery 1.4 Cheat Sheet

mootools 1.2 cheat sheet

JavaScript Cheat Sheet

11 Useful Online Tools for Better CSS Development

Henry — Mon, 30 Nov 2009 18:28:29 +0000

Whether you’re a CSS pro or just learning, it’s important to have a good set of tools to speed up and simplify your development. What makes the web so great now, is that many valuable tools can be found online and used inside your browser. Here are 11 online CSS tools that should be a huge help to your CSS development.

Grid Designer

Grid Designer is an easy to use tool that lets you quickly create complex grid layouts.

Drawter

Drawter Beta 2 is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

YAML Builder

The YAML Builder is a tool for visually creating YAML-based CSS layouts. It allows for the setting of basic layout characteristics like the number and positioning of the content columns, as well as the dynamic creation of grid-based layouts by dragging and dropping subtemplates.

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

Format CSS

This tool lets you paste your css into a field and returns a formatted version based on various settings that you specify.

CSS Type Set

CSS Type Set allows you to enter text and then experiment with various settings such as font, font size, color and more to see what your css text will look like.

Clean CSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

YUI CSS Grid Builder

CSS Grid Builder is part of Yahoo!’s YUI Library. It’s a simple interface for Grids customization.

Typetester

Typetester gives you lots of settings to create side-by-side comparisons of on screen text, and then grab the CSS for the one you like.

CSS Frame Generator

CSS Frame Generator allows you to paste your XHTML code into a text area and it converts it into a CSS Frame layout.

W3C CSS Validation Service

If you haven’t heard of the W3C CSS Validation Service, you should start using it. It is a great and easy way to make sure your CSS and XHTML is valid.

10 Tips for Writing Better CSS

MikeSmith — Wed, 11 Nov 2009 09:13:20 +0000

Writing your first piece of css code can seem really weird if you’re used to working with tables, or just haven’t written code before. In this article I want to talk about 10 different ways you can write proper and clean css code as well as streamline the process and ensure you’re getting the job done as quickly and efficiently as possible.

1. Always start with a CSS Reset

Writing CSS code can become a bit mundane when you’re having to write specific code over and over again just to get various browsers to display your layout the same. That is where CSS Reset’s come into play. With industry leaders like Eric Meyer releasing a pretty kick ass css reset stylesheet, there’s really no reason to not get all of your browsers ‘back to zero’ and build off of it. Some people have said that css reset stylesheets aren’t needed (Jonathan Snook being one of them), but once you get used to the reset and what items you’re coding, it becomes much easier to ensure that every browser is displaying items properly.

2. Indent your css rules for easier scanning

When you’ve got 500 lines of css code to sift through, it can become straining on the eyes. So, instead of writing out the css code like this:

.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

You can indent the rules to make scrolling through the file and finding the proper css classes and ID’s easier.

.classname {
	background: #FFF;
	border: 0;
	color: #252525;
	float: left;
	margin: 0;
	padding: 0;
}

3. Comments are your very best friend

In the spirit of keeping your stylesheets clean and easy to read, comments are going to be a great way for you to keep things structured and clean. By commenting out blocks of code, the scanning process we mentioned above becomes another 10X easier because you can scan and look for items such as the header, sidebar, content and footer code because you have each section of code commented like below.

 /********** HEADER code here **********/

Doing this will not only save you time scanning but will be great for your clients when you pass along the code – they’ll be able to find items easier, fix items themselves and not have to email you 4-5 times a week for simple 1-2 minute changes. The benefits of clean css code goes much deeper than making the file look pretty.

4. One Rule = One Line … Multiple Rules = Multiple Lines

Following the simple rule above, you can cut down on the clutter in your css files drastically. Below you will see the two different ways you can write your css code out – some people swear by putting everything on a single line, but I tend to believe in the above mentioned rules: one rule = one line, while multiple rules = multiple lines.

.classname { border: 0; }

.classname {
	background: #FFF;
	border: 0;
	color: #252525;
	float: left;
	margin: 0;
	padding: 0;
}

5. Stay consistant with your code

I’ve not only stayed cosistant in my css styles throughout stylesheets I’ve written, but if you look at the various css code I’ve displayed in this article, you’ll see I have actually stayed consistant with them. It isn’t something you’ll tend to visually notice on a daily basis, but over time you’ll begin to pick up patterns on how you write specific lines of code and it will throw you off if you ever write something different. It makes things harder to find and runs your time up when you could have easily cured the problem by sticking to a specific style of writing for your css stylesheet files.

For instance, if you’re writing everything in blocks of code to separate different items of the page for easy editing, keep with it. Don’t change the way you write your code every time you write a new stylesheet. It’s just not practical.

6. Separate your hacks and conditional elements

Some people will swear against using any css hacks and scream something like “if the user can’t upgrade his browser, to hell with him!” – which we all know is not something everyone is in the position to say. So, writing conditional elements and various css hacks in your files becomes pretty much routine. But the idea that all of it needs to be in one file is wrong (in my opinion). Separating them from your main style.css file will allow you to make edits and adjustments to the hacks and conditional elements easier, without effecting your main css code.

A sample of how to separate your files could be like the code below, which would give you a separate stylesheet if your viewer is using any internet explorer browser less than IE8, along with your main style.css file and a print.css file (make sure you add the proper “” characters at the beginning and end of each line in the code below):

     link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, projection"
     !--[if lt IE 8]
       link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen"
       ![endif]--
       link rel="stylesheet" type="text/css" href="/css/print.css" media="print"

7. Learn (and use) shorthand code

Shorthand css code will allow you to speed up the writing process, cut down on clutter in your stylesheets and will allow you to find things much easier. So, why do so many people still write out their css in a long hand format like this?!?!

.classname {
	margin-left: 1px;
	margin-right: 2px;
	margin-bottom: 4px;
	margin-top: 1px;
}

Writing the above code in shorthand format allow things to look so much cleaner. Shorthand code also follow the clockwise writing format – so each number (as seen below) goes like this: top, right, bottom, left.

.classname { margin: 1px 2px 4px 1px; }

8. Create and use a table of contents

Writing in a table of contents in the beginning of your stylesheet will allow you, as well as anyone else viewing your css file, to find where the specific items in your code are before they even have to scroll. Need to find and edit your content code to change a color of a specific piece of text? Looking at the table of contents shows you that it’s the third header down in the css file. Coupled with the rule from above about adding in commented areas to separate blocks of code, this will help keep your code lean and mean – plus, very easy to edit.

/*****************************************************
1. HEADER code
2. NAVIGATION code
3. CONTENT code
4. SIDEBAR code
5. FOOTER code
*****************************************************/

9. Keep your class and ID names easy to follow

There’s nothing worse than going to edit a piece of code, only to find that they named their css code like this:

.wackyblueline5 { ... }
.leftsidesection { ... }
#bodyleftcurve2 { ... }

Picking the proper naming structure for your css classes and ID’s can help you dig through your stylesheet files as well as your html files, to edit the code. I would recommend sticking with names like this, which keep things clear and easy to understand:

.sidebar-title { ... }
.postwrap { ... }
.main-navigation { ... }

10. Alphabetize your css code for easier reading

This is one tip that I’ve just come to realize is actually worthwhile and one that I’m beginning to use on a daily basis when writing css code. Alphabetizing your rules will allow you to easily jump in, find the proper line of code you need to edit, change it and move on. Check out the code below and see how the beginning letters of each line go in alphabetical order, which allows you to easily scan and find the proper line. Looking for font-size? well, you know where F comes in the alphabet, right? So finding it in these lines of code will be much easier.

.classname {
	border: 1px solid #dedede;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	margin: 48px;
	padding: 0;
	position: relative;
	z-index: 101;
}

What about you? Any tips for us?

I know the readers here are highly skilled so I would like to pass the baton on to you and let you weigh in, in the comments section with what your thoughts are on these tips and also share tips of your own. I’m looking forward to finding out what you think works best. I hope you enjoyed the article and would love if you spread the word through your various social media profiles. Thanks!

About the Author

Mike Smith is a blogger who writes about social media and marketing and he’s a blog designer at Guerrilla.

13 Excellent Open Source Tools for Web Designers

Henry — Mon, 12 Oct 2009 06:43:12 +0000

Open source applications and tools are a great alternative for web designers on a budget. Many open source tools have comparable features to the expensive applications, and are also free. This makes it possible possible for a web designer to have all the tools and applications needed to complete everyday tasks without even spending a cent. In this article you will find 13 of the best open source tools for web designers.

Text Editors

Aptana Studio

Aptana is a complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, along with thousands of additional plugins created by the community.

KompoZer

KompoZer is a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing.

Notepad++

Notepad++ is a source code editor and Notepad replacement that supports several languages. It runs on Windows and is governed by a GPL License.

Firebug

Firebug is a plugin for Firefox that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Quanta Plus

Quanta Plus is a highly stable and feature rich web development environment.

jEdit

jEdit is a cross platform text editor with hundreds of person-years of development behind it.

Web Design Ledger » css

7 Useful Resources to Help You Learn HTML5

10 HTML5 Demos to Make You Forget About Flash

13 Pure CSS Techniques for Creating JavaScript-like Interactions

15 Useful HTML5 Tutorials and Cheat Sheets

Tutorials

Cheat Sheets

12 Excellent CSS3 Button and Menu Techniques

The Most Common HTML and CSS Mistakes to Avoid

HTML Mistakes

Forgetting to Close a Tag

Incorrect DOCTYPE

Improperly nesting tags

Capitalizing tags

Forgetting to open or close quotes

Using Inline Styles

Not Encoding Special Characters

Confusing Classes and Ids

CSS

Forgetting to Close Things Properly

Not Using Global Styles

Not Using Unique Names for Ids and Classes

Not Using Shorthand Code

Not Using Shortened Color Declarations

Incorrectly Using Positioning

Validate

More Resources

About the Author

14 Helpful Cheat Sheets for Front-end Web Development

HTML

CSS

JavaScript

11 Useful Online Tools for Better CSS Development

10 Tips for Writing Better CSS

1. Always start with a CSS Reset

2. Indent your css rules for easier scanning

3. Comments are your very best friend

4. One Rule = One Line … Multiple Rules = Multiple Lines

5. Stay consistant with your code

6. Separate your hacks and conditional elements

7. Learn (and use) shorthand code

8. Create and use a table of contents

9. Keep your class and ID names easy to follow

10. Alphabetize your css code for easier reading

What about you? Any tips for us?

About the Author

13 Excellent Open Source Tools for Web Designers

Text Editors

Graphics Applications

FTP