Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I’m going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let’s get going!

Step 1 - Download the 960 Grid System Template The designs I create are nearly all based on the 960 Grid System. So, before we begin we need to download the grid system Photoshop templates. You can find them on the 960.gs official website. Simply unpack the zip file and look for PSD templates. You will see that there are two different types of templates: one is 12_col and the other one is 16_col. The difference between these two are, as the name suggests, one is made with 12 columns and the other one with 16 columns. To explain it a bit more, if you have 3 boxes in your design you would choose the 12_col grid, because 12 is divisable by 3; or if you have 4 boxes in your design, you would choose either 12_col or 16_col grid because 12 and 16 are divisable by 4. If you follow this tutorial, you will see this in action. Step 2 - Defining the Structure

Before we open our PSD grid template and begin drawing, we first need to define the structure of our site. This is a bit more of a complicated structure because we have a layout inside a layout. You can see this exemplified in the image above. Step 3

After we’ve defined our site structure we’re ready to move on. Open your 16_col.psd template. Go to Image > Canvas size . Set the canvas to 1200px wide and 1700px high. Set the background color to #ffffff. Step 4

Now pick the Rectangle Tool and draw in a rectangle the full canvas width and about 80px high. Fill it with the color #dddddd. Step 5

Create a new layer above the rectangle and set Layer mode to Overlay. Ctrl+click the rectangle layer. Now the rectangle will be selected. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, like shown on the image. This way you create a nice, subtle light effect. Additionally you can link these two layers. Step 6

New layer. Choose the Rectangle tool again and draw in a thin dark grey rectangle, as shown in the image. Step 7

With the Rectangle tool selected, draw in a big box around 500px underneath the top rectangle. Make it 575px high and give it a Linear Gradient overlay from #d2d2d0 to #ffffff, direction -90, Scale 100%.

Step 8

Now we are going to create the same light effect as described in Step 5. We will be using this technique a lot; so next time I will just refer you to Step 5 for the effect.

Create a new layer above all the current layers. Ctrl+click the big rectangle. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, as shown in the image. Step 9

Create a new layer and draw in a big rectangle about 400px high. This one is used for our header. Fill it with a nice blue gradient from #2787b7 to #258fcd. See how subtle the color change is?

Step 10

Add a dark blue 1px line on the bottom of the header box, apply the Drop shadow effect. For drop shadow use Blend mode: Multiply, Opacity: 65%, Angle: -90, Distance: 1px and Size: 6px. Next, create a new layer above and draw another 1px white line under the dark blue one. This way we create sharp edges for our content box. Basically you can apply this border technique on every box in your design just with different colors. Step 11

Create a new layer, and with the Rectangle Tool, draw a 50px high rectangle in the top part of the canvas, just as shown in the image. This will be used for our navigation.

Apply a Drop shadow. Use the values shown in the image. Step 12

Time for the navigation. Use the Rounded Rectangle Tool and set the radius to 5px. Draw a rectangle, fill it with #f6a836, and apply the following effects:

Inner Shadow - color: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px. Inner glow - Blend mode: normal, color: #ffffff, Size: 4px. Everything else leave default. Stroke - Size: 1px, Position: inside, color: #ce7e01.

Now select the rectangle with Ctrl+click. Go to Select > Modify > Contract and enter 1px.

Create a new layer above, set the Blend mode to Overlay and create the same effect described in the Step 5 using a smaller brush size this time. Then add the navigation text. I used Arial for navigation links, all caps and Antialias set to “none”. Step 13

Now let’s create the search box. With the Rounded Rectangle Tool, radius 5px, create a search box positioned on the right side of the grid layout and in the middle of the top gray stripe from Step 4. Add these layer styles:

Inner Shadow - color: #000000, Blend mode: Multiply, Opacity: 9%, Angle: 90*, Distance: 0px, Size: 6px. Stroke - Size: 1px, Position: inside, color: #dfdfdf.

I added the “search” text and a light gray “GO” button. This is how it should look.

