Practical online helpers for CMS beginners

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.