If you are thinking about pursuing web design as either a career or a hobby, you must be able to do more than simply design a pretty page. Professional web designers are experts in programming and coding as well. The most talented web designers are those that can adequately balance both their creative and artistic sides with their love of technical coding.

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.

As a starter or a seasoned web developer, we usually tend to skip out on some great practices that we should be using merely because we have never heard about them. To reduce this gap of missing goodies, we cover several practices no developer should live without.

Doctype Declaration

Many do it, others choose to not. However, it is in your best interest to declare the doctype in your HTML files for better standards compliance. Browsers usually have their own ways to fix errors you accidentally or unknowingly left in to get the HTML better interpreted. However, as with most browsers, they all have different ways to interpret things and thus, when it comes to individual browsers trying to fix or “patch” your errors on the fly, things start to get messy and your website will appear different across these different browsers and platforms.

Therefore, by declaring the doctype, you force these browsers to enter standards compliance mode, which cancels out their correction systems. With this, you can easily locate the errors you have made and be able to fix them to get your website to look and work the same across many browsers and platforms. Think of the doctype as a keycard to open all the doors in a building versus a key that may or may not open a few. You would definitely choose the keycard that opens all the doors rather than a key that may or may not work, the same applies to declaring the doctype so definitely use it, you will be glad you did.

Meta Description Attribute

Many search engine optimization radicals always seem to deter us from using the meta description attribute with the argument that search engines do not use them anymore. Actually, they do, but if they are not available, they will use other means to formulate a description about your website. Therefore, as a good practice, always include a meta description attribute with a great description of the website as this is what search engines use to formulate that description right below your title when you search for your website.

To get back to the search engine optimization radicals, they do have a point, especially for those who misuse the meta description attribute. Search engine bots are getting smarter by the day and can detect whether you deliberately misused the attribute or not. Therefore, use it as intended, as this is a gold mind for HTML as well as the key to improved search engine optimization.

Footer Content

This HTML practice is a bit subjective however very useful and vital to keeping your website running smoothly. We all have landed on a website that takes a good several seconds to a minute to load anything that is viewable due to the cause of external scripts bogging down on the load time. The way HTML is loaded is in sequential form, from top to bottom, line after line. What this means is, it will halt on a line of code until it is fully interpreted or executed, and in this case, it will wait until the external JavaScript file is fully loaded before proceeding on to the next line.

Therefore, stick this JavaScript code in the footer to have the content that is important to load first. For example, if you have your analytics code such as Google analytics, stick it in the footer right before the end of your body tag so that your website can load the content quicker and not bog down until it reaches the end of your content where users do not have to actually wait for it to load.

The reason this idea is subjective is that some may disagree with the idea of taking JavaScript code outside of the head tags, however, in such situations, it is a better practice to take upon as it is what keeps your website running more efficiently in such a case.

Using Unordered Lists for Navigation Bits

Many developers whip up all sorts of concoctions to create a navigation bit. So instead of using the accepted and preferred markup they decide to use a set of divs and all sorts to achieve similar results. This technique is not only inefficient, but it is also very tedious and redundant. Therefore, use unordered lists as a basis for your navigations as the code is simple, the functionality is pretty much completed for you already, and all you need to do is give it some style. Remember, reinventing the wheel is not something you want to do, let alone reinventing it and losing efficiency.

Leaving Your Front Door Open

Whenever you are in your home, out of your home, or on your way home, you always have your doors closed and locked. I mean, who would want to leave their home doors unlocked and open when they are not around? Other than the neighbor I once had who left their front door wide open at night, we all know it is a good practice to keep our windows and doors closed when we are not home. Similarly, always close the tags you open for clean and validated markup.

I have seen countless tutorials out there that are available to teach new developers how to code HTML and they almost always leave their tags open such as image tags or break tags. This not only affects the new generation of developers, but it is a terrible practice. Browsers will always attempt to close them for you causing errors and unwanted results, so save yourself from bad practices, and make closing the HTML tags a habit as you do with closing your doors when you leave your home.