So far we have a lot of layers and need to organize things a bit so we will create a new Layer folder and name it “search”. Select all layers that make the search field and just Click + drag inside the new folder. Later we’re going to organize other content inside the folders so we have a nice organized layer palette. Step 14

Now create a new layer and draw a “Sign Up” button the same way we created the search field - just half the width. Place it under the search field in the middle of the navigation stripe.

Again we’re creating the effect from Step 5.

Use a smaller soft brush size. In this case it was 45px. Step 15

After adding the logo and the Tagline this is how our site should look like now. Step 16

Now we’re coming back to our layer organization mentioned a few steps earlier. Create a new empty layer folder and name it “top_bar”. Move all graphics from the top of the layout inside this folder (logo, tagline, search field, sign up button, navigation and backgrounds).

Create another empty layer folder and name it “header”. This is where we will put our header graphics. This is how it should look. Step 17

Our header looks a bit plain right now so we’re going to add the same light effect everywhere else on the site. Select the header box (blue). Create a new empty layer above and set the mode to Overlay.

Pick a large soft brush 600px, color #ffffff and click a few times in the area under the navigation. Furthermore, to gain more depth, we can switch the color to black and do the same thing just in the bottom part of the header. Give it a try! Step 18

In this step I will explain to you how I created the reflection for the header images. Take two images of your choice, I used Safari screenshots of my two other templates, scale one down and place it behind the bigger one. Copy both layers, and with the Free Transform Tool, flip the first image and then the other one. Shift both images a few pixels down. Now make a selection from outside the bottom part to middle of the first flipped image with the Rectangular Marquee Tool. Go to Select > Modify > Feather and type 30px or more. You should have a selection similar to the shown in the image. Press the delete key a few times and you will create a nice faded reflection from the original image. Repeat this step for the second image.

Now to make those two images stand out a bit, create a new layer and set the mode to Overlay. Create the effect described in Step 5.

This is how our header should look after adding a nice tagline and some buttons. Don’t forget to put all these graphics inside the “header” layer folder to keep things organized here
Step 19

If you look at the final image preview, you can see that we have nice tabs in the content area. In order to create these tabs we’ll need to perform a few extra steps, but it’s definitely worth it. First, create a large rectangle shape with the Rounded Rectangle Tool. Make it 70px high and a radius of 10px or more if you wish. Now we have to get rid of the bottom radius and make a perfect corner out of it. Pick the Direct Selection Tool and click on the shape path. Click the vertical point and drag it down while holding the Shift key until it reaches the same level with the horizontal axis. So far so good but it’s still deformed. You see the little handle. Click on it and move it upwards to the point of the path.

Now we have created a perfect corner. This is how it should look. Repeat this step for the right bottom corner. Step 20

Pick the Line tool and set it to 1px. Step 21

Draw in gray separators while holding the Shift key. Step 22

Place some icons, headings, and a description for each tab. I used Ray Cheung icons available from - WebAppers.com. Usually one tab is always active and the others are inactive. To make this clear in our design, we need to find a way to accomplish this. I desaturated the other icons and reduced the opacity for the headings and text while keeping the first active tab colorful and bright. Step 23

To make the active tab more obvious, we’re going to give it a faded white background. To do this first select the whole object and then subtract from the selection to get only the first tab selected.

This is what your selection should look like.

With a smaller soft brush, paint in a white background. Step 24

Add the shadow. Create a dark gray rectangle behind the tabs, as shown in the image.

Add a vector mask by clicking the little icon in the bottom of the layer palette.

Set the color to black, pick a large soft brush, and start deleting parts of the rectangle. As a result, we get a nice fake shadow effect behind our tabs.

Finaly the attention to detail. Draw in a 1px gray line on the bottom of the tabs. Mask the layer again like described earlier and with a big soft brush delete the left and right end of the line. Now we get a nicely faded line that follows our shadow behind the tabs.

This is how our tabs should look. Step 25

