As a web designer, there are plenty of different web design standards one must master. The two most important in the industry today are HTML and CSS. What are these methods all about and how much time and money will you need to invest in order to learn them?

What is HTML?

Since the early days of web design, HTML has been the standard for professional websites. It stands for Hypertext Markup Language and can be quite confusing to someone who has no experience using it. HTML is the language, or code, used to edit and position the text, images, frames and other web page elements. If you go to your web browser and select View and then Source – the code used to design that website is available for anyone to see.

Those who have used HTML will tell you that it is not difficult to learn. There are a few basic tags (codes) a designer has to learn and a simple webpage is at their fingertips. The more complex the HTML, the more you can do with a site.

Efforts have been made to dumb down the process even further so that anyone, even those who have no knowledge of HTML, can create their own website. These are typically called WYSIWYG (What you see if what you get) editors. They allow you to create a webpage without using code and the editor assumes what HTML you need and does the work for you. Some software programs now include an option to convert your document to HTML. These are great tools for newbies. Unfortunately, the processes of guessing what code you need breed mistakes and errors in design that can lead to further frustration.

What is CSS

CSS is a newer animal and is not as familiar to beginning web designers as HTML. CSS was created to allow designers to have even more creativity and control over their designs. Today there is more than just one type of Internet browser to design for and this can be tricky and time consuming for HTML designers. These saves users time, effort and most likely money when they are creating sites. Also, CSS encourages less effort by allowing designers to create style sheets. This means when an edit is made to one page, all other affected changes are automatically made. This keeps designers from having to make multiple edits for large, detailed websites.

HTML vs CSS

CSS is not really taking the place of HTML. It is generally used as an enhancement, not a substitute. HTML is still the perfect type of coding for the main structure of a site.

CSS excels when it comes to how a webpage will look. The outward appearance including backgrounds, colors, content and image placement can all be handled by CSS. Anyone who is familiar with the Microsoft Office version of style sheets has a good handle on the purpose of CSS.

While a webpage can certainly be accomplished still only using HTML, CSS allows designers to do things like set different page margins for all sides of a page, overlap words, better position page elements, and set a font for a whole table instead of just pieces. These make all seem like minor adjustments but these CSS tricks free up time for designers to worry more about overall layout, design and navigation.

Training

There are plenty of places where new designers can go to learn both HTML and CSS. If you are a manual type of student, the library has an abundance of tutorial manuals for these techniques. Any establishment that teaches computers classes will more than likely include these basic web approaches as well for the visual learners.

Of course, many a web designer learned their craft by simply jumping in and messing around. If you have the discipline, this hands-on method of learning is not only effective, but free.

With the popularity of today’s world wide web, it seems like everyone is designing a webpage these days. From the free online editors to full blown ecommerce Internet giants, there is a market and need for web design that is not going away any time soon. Whether you decide to take it slow and target small businesses or get serious and starts designing for large corporations, design fundamentals are the place to start your journey.

You can leave your thoughts, tips and insights in the comment section below, or you can leave your answer on the original question on Answers here: CSS validation, How Important Is It

This question was originally asked by Ben G.

Here is the best answer, as voted by our users, so far:

So, what do you think, how important is CSS validation?

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm with each block (DIV) defined with a margin of 1 square (28px) from the next block.
The Square Grid

FEM CSS Framework

The FEM CSS Framework is a 960px width 12 column grid system. It is based on the 960 Grid System, but with a twist in its philosophy, making it more flexible and faster to play with boxes.
FEM CSS Framework

Formalize CSS

Formalize CSS is a useful framework for giving your forms a cross-browser uniformity.
Formalize CSS

By Paul Andrew (Speckyboyand speckyboy@twitter).

Phono – jQuery Phone Plugin

Phono is a simple JQuery plugin and JavaScript library that turns any web browser into a phone; capable of making phone calls and sending instant messages. You can even connect to SIP clients; all with a simple unified API.
Phono – jQuery Phone Plugin

Wijmo – jQuery UI Widgets

Wijmo is a complete kit of over 30 jQuery UI Widgets. It is an extremely dangerous mixture of jQuery, CSS3, SVG, and HTML5 that when combined become an unstoppable force on the web.
Wijmo – jQuery UI Widgets

