All Posts

A collection of all the tutorials, experiments, and technical deep-dives I've published on W3Bits since 2012.

1.

The Correct way to Toggle Display with JavaScript

Apr 8, 2022

2.

CSS Flip Animation: Super SMOOTH 3d Flipping Cards

Jun 2, 2020

3.

Create jQuery slideToggle in Pure Javascript

Mar 27, 2019

4.

The Correct Way to Center-align Web Layouts

Mar 1, 2019

5.

Quick and Beautiful CSS Floating Labels for Input Fields

Dec 30, 2018

6.

Load Disqus on Click and Scroll Events

Dec 28, 2018

7.

A Guide to Create and Use SVG Sprites

Dec 25, 2018

8.

Quickly Create Christmas Snowfall with Pure CSS

Dec 24, 2018

9.

Left-to-right Masonry Layout using CSS Grid

Dec 23, 2018

10.

Classic Sublime Text themes that still hold up in 2026

Dec 20, 2018

11.

CSS Sprites: Creating PNG Sprites and Using with CSS

Jun 16, 2018

12.

A Quick Guide to CSS Attribute Selectors

Apr 13, 2018

13.

Creating Holy Grail Layouts with CSS Flexbox

Nov 15, 2017

14.

A Guide to Absolute Centering in CSS

Nov 14, 2017

15.

CSS-only Responsive Dropdown Navigation Menu

Oct 10, 2017

16.

Simple Masonry layouts with CSS Flexbox

Oct 8, 2017

17.

Simple Responsive Tables with CSS

Sep 22, 2017

18.

Creating Pure CSS Equal-height Columns

Sep 22, 2017

19.

6 Tools to Compress, Optimize and Clean CSS online

Sep 11, 2017

20.

CSS Hack: Disable Chrome's Pull-to-Refresh on Android

Sep 7, 2017

21.

CSS-only Instagram-like Progress bar

Jun 27, 2017

22.

Quick and Simple Pop-up Modal with plain JavaScript

May 27, 2017

23.

13 Must-have SASS Mixins for Web Designers

May 18, 2015

24.

Touch-friendly Animated Hamburger Icons

May 12, 2015

25.

CSS-only Responsive Multi-level Navigation Menu

Sep 17, 2014

26.

Techniques to clear floats in CSS

Sep 12, 2014

27.

3d Earth with Rotating Animation with CSS

Sep 12, 2014

28.

Creating a Simple Responsive Navigation menu with CSS

Sep 10, 2014

29.

Wavy Preloader Animation with CSS

Sep 4, 2014

30.

Quick n' Easy Spritesheet Animation with CSS

Sep 3, 2014

31.

Disable automatic paragraphs in WordPress posts

Sep 2, 2014

32.

Animated Hamburger Menu icon with Pure CSS

Sep 1, 2014

33.

Creating a search box like CSS-tricks.com

Aug 27, 2014

34.

Creating a CSS-only Responsive Image Carousel Slideshow

Aug 26, 2014

35.

Modern CSS Image Hover Effects with Performance Optimization

Aug 25, 2014

36.

Setup Google Code Prettify on your Website

Aug 25, 2014

37.

Pixel Polyfill for REM Units (with SASS Mixin)

Aug 13, 2014

38.

The Box Sizing Reset in CSS

Jul 24, 2014

39.

Find previous versions of WordPress plugins

Jul 16, 2014

40.

Lazy loading JavaScript to improve site speed

May 25, 2014

41.

Build an XML Sitemap for your static website

May 25, 2014

42.

Best WordPress Plugins to generate XML sitemap

May 25, 2014

43.

Convert colored images to Grayscale with CSS

May 24, 2014

44.

Add Font Awesome to WordPress Navigation Menus

May 22, 2014

45.

AJAX load Disqus comments on Scrolling down the page

May 21, 2014

46.

Creating a Responsive Pure CSS Masonry Layout

May 20, 2014

47.

Pure CSS Rainbow text with Animation effects

May 20, 2014

48.

Understanding the CSS Box Model

May 19, 2014

49.

Set Up a Custom Domain with your Ghost blog

May 19, 2014

50.

Add "Read More" link in Ghost Theme

May 16, 2014