Using XHTML

HTML5 WTF?

Faster, and More Secure Webfonts

Pro Drupal Development

JavaScript Programming for the Absolute Beginner

 The Elements of Typographic Style Applied to the Web

Foundations of Ajax

Search User Interfaces

Web Style Guide: Basic Design Principles for Creating Web Sites

Using Joomla: Building Powerful and Efficient Web Sites

CSS Cookbook

Forty’s Pocket Guide to SEO

The Design Funnel: A Manifesto for Meaningful Design

Ajax Design Patterns

How To Be Creative

Head first HTML with CSS & XHTML

The Woork Handbook

Ruby on Rails: Up and Running

Browsers And The Web

A Concise Guide to Archiving for Designers

You may also be interested in one of these older posts
20 Awesome Firefox Add-ons For Web Developers
12 Indispensable Adobe AIR Apps for Web Developers
130+ Free SEO Web Tools and Search Engine Optimization Software
List Of Essential PHP Quick References And CheatSheets
10+ Rare WordPress Theme Options Page Tutorials To Get You Started

1. Coderun

CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser.CodeRun Studio can be used instead or alongside your existing desktop IDE

Try Coderun

2. Kodingen

Kodingen started with two brothers (Devrim & Sinan) coming together to give something back to developers community.It is an Online Development Environment, Online Code Editor,cloud coding and Web-based code editor.

Try Kodigen

3. Cloud9ide

Cloud9 is a state-of-the-art IDE that runs in your browser and lives in the cloud, allowing you to run, debug and deploy applications from anywhere, anytime. A complete game-changer that will change the way we develop applications forever.

Try Cloud9ide

4. Amy Editor

Created in 2007 by Petr Krontorád, Amy Editor is an advanced editor with a look and feel of a Mac. Amy Editor features lots of useful options, such as line numbers, syntax highlighting, snippets for more than 20 languages, collaboration, and more.Amy can edit, save and export files. It can also manage projects.

Try Army Editor

5. JSBin

As you can guess, JSBin is an online text editor primarily focused on Javascript. I really love the clean and simple interface. Each code can be tested using a powerful “Preview” feature, and then exported into a text file.Another good thing to note is that JSBin can import popular Javascript frameworks such as jQuery or Mootools, so you can test your js plugins as well.

Try JSBin

6. Bespin

Using HTML5 quite intensively, Bespin is a new project from Mozilla Labs. This online editor is very powerful and has lots of cool options. In order to use Bespin, you have to create an account. Note that Bespin can be downloaded and then embedded in any kind of web project, only by adding two files in your header!

Try Bespin

7. Codeita

Codeita is a powerful, easy to use, cloud-based, web development environment.  It’s a powerful code editor, an advanced svg image editor, and an out of this world project management and collaboration tool. It allows users to code, develop, brainstorm, communicate and then publish projects and files to your web server.

Try Codeita

8. ecoder

ecoder is a simple, web-based code editor, which includes a file browser, file uploader, and tabbed system to allow multiple files to be edited at the same time. using this web-application developers can edit code directly online, real-time syntax highlighting is handled by textarea and keyboard short-cuts lend it the feel of a locally installed application.

Try Ecoder

9. Workspace

Workspace is a online development environment that facilitates the complete management of your Web-based projects. With a syntax highlighting editor built right in, it provides the ability to edit text, PHP, JavaScript, HTML, Java, Perl, SQL and other types of files directly on a remote server. Finding and managing those files is made easy with a cutting-edge file management utility embedded right in the app. With this utility, users can connect to, and manage the files on an arbitrary number of ftp sites simultaneously.

Try Workspace

10. EditPad

Unlike the first few editors featured in this post, EditPad is simple and minimal. No syntax highlighting, no project management…Just a plain page to type your text without any distractions. I’m not a big fan, but this “online notepad” can be a life saver on a particularly slow machine.

Try Editpad

11. 9ne

9ne (Pronounced Nine) is a nice online text editor, based on the well known GNU Emacs. 9ne provides most of the basic Emacs functionalities and currently supports XML and Javascript syntax highlighting modes.

Try 9ne

12. jsvi

JSVi has always been one of my favorite text editors of all times. Why? Because it is powerful, fast, and you’ll find it everywhere: GNU/linux distros, Mac, web servers… Now, you’ll also find Vi online with this implementation called JSVI. Most Vi functions have been implemented into this web-based version.

