Category Archives: Tutorials

10 Best Articles to Learn PSD to HTML Conversion

This list article contains links of good resources where you can learn very best ways and methods of coding up a PSD into workable HTML/CSS templates. Target is for novice folks. Articles listed below will help you master in HTML/CSS crafting with industry best practices.

PSD to HTML

  1. Converting a clean magazine-style PSD template to HTML/CSS

  2. Converting a Design From PSD to HTML

  3. Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

  4. From PSD to HTML: Building a Set of Website Designs Step by Step

  5. How to Code up a Web Design from PSD to HTML

  6. PSD/HTML Conversion: Code a Clean Business Website Design

  7. Minimal and Modern Layout: PSD to XHTML/CSS Conversion

  8. Slice and Dice that PSD

  9. Building a Website (2 of 3): HTML/CSS Conversion

  10. From PSD to HTML the easy way – Using Ultimate CSS Framework

Detect Landscape/Portrait Mode using JavaScript

Detecting device mode (landscape or portrait) using CSS3 is now very much easy and it is state of art. But it wont work on certain situations like I had. I failed to make @media queries detect device oriantaion on Iphone. So I came to write a JavaScript fix to get work done.

Check my oriantation test using CSS3 @media queries here. The demo page should show text ‘Portrait’ on portrait mode and ‘Landscape’ on respective mode. But it does not. You might want to try with you own device. Some of my friends said it is working. Check out the discussions on Forrst.

I Googled for the solutions, but I must say I couldn’t find any reliable one :(. If you prefer to use CSS3 media queries, check out the post on Stuff & Nonsense. And here it goes my JavaScript function that will detect the landscape/portrait mode.

First, lets create a function called ‘checkOrientation‘ so that we can evoke it by just a name instead of repeating whole lines.

Inside this function we will check the device oriantion degree which we are going to take from window.oriantation method. If we get the degree 0 its the mode portrait else its landscape.  Since we will be using window. orientation method, this function will only work in handheld devices. So here it goes our function:

function checkOrientation(){
      var currMode = "";

      switch(window.orientation){

           case 0:
           currMode = "portrait";
           break;

           case -90:
           currMode = "landscape";
           break;

           case 90:
           currMode = "landscape";
           break;

           case 180:
           currMode = "landscape";
           break;
     }
     document.getElementsByTagName("body")[0].setAttribute("class", currMode);
}

I have used switch statement to set the currMode variable, which we are going to use as class on required html elements. I set that class on body.

Now its time to call the function, you can call it directly or on window.load method. I think window.load method is better and safe. So lets call it:

window.load = function() {
     checkOrientation();
}

When our page is ready, check the class of body element. We are done. But wait what if we change the oriantaion now? Yes, we need to update the class on oriantation change.

For this, we have window.onorientationchange method, which is also available on devices only. We will recall our function inside this method:

window.onorientationchange = function(){
      checkOrientation();
}

Thats it. Now we are completely done. Check-out the Landscape/Portrait Mode detection demo.

7 Ways to Code Faster HTML CSS

7 Ways to Code Faster HTML and CSS

Are you a fast coder? Yes? If then how fast you can code? Being a fast typist isn’t about coding faster. Faster coding is about getting more things done with less effort. Here comes the role of productivity tools.

Listed below are some very useful productivity tools – for Frong End Developers. The tools below will help you code must faster and saves a lot of time. After all we are not a typist :), so why don’t we use these tools:

HTML

1.) ZEN CODING

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.

Best learn resource: http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/

2.) Halm

Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications.

Best learn resource: http://haml-lang.com/tutorial.html

3.) Sparkup

You can write HTML in a CSS-like syntax, and have Sparkup handle the expansion to full HTML code. It is meant to help you write long HTML blocks in your text editor by letting you type less characters than needed.

Best learn resource: http://thechangelog.com/post/1421721495/sparkup-a-parser-for-a-condensed-html-format

CSS

4.) LESS

The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Best learn resource: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-the-programmable-stylesheet-language/

5.) SASS

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.

Best learn resource: http://net.tutsplus.com/tutorials/other/mastering-sass-lesson-1/

6.) Prefixr

CSS Prefixr is a CSS pre-processor tool, that generates the cross browser css from given codes. Forget about writing multiple browser prefixes and start using Prefixr.

7.) SpriteCow

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

All of the above tools are my daily usage tools. Once you get the rid of using these tools – you will thank me for listing.

Create Simple jQuery + CSS Tab

Displaying large, lengthy contents on a page is bad thing. Normally user ignores the page where they see a lot of texts & texts & texts. Here “Tabs” comes to act. Tabs are very useful to display large, lengthy contents on  a page.

Lets have a short trick on how to create jQuery tabs, its too easy to create. We will create tabs using a little bit css & jQuery. Continue reading Create Simple jQuery + CSS Tab