All Guides
In-depth tutorials, practical experiments, and front-end engineering notes published since 2012.
Creating Holy Grail Layouts with CSS Flexbox
There was a time when creating and managing a holy grail layout "Holy grail layouts in Web design") used to be a pain in the head.
A Guide to Absolute Centering in CSS
Centering things in CSS has always been quite a task for the front-end developers.
CSS-only Responsive Dropdown Navigation Menu
Keeping dropdown navigation menus CSS-only is a tricky job. It's true that such menus are not touch-friendly in nature, but still, they are handy when you want...
Simple Masonry layouts with CSS Flexbox
CSS Flexbox module allows you to layout things more easily. In this post, I'm going to share an easy way to do a masonry layout with Flexbox.
Simple Responsive Tables with CSS
Tables are the only elements you need to fight hard for to make them adapt to screen resolution. We do have some excellent inventions on web to make our data...
Creating Pure CSS Equal-height Columns
A layout seems so incomplete, unplanned, and unprofessional without a grid plan. Not gonna talk about CSS grid framework in this post; but will be talking...
6 Tools to Compress, Optimize and Clean CSS online
Optimizing CSS is one of those common things that front-end developers deal with often. That optimization however may vary and completely dependent on nature...
CSS Hack: Disable Chrome's Pull-to-Refresh on Android
I was working on a small project for a friend lately. One of the needs of the project was to get rid of Google Chrome's Pull-to-refresh functionality on...
CSS-only Instagram-like Progress bar
Few days ago I noticed that cool multicolor, animated rainbow progress bar on Instagram Web for the first time. Obviously, I tried to create similar effect...
Quick and Simple Pop-up Modal with plain JavaScript
I stumbled upon a query somewhere about needing guidance to create a fancy, media-rich pop-up modal. On the same question page, I saw people recommending...
13 Must-have SASS Mixins for Web Designers
I've been using SASS for almost two years, and since when I started up with it, I've been using some cool mixins to automate certain things in my projects.
Touch-friendly Animated Hamburger Icons
In a previous article, I posted my interpretation of an animated navigation menu icon aka the Hamburger icon. It received a fair amount of appreciation from...