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.

10 Excellent CSS Frameworks for Responsive Web Design

Responsive Web Design

The year is 2012, shame on me – everyone knows that. The year is for Responsive Web Design – yeah now I said good thing.  There are plethora of books which can be so useful for getting started, yet when it comes to develop a project – CSS Frameworks strikes in mind. CSS frameworks are great for rapid development.

So here I have listed some of the best Responsive CSS Frameworks you can choose to get started on your next responsive projects.

1. Golden Grid System

Golden Grid Responsive CSS Framework

2. 1140 grid

1140 CSS Grid Responsive CSS Framework

3. Columnal

Columnal Responsive CSS Framework

4. Less Framework

LESS Responsive CSS Framework

5. Zurb Foundation

Zurb Foundation Responsive CSS Framework

6. inuit.css

INUITCSS Responsive CSS Framework

7. 320 and Up

320 and up Responsive CSS Framework

8. flurid

FLURID Responsive CSS Framework

9. The Semantic Grid System

The Semantic Grid Responsive CSS Framework

10. FluidGrids

Fluid Grid Responsive CSS Framework

Hope you enjoyed the list 🙂

Portfolio PSD Template V 2.0

Our last Portfolio PSD Template, which was a standalone one page PSD Template got a lots of love from you – its the most popular download till the date on CSS Junction. Considering you deep interest in that portfolio template, here I have updated its design, added more pages that makes it a complete portfolio package template.

V 1.0 (Original) Template

Portfolio PSD Template V 1.0

V 2.0 Template

Portfolio PSD Home page

Major updates

  • Navigation
  • Typography
  • Content section
  • Additional pages added

Technical details

  • You’re right – its on 960 grid.
  • Heading fonts from Google Web Font – its Oswald.
  • Body copy texts – Antic from Google
  • All images (except work samples) are royalty free stocks from photoXpress.com.

Other pages

1. List page
List page template
2. Full page
Full Portfolio Page
3. Contact page
Contact page template
All together – 4 pages, which makes it a complete template pack.
As you know- I don’t like to talk much when its a freebie post – straight to point. Download the PSD.

Loved it? I wont mind a tweet or share on facebook.

Magnifier Lens Vector Icon

We have a quality freebie for today – coz its time for Friday Freebie. Its a high quality Magnifier lense vector icon, designed beautifully in Adobe Illustrator.

Fact

I hardly remember when I desinged it – might be 3 yrs ago. I was searching in my archieve for a old layout file, suddenly I found this – and thought to share with all of you.

Preview

magnifier-lens-vector-icon

No more talk/salk- download ZIP for AI file.

Download

Oh, yes – do not forget to subscribe our RSS feed for more quality freebies. Like our Facebook Page.

Scrollbar PSD Set

While making a psd for web layouts we often forget to design the scrollbar elements. Yes, its true because of we can not style it using CSS only, but we can style scrollbar using js plugins, my favorite is jScrollPane.

So here is a useful freebie for you. Grab a useful UI PSD as a today’s freebie. Its a scrollbar psd. Horizontal + Vertical scrollbar both are in psd file.

Scrollbar preview

Scrollbar PSD

No more boring talks, download it now.

Download

A blog about internet!