Try Jsvi

13. Squad

Squad is a web-based collaborative code editor which means you can access it from anywhere and your settings are always with you. No need to install a clunky desktop application.

Try Squad

14. DarkCopy

Have you ever felt distracted when working on a buggy piece of code? If yes, there’s no doubt that you will enjoy DarkCopy. This simple online text editor has limited functions but it provides a dark, clutter-free environment so you can concentrate on the most important: getting things done.

Try Darkcopy

15. ShifEdit

Try Shifedit

Before we look at any code, we’ll start by creating our navigation sprite. If you’re not familiar with using CSS sprites don’t fret, as I will explain how they work and also why they are a more efficient than loading separate images for each link hover.

But first, open up your .psd from last time. For the purpose of this tutorial, we’re going to create a ‘normal’ state and a ‘hover’ state for our sprite. You could also create ‘active’ and ‘down’ states but for simplicity, I’ll stick to two.

Select the navigation (in it’s entirety) and duplicate it, placing the duplicated version below the original.

The top navigation will be our ‘normal’ state and version below will become our ‘hover’ state.

Remove the two navigation bars. Now we’re going to tighten everything and remove any unnecessary white space from between the links. Use the Guides to get all of your links pixel perfect.

When you’re done, you should have something that looks like this:

Next, turn off the background. Crop it down and save as a .png with transparency (unlucky IE6). I’ve called it nav_sprite.png. Save out your navigation bar out separately as a transparent .png too. I’ve called mine nav_bar.png. Place these into a folder called images on your site root.

That’s pretty much it for Photoshop. Next we’ll head over to Dreamweaver (or your favourite text editor).

You’ll first of all need to set up your navigation in a <ul>.

<ul id="your_nav">
<li id="home"><a href="#" title="Home">Home</a></li>
<li id="about"><a href="#" title="About">About</a></li>
<li id="web_design"><a href="#" title="Web Design">Web Design</a></li>
<li id="contact"><a href="#" title="Contact">Contact</a></li>
</ul>

Next the CSS. The sprite works using background-position for each specific link. By placing the links tightly together as we’ve done, we can work out the exact position of each link (to the pixel) using the length of each link. So for example, our Home link is 55px by 27px. The sprites position for Home will be 0 0. The sprites position for our About link will be -55px 0 and the position of the Web Design link will be -55 – the length of the About link and so on and so forth. You can see how this works in the CSS below:

ul#your_nav { width:792px; height:37px; background:url(images/nav_bar.png) no-repeat; position:relative; padding:8px 0 0 8px }
ul#your_nav li { float:left; list-style:none; margin-right:7px }
ul#your_nav li a { height:27px; display:block; text-indent:-99999px; background:url(images/nav_sprite.png) no-repeat }
ul#your_nav li#home a { background-position:0px 0px; width:55px; height:27px }
ul#your_nav li#home a:hover { background-position:0px -27px }
ul#your_nav li#about a { width:64px; background-position:-55px 0 }
ul#your_nav li#about a:hover { background-position:-55px -27px }
ul#your_nav li#web_design a { width:92px; background-position:-119px 0 }
ul#your_nav li#web_design a:hover { background-position:-119px -27px }
ul#your_nav li#contact a { width:73px; background-position:-211px 0 }
ul#your_nav li#contact a:hover { background-position:-211px -27px }

Our hovers will have a negative value in the Y axis. The height of each nav link is 27px so our hover position for each link will be –xx -27px. The text-indent positions the text off the screen. This allows search engines such as see our navigation as real text (in the source) and index our pages. The reason that this method is more efficient than using separate background images for each link; is primarily the faster loading times and fewer http requests. One background image equals one http request whereas multiple images will require several and thus slow page-loading times.

That’s pretty much it for creating a navigation for your web design. Check out the demo and download the entire source files (attached). This navigation could be further enhanced using jQuery to animate a fade on hover. Perhaps this will be covered in a 3rd part!

You may also be interested in one of these older posts
20 Awesome Firefox Add-ons For Web Developers
12 Indispensable Adobe AIR Apps for Web Developers
130+ Free SEO Web Tools and Search Engine Optimization Software
List Of Essential PHP Quick References And Cheat Sheets
10+ Rare WordPress Theme Options Page Tutorials To Get You Started

1. Amaya WYSIWYG HTML editor