Validate Your Code

Validating your code helps you keep your code clean from nasty errors you may have missed or unintentionally thrown in. While having valid code does not indicate you are a great developer or not, it does help eliminate possible errors you may find in the future within many different browsers and platforms. It additionally throws a good image about your practices for your portfolio for future hires.

It is always surprising how many fresh, innovative and always useful tools and resources appear from week-to-week from within the web design community. In this weeks design news round-up we take a look at four more cool and free new apps that may help you with your next web project.

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).

In today’s news round-up we have a small, yet cool, selection of useful tools, apps and resources for web designers. First up, we have a wonderfully useful jQuery plugin Quovolver) for displaying quotes in a stylish way, next up we have a small, yet very handy app for generating a grid (Gridulator) and finally a fun time-killing bookmarklet that can destroy everything on a web page.

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).

One of the most sought after resources for a web designer are high quality and, preferably, free CSS/XHTML/HTML web templates. And this exactly what we have for you in today news round-up: 5 New High Quality CSS and HTML Templates.

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).

There is no topic more currently relevant than designing a web site that is compatible with the iPhone (or, any other mobile device). With the popularity of smart-phones it is now a must for ALL web sites to be ‘mobile-friendly’. This was a topic that was recently brought up on Answers, discussing the best solution for supporting the iPhone. So, what do you think? Do you have a simple solution, tip or answer?

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.

Slideshows and image galleries are all the rage at the moment, there are loads of new techniques, plugins and tutorials cropping up everywhere. In this design news round-up we have chosen our favorites from recent weeks.

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).

One of the most difficult tasks web designers have to tackle is ensuring that all web pages work consistently across all web browsers. As the most of you will already know, this is no easy task. And recently, on Design Reviver Answers, this topic was brought up in discussion, and we would like to share with you some of the tips that were offered from our readers, and we would love to hear about any more you may have.

You can leave your tips and thoughts in the comment section below, or you can leave your answer on the original question on Answers here: What’s the Most Effective Way to Make Sure That My HTML/CSS Works On All Browsers?

This question was originally asked by Themans.

Our favorite answer comes from Handrus Nogueira:

The answer came from Trevor:

This answers came from Scunliffe:

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 arrival of HTML5 and CSS3 has given web designers a major sense of excitement by offering a broader range of options, creative opportunities and shortcuts for designing a web page. We could talk about all of these new features endlessly, instead, to keep things simple, we have highlighted four web tutorials that make use of HTML5 and CSS3 perfectly and that demonstrate effectively the potential power of these fantastic technologies.

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Coding a Stylish Blog Design Layout in HTML & CSS

This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.
Coding a Stylish Blog Design Layout in HTML & CSS

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

The aim of this tutorial is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer), coded through two new great technologies, HTML 5 and CSS3.
Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Build a HTML5/CSS3 Website Layout Without Images

Build a HTML5/CSS3 Website Layout Without Images

By Paul Andrew (Speckyboyand speckyboy@twitter).

For today’s design news we have highlighted some fresh tools and resources for all you web and app designers out there. There are a couple of tools to help with any CSS3 and HTML5 development issues you may have, there is a marvelous new technique for styling buttons, and finally, and perhaps the coolest of all,some time saving iPad actions for Photoshop.

BonBon Buttons – Sweet CSS3 buttons

These sexy looking flexible CSS3 buttons have been styled with the most minimalistic markup as possible.
BonBon Buttons – Sweet CSS3 buttons

iPad Actions for Photoshop

These Photoshop Actions will allow any UX/UI designer or App developer to quickly create a gorgeous rendering of their app as it would appear on an Apple iPad. All that is required on your end is your final designs (and a copy of Photoshop, obviously).
iPad Actions for Photoshop

Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

HTML5/CSS3 Cheatsheet

Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (mid-2010) usable across a number of web browsers, chief among them Firefox, Safari, Chrome and Opera.
HTML5/CSS3 Cheatsheet

By Paul Andrew (Speckyboyand speckyboy@twitter).