As a budding web developer, you don't have to search very long to find the right tool to make your web presence known. Many useful tools for designing and testing websites are freely available on the web. I'll look at six of them here.

Served

When working with a popular content management systems (CMSs), such as WordPress, Drupal, or Serendipity, you'll notice no shortage of appealing templates for web design. Each project page usually has a collection developed by the community. In the WordPress Themes directory [1], for example, you can choose from more than 2,500 WordPress templates. Even if you lack in-depth knowledge of web development, you can build an attractive website, although problems may still get in the way. Often, the biggest hurdle is correctly referencing stylesheet elements of the theme. For example, should you write bsp {…} , .bsp {…} , #bsp {…} , or .bsp p {…} in style.css , and what do each refer to?

If you're reluctant to refer to Selfhtml.org to read about CSS selectors, then the CSS Diner [2] can give you some helpful hints about cascading style sheets. The little game has you finding the right selector for each of the 26 levels. Enter your answer in the CSS Editor on the left. The HTML Viewer to the right has the HTML code for the items on the table you need to reference in your answer (Figure 1).

Figure 1: As a web beginner, you first need to understand the essentials. The CSS Diner will help you with CSS selectors.

JavaScript Tray

Today's web development combines HTML, CSS, and JavaScript. The HTML code describes only the content; the cascading style sheets define the appearance on the website, and JavaScript lets you integrate dynamic elements. The interaction of these three components may prove tough for budding webmasters, even if you're just applying an existing template. Getting started, it's important to test the different techniques together. With JS Bin [3], this process is easy.

The JS Bin interface (Figure 2) consists of HTML , CSS , JavaScript , Console , and Output panels that you can switch on and off in the menu bar. The panels other than Console and Output have entry fields. The Output shows the results of your entries right away. This control layout was adapted by many similar services, although the arrangement and number of panels differ. The menu bar at the top has a few other settings. Here you can save your bin or set a milestone for archiving. With the Share menu, you can share your bin or allow the code to be embedded in another website. You also have the option of integrating popular frameworks, such as jQuery, MooTools, YUI, and many others.

Figure 2: You can develop a website right in the browser with a web-based environment such as JS Bin.

Expressiveness

Wikipedia describes a regular expression as "in theoretical computer science… a sequence of characters that forms a search pattern, mainly for use in pattern matching with strings…". Despite the computer lingo, the next time you need to select a bunch of files based on their names and extensions, use a simple regular expression or, in short, a regex. Regular expressions don't just show up in scripts and programs. Web developers also use them occasionally. Sometimes, you need to find certain web posts in PHP; others times, you need to select certain elements in CSS and assign styles to them. RegExr [4] can help you understand, create, and test regexes (Figure 3).

Figure 3: Mastering regular expressions is a part of programming and web development. The RegExr tool helps beginning web designers understand regexes.

With RegExr, you can test regex queries on text in a web interface [4]. RegExr highlights the text if the query is successful. Hovering over the text shows the matching group in the expression. Alternatively, you can research examples, look at the cheatsheet, or reference the selections on the left.

Beautification

Developing a custom template for a CMS-supported homepage is usually quite simple from the numerous templates available. You might want to vary the font, alter the spacing between paragraphs, or switch colors – simple changes to the CSS file of the template can do that. Often, the result, however, is that the CSS code starts to build up considerably, the load time increases (albeit not too much because of the small size of the text files), and the CSS file turns into an unwieldy monster.

Code Beautify [4] can help you slim down the CSS code and make it clearer and easier to understand. It also works for other types of code, such as HTML, JavaScript, C#, and SQL (Figure 4). Just copy the questionable code into the web editor [5] or use the open button to load it from your files and click Beautify . Pressing Minify removes unnecessary characters for browser display, such as breaks, indents, and comments. This process reduces code readability but also load time.

Figure 4: Code Beautify cleans up CSS code and, if desired, reduces it to its bare essentials.

Adaptability

Because of the variety of display devices, you should design your web pages to work well with any screen size. In web developer jargon, this is called responsive or reactive web design. Many templates for various CMSs already integrate this concept. Changing a web page therefore requires testing it with as many different resolutions as possible. The browser-independent Viewport Resizer bookmarklet may help with this. You can activate the Viewport Resizer either by clicking a button on the website [6] or by adding the bookmarklet to the bookmarks of your browser and using it there. The resizer opens a small icon bar at the top of your webpage. You can then choose the display size for a variety of devices. Dragging the handles on the display area or changing the Customize setting changes the display size (Figure 5).

Figure 5: Use the Viewport Resizer bookmarklet to test display sizes for your web page on various devices.

Alignment

When designing your website, you will want to pay attention not only to the positioning of text blocks, widgets, and images, but also to typography. A well-designed website uses appropriate and legible fonts and varies font sizes and spacings for headings, subheadings, and scrolling text. With the Gridlover tool [7], you can create a text grid with an easy click of the mouse (Figure 6). Use the sliders at the top to test the font size, line height, and scale factor. Clicking Styles displays the CSS code based on your choices, and you can integrate the code into your project. The Content button displays the greeked text as HTML that you can then copy as needed. l

Figure 6: Gridlover creates a CSS layout based on your choices of font size, line height, etc.