Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast

9 Jan 2010

We all know the benefits of using snippets and bundles to speed up our coding, but what if we could take things a step further, and turn a complex html structure into something as simple as a CSS selector? Well, thanks to a new project, called Zen-Coding, we can do this very thing!

In this four-minute video quick tip, I’ll demonstrate how.

Download Zen-Coding

Other Viewing Options

Update

Within the comments below, I made a suggestion that it would be neat if we could also paste in the generic “lorem” text, like so:

div#header>p>lorem

This would generate something like so:

<div id="header">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</div>

Unfortunately, I didn’t know how to do it. But luckily, the author of Zen-Coding, Sergey, was able to help me. I recorded a sixty second screencast showing you how to allow for this. You can watch it here.

Additional Resources

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Go to Source

Tags: Art, art of zen, css selector, div, HTML, html structure, Jeffrey, Lorem, lorem ipsum, New Way, screencast, something, UT, web development tutorials

4 Responses to Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast

fjpoblam

January 19th, 2010 at 3:43 am

It is EXTREMELY rare that a page viewer will turn off CSS. Mostly they'll do it if they're using screen readers (like, say, the blind, who must have the web page read to them) or folks who use THEIR OWN style sheets to override yours…overall, I would guess, a 10% possibility? So, my guess would be, go for it!

It's unlikely you can make it appear "size 12 font" otherwise…(I don't know, what you mean by "size 12" …if you mean, 12 pixel …then think of the following:)

Be KIND to your fellow page viewers! Pixel sizes are exacting, and can't be resized when the "resize text" adjustment is used up there on the View options on your browser menu! (Seen that option?) However, if you use ".8em" or say ".75em" it'll be roughly what you're looking for – it means, roughly, 80% or 75% of the page viewer's CURRENT FONT SIZE (the size their current Windows font! for all other activity.) That means, your page is "friendly" and will respond to the View option on the Browser bar! Play with it! Do as many print-size measurements as you can with "ems"!

Janna

March 19th, 2010 at 5:25 pm

use a sheetcake and make a template.

Peter_AZ

March 29th, 2010 at 11:40 am

The more you know the better. After pretty much mastering HTML (which will include a certain amount of CSS), Javascript would be next. (But then, if you get a decent Javascript book you'll just copy the code out of it and customize it for your uses, rather than writing from scratch). Use Javascript for form validation as well as simple animation (rollovers). CSS is mainly used for defining styles (so you don't have to reset the font and text size in every text block), but it can be used for page layout — it can get very involved, but it's a good thing to know.

If you need to do more involved animation, consider learning Flash.

For sizeable websites, there's probably going to be some real interactivity (form processing) and database connectivity needed. This is where the server-side language is needed. Depending on the server you're on and what software is available, you could do Perl, PHP, ASP, or Cold Fusion. Learning some SQL is essential for the database part, as well.

But don't forget the basics — you need to be able to create, crop, enhance, resize images, and create graphics, so you should master at least one graphics program. Photoshop's the best, if you can afford it, but there are plenty of cheaper (or free) programs which do a certain amount of stuff and may be plenty for you.

Programming Blog