6 Most Effective Methods to Code HTML and CSS

Written by Kevin Liew on 24 May 2011
47,303 Views • Techniques


Just few weeks ago, I have resigned as a "full on" web developer (frontend, backend, server admin and misc) and moved on to become a pure frontend developer (yay)! It is a really exciting change, as you might know frontend developer role didn't exist few years ago. Thanks to the introduction of HTML5, CSS3 and Javascript framework, frontend development has to be separated from backend due to its complexity, and I think I'm trained to fit in that gap nicely.

For many years, I've equipped myself with many tools and techniques to speed up frontend development, and here I will share all of them to you. I hope this post will able to benefit you in term of increasing your work productivity and save times.

1. Dynamic CSS

If you want to speed up your CSS coding, you need to learn to write dynamic CSS. Most of the dynamic CSS adds nested riles, variables, mixins, selector inheritance feature into CSS, which no doubt will reduce code redundancy, introduce code reuse and hence - increase in productivity. There are many out there, famous one are Sass and Less

Read more: 8 Fast and Furious Tools to speed up your CSS and HTML Coding Time

2. HTML snippets

I also encourage people to use Code Snippet as a quick way to write HTML code. Powerful code abbreviation expander such as Zen Coding and HAML. They eliminate the needs of writing full html tags, just use abbreviation codes and expand it into full HTML markup. I have been using it for a few months now, I really like it because it does speed up the process. Also, it reduces human mistakes as well because all the code are tested and correctly generated.

Read more: 8 Fast and Furious Tools to speed up your CSS and HTML Coding Time

3. CSS reset

The advantage of CSS reset is to avoid browser inconsistencies. For example, UL list in firefox and Internet Explorer, they have different margin and padding values, without resetting it, you will have a nightmare making a consistence pixel perfect layout. Most famous CSS reset would be the Eric Meyer's CSS reset and YUI.

4. CSS Grid layout

Honestly, I don't use CSS Grid Layout..... not yet. It's in the list because I heard many people giving compliments about it and it's proven to be one of the effective methods to increase productivity as well. Grid layout concept in web design is inspired by traditional print publishing. In web, Grid layout is very famous in magazine style themes/websites.

CSS Grid layout has great cross platform support, uniformity and consistency in HTML element placement and a lot more. You can read more details about it from the link below:

5. HTML/CSS editor

Yes, you need a good code editor because notepad just won't do it. I started with notepad 10 years ago, plain black and white won't do any good to your career and your eyes. Syntax highlighting is extremely useful in debugging, auto indent saves time, auto code suggestion speed up development times. I have been using coda, in term of code editing, it's not the best but it has a really stable built in ftp engine which I really like.

6. Some extras online tools

Some tools that will save a little bit more of your times :)


A lot of the methods I've mentioned here definitely can boost your productivity to the max. However, if you have just started your web development career, it's highly recommended that you build a strong foundation in HTML and CSS first before you start using it because most of these techniques use syntaxes and abbreviation codes. Without a strong foundation, and used to those syntaxes and abbreaviation code, you might find yourself unable to debug other people raw HTML and CSS codes and having difficulties to develop when those tools aren't with you; If you confident with your RAW HTML and CSS skills, yes, this tools will save heaps of your times!!!

Enjoy coding :)

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Timesheet 13 years ago
Really nice post.very helpful also.You can test your knowledge in html by attending <a href="http://qualitypoint.blogspot.com/2010/01/html-quiz-questions-and-answers_17.html" title="HTML Quiz">HTML Quiz</a> .

toast 13 years ago
I stopped reading at HAML. haml is obfuscation.
Mark Hesketh 13 years ago
I've been meaning to give LESS a go for a while now... I think I'll finally take the plunge!

Also, is there any equivalent of Backfire for the Chrome Dev Tools? I'll be taking a look at live.js too! Should be very useful.

Thanks for these,

Kevin Liew Admin 13 years ago
If you're using Mac, you should get less.app, instead of relying on js, it compiles it straight away.
jas 13 years ago
Awesome post, Kev! (: esp for newbie like me ;p moremore!