It’s time to design the content for our first tab. We need a featured design image, a nice heading and some text. First we will create the featured image. I thought that it would be nice to break the edginess of the design by creating a nice stacked photos effect for our featured design image. To do this, draw a white rectangle with a 1px light gray border, and a very subtle drop shadow effect.

Now copy that layer and rotate it slightly with the Free Transform Tool. Do this one more time.

Import your featured image and place it over the white rectangles. Don’t worry if the image is flowing outside the boxes, we will fix that. Make a selection from the top rectangle, go to Select > Modify > Contract and insert 5px. With the featured image layer selected click the Quick Mask icon on the bottom of our layer palette. You will get nicely bordered image effect like shown in the image here.

This is how your layer order should look like. Step 26

Don’t forget to keep things organized. So create more layer folders and organize your palette. This is how I have done it.

By adding a nice heading, some text, and bullet lists, our web design work is finished. Let’s move on.

And again some layer organization. Step 27: Testimonials

I thought this one should be huge; so I’ve put this in a big box right after the main section. First draw a big light gray rectangle about 220px high. Give it a 1px gray border.

Then draw in another brighter rectangle by 10px smaller on all sides. Also add a 1px light gray border.

Finally add some text and we’re done! Step 28

It’s time for the footer. Draw a big 400px high, dark gray rectangle. Step 29

Add some light effect the same way as described in Step 5. Step 30

Next, draw a 10px high rectangle above the footer and add some subtle effect by adding two more lines on top and bottom like shown in the image. Step 31

Create the very bottom part where the repeated navigation will be placed. You can copy the rectangle from the top where the navigation is placed, move it down and make it about 40px high. Place it at the very bottom of your canvas. Please note that you may need to expand your canvas at this point so that all your graphics fit. If you need to do that, then go to Image > Canvas size and set the height to fit the entire layout. Step 32

Attention to detail again. Add a 1px white line above the footer navigation box to give it a nice border effect. Step 33

Add some footer content and separate it nicely within your grid. Step 34

Finally organize all your layers inside the layer folders. This is how I’ve done it. The Design

So there we go, the final design, with a couple of variations for different pages. The final PSD designs are, of course, on sale at ThemeForest.net. Final Thoughts I hope you have enjoyed this tutorial and have learned a few new techniques. Now, it’s your turn to create more great designs. Remember, with attention to detail you, will be able to design beautiful websites with just two or three Photoshop tools. What do you think?

Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

An overlooked aspect of websites is the formatting of HTML and CSS documents. This affects validation, SEO, and visual ease of use. Visual ease of use is the last thing most authors tend to keep in mind, but it’s still very important. If you’re building a template for a client, or to sell on ThemeForest, it is important that it’s visually formatted properly. Here are some examples of well formatted HTML and CSS. HTML Use the Strict DOCTYPE (DTD) whenever possible. If you’re beginning a new project, don’t use Transitional. You won’t be using tables for layout; so Transitional isn’t necessary, and the Strict DTD is up to standards.

You’ll notice that I’ve moved the meta http-equiv charset above the title. The title should go above everything else and W3C even puts this meta tag below the title in their example template. This meta tag however, should be above the title so that the browser knows what charset it’s working with before reading any other content to be displayed (such as the title).

Encoded Characters Make sure you use HTML encoded characters, including URL’s.

Alt Tags Make sure you’re using the “alt” tag in your images. The “alt” tag stands for alternative text and is displayed if your image is unavailable; it’s used by search engines for image descriptions and accessibility.

Properly Nest Tags Make sure your tags are properly nested. Inline elements, for things like links, should go within block elements - such as headings.

Tags should also be closed in the order they are opened as well as contained properly.

External Assets Make sure that your CSS and JavaScript is external. Try to keep your HTML files simple and free of any unnecessary code. For JavaScript, it isn’t as big of a deal - especially for a small block of code - but if it’s becoming complicated, just put it in an external .js file. Also make sure that your JavaScript files are linked after your CSS files. You want your styles loading before your JavaScript runs. * Manager’s Note: If possible, consider placing your Javascript file just before the closing body tag.