SlideNote – A jQuery Plugin For Sliding Notifications

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application.
SlideNote – A jQuery Plugin For Sliding Notifications

IMGr – jQuery Image Rounder

IMGr is a jQuery plugin for rounding image corners. The script utilizes CSS3 in modern web browsers, and VML in Internet Explorer 8 and below.
IMGr – jQuery Image Rounder

By Paul Andrew (Speckyboyand speckyboy@twitter).

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block. It aims to cut down on development time and help you create beautiful-structured websites.
The Square Grid ?

Jo – HTML5 Mobile App Framework

Jo is a new and lightweight JavaScript framework designed for HTML5 apps.
Jo – HTML5 Mobile App Framework ?

Frame Box – Lightweight Tool for Creating Mockups

Frame Box – Lightweight Tool for Creating Mockups ?

Ultimate CSS Gradient Generator

HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects. This easy to use copy-and-paste tool gives you complete control when creating your CSS3 gradient.
Ultimate CSS Gradient Generator ?

By Paul Andrew (Speckyboyand speckyboy@twitter).

Quovolver – a simple jQuery plugin for revolving quotes

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.
Quovolver – a simple jQuery plugin for revolving quotes

Gridulator – Make pixel grids, lickety-split

Tell Gridulator your layout width and the number of columns you want, and it’ll spit back all the possible grids that have nice, round integers. Just the thing for pixel-based design folk. There are inline previews, courtesy of the canvas element, and when you’re all set Gridulator can crank out full-size PNGs for you, ready for use in your CSS, Photoshop docs, or what have you.
Gridulator – Make pixel grids, lickety-split

Hello, want to kill some time?

Hello, want to kill some time?

By Paul Andrew (Speckyboyand speckyboy@twitter).

Schizo Octopus Website Template

This template has a fixed layout one page portfolio template with two columns with the download containing the Photoshop Files, XHML/CSS Coded template and also includes documentation.
Free for personal or commercial use. No need to credit.
Schizo Octopus Website Template

CSS Heaven 2

CSS Heaven 2 is a free CSS Template suitable for small business websites and blogs.
This template is released under GPL License.
CSS Heaven 2

Euphoria

Euphoria has been licensed under a Creative Commons Attribution 3.0.
Euphoria

Template 6

This template could be used as a corporate website & blog, it contains: Two template pages , valid HTML & CSS and all of the PSD files.
Template 6

SilverBlog

SilverBlog is a minimal template suitable for blog designs that has been built with HTML5 and CSS.
It has been released under GNU GPL license.
SilverBlog

By Paul Andrew (Speckyboyand speckyboy@twitter).

You can leave your thoughts, tips or solutions in the comment section below, or you can leave your answer on the original question on Answers here: What’s the Best Solution for Supporting iPhones?

This question was originally asked by Pablo G.

Here is the best answer, as voted by our users, so far:
From Devone:

From Andrew Miller:

So, what are your thoughts, tips or solutions for supporting the iPhone?

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

WordPress Snippets

The idea behind WordPress Snippets is simple; to provide small snippets of code, helping you to create a magic WordPress Theme. The original documentation of WordPress is excellent, but not as straight forward as you may want. Straight forward is the lead word for WP Snippets. No talk, just Snippets.
WordPress Snippets

10 useful new WordPress hacks

This WP hack list, from CatsWhoCode, has a whole of lot fresh new snippets to help with WordPress dev. Want to remove comments autolinks? Or, are you looking for a hack that will display a Twitter style “time ago” date? If so, you will find the answers in this post.
10 useful new WordPress hacks

10 Useful WordPress Search Code Snippets

In this post will find 10 really useful code snippets that will help improve your WordPress Search functionality.
10 Useful WordPress Search Code Snippets

By Paul Andrew (Speckyboyand speckyboy@twitter).

SIDEWAYS – jQuery fullscreen image gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery and some simple CSS.
SIDEWAYS – jQuery fullscreen image gallery

Full Page Image Gallery with jQuery

In this tutorial you can learn how to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background.
Full Page Image Gallery with jQuery

Orbit: A Slick jQuery Image Slider Plugin

Orbit is a killer jQuery plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.
Orbit: A Slick jQuery Image Slider Plugin

By Paul Andrew (Speckyboyand speckyboy@twitter).