The free open source Amaya WYSIWYG HTML editor comes from the World Wide Wed Consortium (W3C). It started as an HTML and Cascading Style Sheets editor but now supports XML and XML applications such as HTML, MathML and Scalable Vector Graphics (SVG). You can both browse and edit web pages with this nifty program, which is especially helpful if you want to cut-paste information from other pages into your own.

2. openWYSIWYG

Finally, a free cross-browser WYSIWYG editor that’s packed with every rich-text editing feature you need to make your content management system that much better. Setting up openWYSIWYG is so easy, you can quickly turn any <textarea> into a powerful WYSIWYG editor with just a few simple lines of code. Packed with every rich text editing feature you need, openWYSIWYG gives you total control over formatting your text. The ultimate <textarea> replacement for your content management system.

3. KompoZer

KompoZer is a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing. KompoZer is designed to be extremely easy to use, making it ideal for non-technical computer users who want to create an attractive, professional-looking web site without needing to know HTML or web coding.

4. Adobe Dreamweaver

Adobe Dreamweaver is a WYSIWYG and text editor for Windows and Macintosh best suited to Professional Web Designers and Professional Web Developers. It costs $399.00. There is a free trial.

5. QWebEditor

QWebEditor is a browser-based HTML editor. Its WYSIWYG feature is perfect for content management system or any web sites require asking users to enter formatted text.It is a DHTML component and easy to be intergrated into your websites. Your users do not need to download a bulky ActiveX control, applets and you do not need to worry about the browser security settings.

6. WYSIWYG Web Builder

The sensational All-In-One Web-Publishing Suite for starters and professionals. It has over 150 new features and improvements and thousands of new options and possibilities.

7. Seamonkey

Web-browser, advanced e-mail, newsgroup and feed client, IRC chat, and HTML editing made simple — all your Internet needs in one application.

8. Rapidweaver

With powerful tools under the hood, yet a beautifully-familiar user interface built especially for Mac OS X Leopard, RapidWeaver is ideal for anyone looking to create a beautiful website. Whether it’s your first or five-hundreth website, RapidWeaver has all the tools you need to quickly create pages you’ll be proud of.

9. Namo WebEditor Professional

Namo WebEditor Professional is an integrated software package that includes 6 applications and tools in one box. One simple installation gives you everything you need to make great Web pages and create stunning graphics.

10. WysiwygPro

WysiwygPro is an advanced online HTML WYSIWYG editor that can be embedded in a web page. Web developers may use it as an alternative to regular textarea tags in all PHP powered web applications including Content Management Systems, Blogs, Discussion Forums and Web Based E-mail Systems.

You may also be interested in one of these older posts
Awesome And Free Fonts For Web Designers
13 Magnificent Free WordPress Portfolio Themes
13 Free Professional Looking WordPress Magazine Style/CMS Themes You Wish You Knew Earlier

1. 5 Techniques to Acquaint You With CSS 3

2. Get Started with CSS 3

3. Six Questions: Eric Meyer on CSS3

4. Take Your Design To The Next Level With CSS3

5. HTML 5 And CSS3 The Techniques You’ll Soon Be Using

6. Introduction To CSS3: Part 1 What is it?

7. CSS3 Selectors Explained

8. Progeressive Enhancement With Css3

9. Liquid Faux With Background Size

10. Structural CSS

11. CSS3 Borders

12. 11 Classic CSS Techniques Made Simple With CSS3

13. CSS @ Ten: The Next Big Thing

14. Introduction to CSS3 By W3C

15. The CSS3 ‘box-sizing’ concept

16. Tooltips with CSS3

17. CSS3 Links Creation and Usage

18. CSS3 Visual Cheat Sheet

19. Multiple Backgrounds (CSS3)

20. CSS3 Multiple Columns

21. Semantic Code: Put More In Get More Out

22. Stay on: target

23. CSS Text Shadows And Background Sizing

24. A Mock-up Interface Using CSS3 Colour

25. The fundamental problems with CSS3

I hope you find these resources valuable. If I’ve missed any of the links, please don’t hesitate to comment.

HTML & XHTML Tag Quick Reference (PDF)

HTML/XHTML Character Entities

XHTML Character Entity Reference (HTML)

HTML Help Sheet

HTML Cheat Sheet (PDF)

XHTML Cheat Sheet v. 1.03 – PDF