Indentation Indent your markup so that it’s easy to navigate and read. When other people look over your files, it can be much more work to navigate through markup that has no indentation. Your goal should be to make it as easy as possible for whoever may be editing or reading your markup. This is a major pet peeve of mine as I typically find myself spending far too much time fixing poorly formatted markup from someone else’s project.

Commenting Use HTML comments to indicate important notes, sections, or the end of an element. At first, the extra comments appear to clutter the basic markup, but once you load in all of the content, these comments can be a major time saver and help others who may edit the files later.

Markup Order Place your markup in a logical order in relation to the design. If your sidebar is on the right and your main content is on the left in your layout, put the markup in that order.

Validate Your Files Validate your files! Okay, this isn’t a formatting tip but this seems to be forgotten far too often. A store doesn’t sell products without quality assurance; so why would you sell your work (the files you created) without double checking to make sure you’ve done it correctly?

http://validator.w3.org http://jigsaw.w3.org/css-validator/

CSS Just as you would with HTML, use CSS comments to indicate important notes and sections. You might also want to separate your CSS pertaining to layout from your typography. For simple sites, this may not be necessary, but when you begin getting into more complicated sites, it can be a huge time saver.

There are several ways to format CSS; much of it comes down to preference. When I work with CSS files, I use the majority of the width of my screen - so I prefer single-line formatting. Many others prefer multi-line or a cross between the two. Many applications have built in features or plugins that allow you to change the formatting of existing CSS documents with relative ease. Here are some examples of the formatting types which also include proper indentation. Single-Line This is single line formatting (what I prefer). When you use shorthand CSS this method of formatting works out quite nicely I think.

Multi-Line This is multi-line formatting.

Mixed This is a cross between multi-line and single line formatting. The short rules are on a single line while the long rules are on multiple lines.

Short-Hand CSS Use shorthand CSS to keep your CSS slim and clean. The first example is normal CSS and as you can tell, it takes up a lot of space. The second example is the shorthand version of the first CSS example. Then there are three more examples showing different options. The first, on line 77, means a margin of 10px on all sides. The second, on line 78, means a margin of 10px on the top and bottom but 15px on the left and right. The last one, on line 79, means a margin of 10px on top, 15px on the left and the right, then 12px on the bottom. This rule can be applied to many more CSS rules as well. If you’re not familiar with it, set aside some time and learn, because it will greatly reduce your CSS bloat and work time. I also want to point out that if you have a value of “0px”, you don’t need to include “px”, just use “0″.

Conclusion The key to beautifully formatted markup is organization. Just like you would organize the files in an office, for school or for something else, you should organize the markup so that you can find and edit sections quickly. Use visual formatting as well as logical separation, placement, and naming. This way, the work you do will be high quality and ready for anyone else. Your clients and buyers will thank you - and you’ll be thankful yourself. Also, remember to validate your files!

http://validator.w3.org http://jigsaw.w3.org/css-validator/

Subscribe to the Theme Forest RSS Feed.

