DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Zen Coding – a new way of writing HTML and CSS code

Zen Coding – a new way of writing HTML and CSS code

Sachin Khosla user avatar by
Sachin Khosla
·
Jul. 22, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
3.73K Views

Join the DZone community and get the full member experience.

Join For Free

Good news for all the web designers and developers, if you already not aware of Zen Coding. It’s a new and awesome way to write your HTML, XML, XSL. The concept of Zen Coding is based on a powerful abbreviation engine. It allows you to expand code which you originally write as abbreviations. You have to follow the CSS selectors pattern while writing the abbreviation code. Ok enough of talking now let’s see it in action.

An example of abbreviation code is -

div#container>div.menu>ul#nav>li*5>a>span

It’s a nested abbreviation and fairly simple to understand. Start reading from left to right and it will make sense when you will see the following expanded code.

<div id="container">
    <div class="menu">
        <ul id="nav">
            <li><a href=""><span></span></a></li>
            <li><a href=""><span></span></a></li>
            <li><a href=""><span></span></a></li>
            <li><a href=""><span></span></a></li>
            <li><a href=""><span></span></a></li>
        </ul>
    </div>
</div>

Yes, when you will write the abbreviated code, it will expand it to the real code – Magic ? It’s an awesome technique to write the much repeated tags of HTML while you are writing HTML for the webpages.

Where & How it works ?

Zen Coding is a project hosted on Google Code http://code.google.com/p/zen-coding/ . It has extension for all major editors, including my favorite Netbeans . Once you install the extension successfully then its matter of writing the abbreviation code and expanding it. I am going to explain how I made it work on Netbeans, using the following steps -

  1. Download the Zen Coding extension for Netbeans from here .
  2. After successful install and restarting your ID, type the abbreviated code as shown above.
  3. Now press ctrl+alt+n and tada see the magic !

Hope that Zen Coding is going to save lot of time of yours while writing your HTML code.

Stay Digified !!

 

From http://www.digimantra.com/tips/zen-coding-writing-html-css-code/

HTML CSS Coding (social sciences)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Java: Why Core-to-Core Latency Matters
  • How to Configure Git in Eclipse IDE
  • A Guide to Events in Vue
  • Handling Sensitive Data: A Primer

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo