WordPress Tutorials & More!
(Best WordPress Tutorials)

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 […]

Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here and below is probably the result you are looking for: Today we are going to show you an easy way to do this. The reason this […]

Today we will show you how to create a large header and a smaller subheader beneath it which featured double horizontal lines jutting out after the text to both the left and right of the centred text. An easy thing to mock up an image, but a much more difficult thing to pull off in […]

In this tutorial, we are going to show you how you can limit text length to the number of lines you would like to use with CSS. Is it possible to limit a text length to “X” amount of lines using CSS? The answer is yes. There is a way, but it is webkit-only. However, […]

The web is increasingly moving towards mobile browsing, and this doesn’t seem to be slowing down. The number of people using mobile devices is increasing every day. Here are a few tips that will help you build a website optimised for mobiles: Select a responsive template for creating the website: This is one of the […]

Today we are going to show you how you can convert letter-spacing from tracking from design programmes like Photoshop or Illustrator to CSS. Have you ever had that conversation with a graphic designer for a layout that specifies tracking (letter-spacing in our language) for text elements? So how do you make this conversion? The Simple […]

If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). We really do love this style of layout, it gives a different kind of look […]

Here is an example of an arrow with pure CSS which is supported by all web browsers. How is it done? Quite simple really, check out the below code: HTML <div class=”arrow”> <div class=”line”></div> <div class=”point”></div> </div> .arrow { width:120px; } .line { margin-top:14px; width:90px; background:blue; height:10px; float:left; } .point { width: 0; height: 0; […]

How do we make a full browser width container when we’re inside a limited-width parent? In other words, how do we stretch the div outside of its ‘container’. If we could use absolute positioning, we could set the container to be at left: 0; and width: 100%; – but we can’t because we want the […]