This post is a collection of some interesting and useful Ajax Auto Suggest scripts ready to use (from beginner or professional web developers) in your web projects. This collection includes standard auto suggest scripts, del.icious tag suggestion, autosuggest control to search images on Flickr, and advanced table filter with auto suggest control.If you want to suggest other interesting links please add a comment, thanks!1. Ajax Auto Suggest v.2The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar). This auto suggest class is very simple to customize and reuse in your web pages. Take a look here for the demo.2. Woork PHP component: AutosuggestWoork Autosuggest is a simple "PHP component" ready to use which implement autosuggest feature using PHP and MySQL. The component is lightweight (only with 8Kb) and ready to use simply customizing some parameters.3. Spry Auto Suggest WidgetSpry Auto Suggest Widget (provided from Adobe Labs) use Adobe Spry framework to implement auto suggest feature in a input field. This is an example of using a Spry region and non-destructive filter to create an auto suggest widget. The suggestions can be displayed in any HTML structure. Spry uses the the tag ID to identify the suggest list container. In this example, there are three different HTML structures based on: table, div-span, ul-li.4. Facebook-Like Auto SuggestGuillermo Rauch's Facebook-like Auto Suggest is another auto suggest script which simulate Facebook auto suggest feature. It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.5. jSuggest 1.0jSuggest is yet another auto-completer for your text input box. It mimics the functionality of Google suggest. jSuggest will also bind item selection to your up and down arrows and also allow you to select the suggestions using your mouse.6. Yahoo! UI Autosuggest ControlYahoo! UI Autosuggest Control uses AutoComplete to find images by tag from the Flickr webservice. A simple PHP proxy is used to access the remote server via XHR. The generateRequest() method has been customized in order send additional required parameters to the Flickr application. The formatResult() method has been customized in order to display images in the results container, and the default CSS has been enhanced so the results container can scroll. Finally, a itemSelectEvent handler has been defined to collect selected images in a separate container.7. CAPXOUS.AutoCompleteCAPXOUS.AutoComplete is a standalone widget without dependencies, lightweight (only 4 kb) which provides auto suggest feature with an huge scrollable drop down list. It's simple to customize and implement on your web pages with a lot of languages.8. jQuery Tag SuggestionjQuery Tag Suggestion plugin simulates del.icio.us tag suggestion as-you-type feature (when you save a bookmark on del.icio.us). Tag suggestion helps you create a subset of tags that you commonly use for different types of links.9. Google Suggest Style Filter with the AutoComplete ControlMatt Berseth's AutoComplete control provides smarter filtering capabilities for data tables which allow the user to select a filter column from a drop down list. Take a look here for the live demo.Related Content- File uploaders collection for web developers- Best Image Croppers ready to use for web developers- Beautiful datepickers and calendars for web developers- Useful resources to improve the look and features of HTML Forms

This post illustrates how to use some interesting HTML Form validators to check FORM fields writing only some lines of HTML and JavaScript code. All these proposal are lightweight, cross-browser and simple to use and customize in your web projects in few minutes.If you have some suggestion about this topic, please leave a comment. Thanks!1. MooTools FormCheckFormCheck is a class that allows you to perform different tests on form to validate them before submission. FormCheck is lightweight, shiny and fast, supports skins (using CSS), 10 different languages, and shows errors as tips. It support basic validation (required, alpha, digit, alpanu, lenght, confirm...), regex validation (phone, email, url) and a lot of options that allow you to customize this class to fit exactly as you want.FormCheck is really simple to implement. In the <head> tag of your page add the folloing lines of code:>Add a link to MooTools Framework:<script type="text/javascript\" src="mootools.js"></script>...choose FormCheck language (in this case english):<script type="text/javascript\" src="formcheck/lang/en.js"></script>...include the FormCheck script:<script type="text/javascript\" src="formcheck/formcheck.js"></script>... and initialize FormCheck using this code:<script type="text/javascript\">window.addEvent('domready', function(){new FormCheck('formular');});</script>You can use default CSS theme for your form using this code:<link media="screen" type="text/css" href="formcheck/theme/classic/formcheck.css" rel="stylesheet" />At this point, create a form in the tag <body> of your page:<form action="#" method="post" id="formular" class="formular"><form>... and add some fields into the form like these:<input type="text" name="user" class="validate['required','length[4,20]','alphanum'] text-input" />How you can see in the previous code, the syntax to use this validator is really simple. You have to add this code into attribute "class" of the input field:class="validate['required','length[6,16]','alphanum'] text-input" />...it means: validate this field; this field is required, min lenght is 6 chars and max lenght is 16 chars; this is an alphanumeric field. When an user submit the form, the result is the following:Simple No? Take a look at the demo.2. Live Validation LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete. In this example you can see how to match the value contained in two fields.In the <head> tag add a link to the livevalidation script:<script type="text/javascript\" src="livevalidation_standalone.compressed.js"></script>...create two fields:<input type="password" id="password" /><input type="password" id="confirmPassword" />...and than add this script below the second input field:<script type="text/javascript\"> var confirmPassword = new LiveValidation('confirmPassword'); confirmPassword.add(Validate.Confirmation, {match: 'password'}); </script> This is the result if the content in the first field matches the content in the second field:...and this is the result if the content doesen't match:Take a look at this page for a full documentation support about LiveValidation.3. ProtoFormProtoForm is an unltra lightweight, unobtrusive cross-browser and very easy to customize form validation + submit with Ajax based on prototype.js framework. It checks required fields and validate Email, Date, Telephone number and Url, send data and shows response with Ajax, highlight the form field on focus and on error.You can implement this script on your page with only some lines of code. In the <head> tag add a link to the Prototype and ProtoForm script:<script type="text/javascript\" src="prorotype.js"></script><script type="text/javascript\" src="prorotype.js"></script>Then, create a form within a div with ID="box":<div id="box"><form action="#" method="post" id="send" class="validate"></form></div>At this point add some input field into the form like the following:<input type="text" id="email_Req_Email" name="email" title="Required! Enter a valid email address!" />In the propery id I highlighted in bold validation options (_Req, _Email). The ID property of fields you have to validete will be something like: name + _option1 + _option2 +....The "title" attribute is used to display an error message. For a full documentation about this script take a look at the official page.That's all. If you have some suggestions add a comment, thanks!

