Task runners help automate various tasks like compiling sass, minify and concatenate html, css and javascript, pushing files to git and ftp, automatic browser refresh and more.

One of the widely used task runners is Grunt. below is a step by step guide on how to install it on a windows machine.

Install Node.js and NPM

Grunt is dependable in Node.js, a server side JS environment. We also need the Node Package Manager (NPM) – included in node.js installer – to be able to install grunt.

Head over to Node’s downloads page and download your system’s version.

Continue…

If you have been developing websites for a while, you know how often and tricky CSS centering might be. I faced this problem myself, specially with vertical centering. Below I will showcase the methods I use to center elements both horizontally and vertically.

Horizontal Centering

Inline or inline-block elements: apply “text-align: center” to the parent.

Block elements: apply set width, either fixed or fluid then give the element “margin-left” and “margin-right” of “auto”.

See the Pen Horizintally centered block element by Rafael Youakeem (@Youakeem) on CodePen.

Absolute positioned elements: use the same technique mentioned below for vertical block centering

That is it.

Continue…

Web fonts are a must when it comes to modern web design and good typography, and nearly all new websites are using custom fonts. There is more than one way to use them on your website and a few things to keep in mind for the best support and performance.

History of fonts on the web

Before we go through how you can use custom web fonts, let me give you a quick brief on how things used to be in the past.

Web safe fonts

In order to serve a font in a web page, the font file needed to be available on the users machine, just like a PowerPoint presentation  or a PSD. But different operation systems had different font sets installed on them.

That gave web designers a very limited options of fonts to use, these were the fonts that were installed by default on most of the operation systems.

Continue…