WordPress Tutorials & More!
(Best WordPress Tutorials)

We absolutely love Sass (SCSS), it’s such a massive time-saver and makes building front-end design such a breeze! There are many JavaScript tools for working with files and automating other tasks, but Sass’s built-in mixin capabilities allow one to write modular front-end style code. In this article, we have listed thirteen of our favourite Sass […]

In this tutorial, we are going to create a simple animated background colour animation which loops with pure CSS using keyframes along with various CSS animation properties. In our example, we are going to set this to the body element. However, you can apply the code to any HTML element of your choice either with […]

In this tutorial, we are going to show you how to create a modern scroll down animation which you can easily add to any website. These types of animations are typically used on websites that have a full-screen header in which you add an animated element to demonstrate that there is more content on the […]

What are less mixins? One of the best features of any CSS preprocessor is the ability to create mixins, which allow you to tie a bunch of properties and customisable values all into one nice little package. Here’s an example: /* Mixin */ .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @color: #333) { -webkit-box-shadow: @x […]

Need a good method to vertical centre elements, then look no further, flex is the way! There are other techniques that do work for vertical centring such as using table and table-cell with the good old vertical-align: middle, but they never seem to work when you need them. The current landscape of vertical centring options […]

What is Breakpoint? Though the Bootstrap is a complete framework and packaged with JavaScript components too but achieving effortless responsive behaviour is the major key point we can grant Bootstrap for. Responsive behaviour depends on resolutions (viewport or screen sizes). By default, Bootstrap supports four resolutions – called Breakpoints in technical term. < 768px Extra […]

So you have seen on websites that typically have a full-screen header with an indicator to scroll down to view the rest/more of the content. We’re going to show a very nice and clean way to represent this feature. In today’s tutorial, we have a scroll down icon created as an SVG using just HTML […]

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points. If you need to create a slanted div […]

Have you ever built a website just to find out that your client doesn’t seem to view the website (even at the same dimensions) as to how you are viewing it? This is all to do with Windows Scaling (not to be confused with browser zoom). By default on a lot of Windows laptops, the […]