This post illustrates five interesting rich text editors ready to use in your web projects. I also provided some guidelines regarding how to implement them on your pages using a few lines of HTML code. Try them!1. Yahoo! UI Library: Rich Text EditorThe Yahoo! Rich Text Editor is a UI control that replaces a standard HTML textarea and is based on Yahoo! UI Library; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images.Implement this editor in your web site is very simple. You have to add a simple textarea like this:<textarea id="editor" name="editor" rows="15" cols="70"></textarea>...and copy and paste the Javascript code you can find in the related pages on Yahoo Developer Network on your page. Yahoo! provides a lot of useful and well explained examples regarding how to implement this rich text editor. I suggest to take a look at the following links:- Simple Editor with basic buttons- Code Editor- Editor in a Dialog ControlThe Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. For example you can replace your Wordpress default editor with the Yahoo! Rich Text Editor using this plugin, integrate it into Drupal to edit content using this module or use it like editor for comments of your blog .2. Free Rich Text EditorFree Rich Text Editor is an extremely easy to use FREE javascript based HTML WYSIWYG editor for your website, it can easily be implemented into any existing content management system or other web application with no knowledge required in programming or javascript. Only 3 lines of code required to set up the editor. It also now outputs as XHTML compliant code!The only lines of code you have to add are the following:<form action="" method="post"><!-- Include the Free Rich Text Editor Runtime --><script src="/freerte/js/richtext.js" type="text/javascript\"></script><!-- Include the Free Rich Text Editor Variables Page --><script src="/freerte/js/config.js" type="text/javascript\"></script><!-- Initialise the editor --></form>Simple no? The result is very nice and looks like the Microsoft Word interface. I suggest you to try it if you are looking for an affordable and quick to implement solution for a rich text editor with a lot of useuful features. You can download it here.3. TinyMCE TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.Is very simple to integrate in your website only with a few lines of code. Add this code into the tag <head> of your page:<script type="text/javascript\" src="tiny_mce/tiny_mce.js"></script>...and initialize the editor using the code you can find here, clicking on the tab View Source. Than add a simple text area in your page like this:<textarea id="content" style="width:100%"></textarea>That's all! It's ready to run on your page.4. FCKeditorFCKeditor is a very nice HTML text editor brings to the web much of the power of desktop editors like MS Word. It's lightweight and doesn't require any kind of installation on the client computer. The interface is clean andIt's very simple to implement using this code: <form action="" method="post"><script type="text/javascript\">var sBasePath = document.location.href.substring(0, document.location.href.lastIndexOf('_samples')) ;var oFCKeditor = new FCKeditor( 'FCKeditor1' );oFCKeditor.BasePath = sBasePath;oFCKeditor.Height = 250;oFCKeditor.Create();</script></form>5. XinhaXinha is a powerful WYSIWYG HTML editor component that works in Mozilla based browsers as well as in MS Internet Explorer.Its configurabilty and extensibility make it easy to build just the right editor for multiple purposes, from a restricted mini-editor for one database field to a full-fledged website editor. Its liberal, BSD licence makes it an ideal candidate for integration into any kind of project.Do you have any suggestion about this topic? Add your comment or suggest a link, thanks!

