Improving Your Productivity: Quick Tips for Zen Coding
videos

Improving Your Productivity: Quick Tips for Zen Coding

on Jul 5th 2011 with 20 comments
Tutorial Details
  • Program: Zen Coding
  • Time: 10 minutes
  • Difficulty: Beginner

In this exclusive web series, Adi Purdila is going to walk you through how to use a handful of web design applications to improve your productivity. Work fast, smarter, and more efficiently! Today’s session: Quick Tips for Zen Coding!

Quick Tips for Zen Coding (Exclusive Video)

This video is recorded in HD, so feel free to turn it on if you’d like the full resolution version!

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

About this Series

Adi is going to be recording a handful of these little quick-tip videos for various web design programs. The purpose? To share some tips and trick for working faster in the programs that you use every single day! If you have any particular programs or technologies that you’d like him to share his tips on, let him know in the comments section below!

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • techeese

    Thanks for reminding me why i love zenCoding, this is good for beginners that have enough knowledge in html tags.
    I use zencoding in dreamWeaver CS4 but i can’t seem to use it in NotePad++ even though i downloaded the required files and installed them..

  • http://www.lucasdelrio.com.ar Lucas del Río

    Finally the day has arrived! I’m going to learn zenCoding :D
    Thanks a lot for shearing this! Great work once more

  • http://www.adesignlink.com Chad P

    It is amazing how many devs do not know about this product. I just introduced a developer to Zen the other day. He was amazed.

  • http://www.3rddesign.com 3rddesign

    Wow! I never knew about this until I saw this video. I am glad that I watched this and apply this during developing a website.

  • http://Www.netsi.dk/wordpress Sten Hougaard

    Hi,
    Nice video! Hope it Will more people start enjoy coding with zen coding. I have more resources about zen coding om my blog: http://www.netsi.dk/wordpress/?s=Zen

    /Sten

  • Pingback: Improving Your Productivity: Quick Tips for Zen Coding | Shadowtek | Hosting and Design Solutions

  • http://newarts.at Drazen Mokic

    Yep Zen Coding rocks. I am nominating it the “Tool of the Year”.

    This should be integrated into every Code Editor/IDE by default.

  • http://www.photoshop-leren.nl Saro

    Wow yea, that works like a charm.

  • Oliver

    Hi Adi, I was wondering if you can post all your zen codes here…. I don’t have a fast internet connection so I can’t view the HD and see the code clear…..
    I see the first one is
    div#container.align.classtwo.classthree>ul.items>li#item-$*5

    But what’s the 2nd one?

    Also I have a windows notepad++, alt+shift+ right arrow does not go to the next list item, BUT with zen coding itself, the command is ctrl + alt + j

    @techeese all I did was paste “nppScripting.ddl” and the “nppscripting” folder inside notepadd++ plugins
    C:\Program Files (x86)\Notepad++\plugins
    Restarted notepad++ and I saw the Zen coding at the top right file menu, next to plugins & windows menus.

    Anyways, thank you Adi for enlightening me on this coding. I love Tut+ for this. Now I can tell people I practice zen css coding haha. Not only sounds super mysterious and cool, but ALSO efficient.

  • http://ecustom.ca/ Lucas C

    Sparkup is a nice addition/variant to Zen Coding.

  • http://www.logic52.com Shane

    Absolutely awesome!!!!

  • Intie

    Great tool. As others I’m surprised how many developers don’t know about this. I simply can’t imagine writing html code without it anymore. I watched whole quick tip to find out if there’s something new i could learn. There wasn’t but that’s not author’s fault at all – it was great tip for target audience.

    What kinda shocked me though was “nobody uses tables anymore”. Uhuh? So you are one of those guys who tries to simulate tables with gadzilion of carefuly placed and aligned divs when you need to present tabular data just because tables are not cool nowadays? :)

    I think I know what you meant to say (i hope!) but you should be careful with stuff like this – especially if your tip is targeted at developer newbies. They might get some wrong ideas.

    • http://www.aon-media.com Jon Schuster

      I concur. Although tables can get a bit nasty for every day coding (like trying to set up a navigation list, a news article, etc.), they are still VERY useful for displaying large amounts of data. The majority of my clients are online gaming teams and sports teams, so needless to say tables are the way to go when displaying a team’s schedule or a list of player stats.

  • Paul

    looks like a killer little tool, I think I may have been fantasizing about this (anyone else dream in code?.. don’t answerer that.)

    Link on the post maybe?

    http://code.google.com/p/zen-coding/

    • Paul

      And a useful cheat sheet (.pdf download)

      zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf

  • Jose Maravillas

    Does anyone know how to do the ctrl + alt + right arrow to switch between elements in Notepad++? I tried it and it doesn’t want to work.

    • Jose Maravillas

      Also there is something wrong with the time displayed in my comment. It says that I posted it at 3:27 am, but I posted it at 8:30 pm.

      • http://snaptin.com Ian Yates

        Hi Jose – the comments timestamp is taken from the WordPress install timezone, not the time where you are. As far as your original question is concerned, I’m an OSX man and don’t use Notepad++ so I can’t help you out there, sorry :(

  • Gabriel

    Pretty Sweet.
    Im getting this for UltraEdit since I work with a PC.

    Thanks

  • http://illustrator-artwork.blogspot.com Ahmed Abbouh

    Amazing tool, specially with Notepad++ thank you so much

  • hadrian

    When creating div with id or class, or whatever parameter you dont have to write eg. div#container, Zen takes div as default, #container is enough ;)

  • Pingback: The Best Way to Learn HTML | Webdesigntuts+