Blog

Practical and problem solving web code samples collected from real life web developments, some experimental and playful coding tutorials and web design talk.

How to install Craft CMS to a web server. Part 2....

Code

Craft CMS 3 can be installed and updated by Composer. So in Part 2, we will use the Composer to install the Craft to a web server using a Terminal.app. If you…

How to install Craft CMS to a web server. Part 1....

Code

Craft CMS can be installed by using Composer. So in Part 1, I will show you how to install the Composer to a web server first. You can also install it manually,…

Parallax div element’s scrolling effect with jQuery using CSS transform

Code

Give floating parallax effect to div elements by manipulating the elements’ y-position with jQuery and CSS transform. You must have seen this effect on many websites as it’s very popular, and I…

Turning WP_Query shortcode into slider/carousel using Slick without a plugin

Code

We can create a slider or carousel from a custom WP_Query loop easily by using Slick. We have created a custom WP_Query shortcode in my last post. Now we are going to…

Adding custom WP Query loop into page builders without a plugin

Code

By using a simple shortcode trick, you can add any type of custom WP_Query to pages or posts while using a page builder. Have you not ever felt that the WordPress theme…

Background image moving horizontally as scrolling down

Code

Make a background image move horizontally as you scroll down with simple jQuery. Parallax effects are a brilliant trick to use when you want to show off a beautiful image. It’s visually…

CSS Grid – Clickable CSS grid tabs with simple jQuery

Code

Turning CSS grid into clickable tabs with simple jQuery Clickable Tabs are a great way to display information. It’s interactive and more engaging. I would like to create clickable tabs using CSS…

CSS Grid Responsive – Change of grid layouts by screen size

Code

CSS grid responsive layouts from stacked blocks to 3 columns I would like to set up a simple CSS grid rule that is responsive to the screen sizes. This can be easily…

CSS Grid Basic – display: grid and display: inline-grid

Code

CSS grid can make webpage layouts so simple. The simplest CSS modular can be achieved easily using CSS grid, with its flexibility and possibilities. When I design web pages, I always try…

Create Rotating 3D Letter W with CSS only

Code

CSS 3d property is a great way to create simple rotating objects. You might have come across a CSS cube. If you have not, here is a comprehensive article by David Walsh….

Turning Div Elements into Numbers

Code

Easy way to turn a series of div elements into a sequence of numbers with a simple CSS rule. Ever wondered how to have numbers instead of dots for your slider navigation…

Slide-in Page Layout with CSS Animation

Design

Slide-in text information panel when ‘more-info’ button clicked. This is a modern layout example suitable for a page with lots of text information. Too much text on a page can be a…