After my previous post about Best Image Croppers ready to use for web developers I want to suggest you some interesting resources where you can find useful and free file uploaders ready to use in your web projects.If you know other interesting resources about this topic please leave a comment!1. Yahoo! UI Library UploaderYUI Uploader provides file upload functionality that goes beyond the basic browser-based methods. Specifically, the YUI Uploader allows for multiple file selection in a single "Open File" dialog, file extension filters to facilitate the user's selection, progress tracking for file uploads, faster file upload on broadband connections due to the modified SEND buffer size, same-page server response upon completion of the file upload.2. jQuery.MultiFileThe Multiple File Upload Plugin (jQuery.MultiFile) is a fantastic non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form.3. FancyUploadFancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.4. Steve Sanderson’s jQuery Ajax uploaderSteve Sanderson release this simple and useful jQuery plugin to upload files to your website. It shows a nice progress bar during the upload and is really simple to customize how you prefer.5. Mega Upload Progress BarMega Upload is a progress indicator for web based file uploads with PHP, perl and JSP. Originally the project was a solution to the lack of a progress monitor for PHP file upload. Since then it has expanded to include upload monitors for perl and JSP.6. Free ASP UploadFree ASP Upload is a free script which lets you create upload forms on your web site. You will be able to do it easily, without having to buy a binary component. This ASP does not require an ASP.NET server.7. ColdFusion file upload progressThis Coldfusion file uploader is a very simple and useful script to upload files to your websites Coldfusion-based.8. MooMultiple file uploadMooMultiple FU is another MooTools-based multiple file uplader really simple to implement and reuse on your web projects ().Related Content- Best Image Croppers ready to use for web developers- 20 Great PHP frameworks for developers- 10 Beautiful Web UI libraries- 10 Free powerful Content Management Systems- 10 Useful tutorials to learn Scriptaculous- 7 Stunning tutorials to design modern interfaces for websites

A frequent question I receive from my readers is about how to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in HTML pages, using just three rows of Javascript code.In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result: Download this tutorial Live previewHTML code: HTML code is very simple. You have to add a main layer with an ID (I used "draggables") and some DIV layers inside that layer. In this way all layers contained inside the layer "draggables" will be draggable when you select them. This is the structure:Copy and paste this code in your page:<div id="draggables"><div>Some content Here...</div><div>Some content Here...</div><div>Some content Here...</div></div>JavaScript code: Now take a look at this simple code which enable drag features. Before all add a link to MooTools farmework in the <head> tag of the page:<script type="text/javascript\" src="mootools.svn.js"></script>Now, copy and paste this simple unobtrusive code:<script type="text/javascript\">window.addEvent('domready', function(){ $('#draggables div').each(function(drag){ new Drag.Move(drag);}); });</script>Simple no? Just in three rows! In this way when you click on a div element contained inside the layer #draggables it will be draggable. In this tutorial I used DIV layers for my draggable elements but you can use every tag you want (p, h1, h2, ul, li....). The only thing you have to change is HTML code and DIV - with the tag you use (p, h1, h2, ul, li....) - in this line:$('#draggables div').each(function(drag)You can also add a custom style to your draggable elements using a simple CSS class I called "drag". For example, change the previous code HTML with the following:<div id="draggables"><div class="drag">Some content Here...</div><div class="drag">Some content Here...</div><div class="drag">Some content Here...</div></div>...and CSS code could be something like this:.drag{border:solid 6px #DEDEDE;background:#FFF;width:200px;height:150px;...}That's all! Try it and download the source code ready to use in your porject. Download this tutorial Live preview

