CSS

2 Ways to Create the Holy Grail Layout with Flexbox

Before the flexbox layout module was introduced, it had been a challenge to create the holy grail layout. We had to use all kinds of tweaks to achieve this kind of layout loved both by marketers and website owners, as it allows us to use two sidebars at the same time — one on the left and one on the right side. Thanks to flexbox, now we can build it in just a few lines of code. So, in this tutorial, we will look into how to create the holy grail layout with flexbox — in two different ways. First, we will use one huge...

How to Enable Twitter Cards on Your HTML and WordPress Site

Adding Twitter Cards to your website can help you present your brand on Twitter in a more engaging way. By adding a simple HTML snippet to the <head> section of your page, you can make Twitter display rich content (including a summary and image) when your readers share your posts or pages on the social network. By default, when someone tweets your posts, Twitter only displays a plain URL that doesn't tell much about your content. To make Twitter show Twitter Cards rather than URLs, you need to add extra...

10 Best Visual Studio Code Themes from Light to Dark

Visual Studio Code is Microsoft's source code editor that comes with support for multiple programming languages. It's open-source, free, and cross-platform, so you can use it in all major operating systems. The biggest appeal of Visual Studio Code is versatility. With the help of built-in settings, plugins, and themes, you can customize any aspect of your code editor, from design to functionality. Why Choose a Custom Visual Studio Code Theme? ... Custom VS Code themes let you give a completely unique...

6 Best Practices to Optimize Your WordPress Database

Your WordPress site can be slow for many different reasons; a bloated database running in the background is one of them. A professional WordPress maintenance workflow includes regular database optimization during which you get rid of unnecessary data, and locate and fix errors and inconsistencies in your database. WordPress database optimization doesn't require any specific programming knowledge, although you occasionally need to edit the wp-config file. In this article, we will show you...

How to Create a JavaScript Chart with Chart.js

If you have an information-rich website or application, you might want to visualize your data so that users can better make sense of it. Although tables can be quite useful in certain cases such as pricing and feature comparison tables, other kind of information is easier to process with the help of some kind of data visualization. JavaScript libraries such as Chart.js let you generate different types of HTML5 charts such as line, bar, pie, doughnut, and area charts. Chart.js is a versatile library...

7 Best Material Design UI Component Libraries

Material design is a popular visual design system created by Google. It aims to enable designers and developers to create applications that have a unified look on all platforms. Apps that follow material design principles look beautiful and professional on all operating systems and devices. Google's official material design toolkit supplies you with many assets such as guidelines, components, color palettes, themes, and icons. However, that's just the beginning. As material design is an open-source...

How to Install the Windows Subsystem for Linux (WSL)

The Windows Subsystem for Linux (WSL) is a compatibility layer that natively runs Linux binaries on the Windows 10 and Windows Server 2019 operating systems. It allows you to set up a Linux environment on Windows without having to install a virtual machine. With WSL, you can install any Linux distro you want on your Windows machine. In this tutorial, we will show you step by step how to install the Windows Subsystem for Linux. Then, we will install the Ubuntu 18.04 (LTS) on top of WSL. But, first, let's see...

How to Create a Collapsing Header Effect with Pure CSS

Collapsing headers are an excellent solution to show important information to users, such as special offers and key notifications. Many developers rely on JavaScript when they create such effects, however, it's perfectly possible to create a simpler collapsing header effect with pure CSS, too. Collapsing headers work similar to parallax effects. The background of the collapsing header stays fixed so that the content below it can flow on top of it when the user scrolls down the page. In this tutorial,...
Load more