If you are looking for an image cropper user interface ready to use in your web projects and simple to customize, take a look at this list with the best and free image croppers UI currently in circulation.If you know other interesting resources about this topic please leave a comment!1. Yahoo! UI Library ImageCropperYahoo! UI ImageCropper control provides an API and skin for making an image croppable. Simple to use and customize in your web projects, this cropper is actually one of the best free cropper interface you can find. The ImageCropper comes with a default skin, but you can extend or override this as needed using CSS.2. KropprKroppr is intended to help webmasters allow their users to manipulate the images available on the site. With this script you can rotate, resize, crop and save images to your hard drive. Kroppr is using the graphic tools found on a common hosting server so an expensive server is not required for this script to run. In the same time, if there are more choices on the server, Kroppr is choosing the one with the best results in quality and server load.3. JcropJcrop is a quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.4. Javascript Image Cropper UIThe JavaScript image cropper UI is a very popular image cropper which allows the user to crop an image using an interface with the same features and styling as found in commercial image editing software, and is is based on the Prototype JavaScript framework and script.aculo.us.5. MooCropMooCrop is an Image Cropping utility using the amazingly powerful mootools javascript framework. The script is completely customizable with CSS, detects and handles multiple CSS box models, allows for masking to be toggled and set minimium size limit and it's really fast.6. UvumiTools CropUvumiTools Crop is an advanced image cropper which gives your users the ability to create a selection area that can be used to crop an image live on your web site. You can customize a lot of parameters such as minimum sizes, keep aspect ratio (or not), Real time preview and reuse it quickly on your web project.7. PHP & JQuery Photo Upload and CropPHP & JQuery Photo Upload and Crop is another nice image cropper which use jQuery and PHP to upload, resize, crop and save images. It's simple to customize and reuse in your web projects. You can find full documentation about this script here.

For today's massive video tutorial, we'll be working with sessions, classes, prepared statements, and mysqli to build a login system for a small site.

We'll be taking a look at the benefits of using a CSS framework when building web applications.

In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.

Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the popularity of that particular tutorial, I’ve decided to create a second series. However, I’m not much of a designer. Instead, I asked Collis if he would allow me to use the design that he used for a recent tutorial for Web Design Week.

Just like last time, I’ll take you through the process step by step - even through the tedious parts. Enjoy!

The PSD

The 100% HTML and CSS

Thanks again to Collis for allowing me to use his design for this week’s screencast. If this screencast helped you, please do us a favor and subscribe to the RSS feed, and/or leave a comment. See you next week!

P.S. No downloadable source code this week. Collis might upload and sell this particular template on ThemeForest.

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Are you looking for some useful tips to improve the look and features of your standard HTML FORM elements? In this post I suggest you some interesting resources about this topics. Take a look around and add a comment to suggest new links. Thanks!

1. Niceforms 2.0Niceforms is a script developed from Lucian Slatineanu that will replace the most commonly used form elements with custom designed ones

Design a web application requires hard work and knowledge of HTML, CSS, database and javascript. What is a simple way to start developing PHP web applications for a newbie?

In the past months I received frequently this question. Some readers of this blog often asked to me to publish a "newbie-oriented" post about how to create a web application using PHP. With this step-by-step guide I want to

Are you looking for some ideas to design an original interface for your next website project using the most popular JavaScript Frameworks such as Prototype, MooTools and Scriptaculous?

Take a look at this short compilation which includes a Facebook-style lightbox; a nice interface library to develope advanced interfaces for web applications, web sites and widgets; a gallery/slideshow system