Articles > Tutorial

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,...

How to Create a Full Page Hero Image with HTML and CSS

Hero images can be used in versatile ways. Home pages and landing pages are the most frequent use cases but they also work well with single post, archive, contact, and other pages. Although hero sections vary by size, full page hero images have become very fashionable in recent years, used by many notable publishers such as Medium.com. However, creating a full page hero image is not an easy task, as you need to pay attention to many things such as: The hero image needs to cover the whole viewport size—not...

Building Your First Slack Bot

In this tutorial I’m going to show you how to create a simple Slack bot using Express and Node.js, which will communicate with the Slack API. We will use a simple example where we send a score to our Node.js application, and provide another endpoint for retrieving the pushed score. Let’s get started… Getting Started ... Make sure that you have Node.js and NPM installed on your machine, if not, visit the Node.js website to install the latest version. Let’s start by creating a folder for our app....

How to create your first Anchor theme, part 2

In the first article we saw the beginnings of a an Anchor theme, as we created the header and got a better understanding how Anchor works under the hood. In this article it's time to get our hands dirty in the posts.php file and with the footer in order to finish our very simple Anchor theme. posts.php ... This is the page where you get all the home page posts, the blog page if you wish, and this is where we’ll perform our main loop and place all our posts. The first thing we need to do is get the header and open our...

How to create your first Anchor theme, part 1

We all know there are a lot of choices when it comes to choosing a CMS for our projects. Sometimes we want something more complex like Wordpress or Joomla that allows us to create a bigger site, but other times you just want a simple good looking blog, and for that Anchor CMS may be the perfect choice. What is Anchor CMS? ... Like its website says, Anchor CMS is a lightweight blog system that allows you to create a blog really easily. Even though it is a lightweight solution it does have some great features that...

How to create Google Chrome extensions

Google Chrome is the most widely used browser, and for good reason: it’s fast, reliable, has a great set of developer tools and to top it all off, it has literally hundreds of extensions in the Google Store you can take advantage of. The other amazing thing is that you can build your own extensions using just HTML, CSS and JavaScript, so it’s not like you need to even learn any new languages. You already know this, you only need to figure out how to apply it to Chrome. There are times you need something specific...
CSS

HTML5 JavaScript Gem Game With Saved Scoreboard

Everyone is talking about HTML5 games and how they are the future of mobile gaming, but where do you start? What is it you need to do to create a game? In short the answer is actually "not much", everything that I will be using in todays tutorial I've already covered in various different guises in my previous tutorials. We'll be using only pure JavaScript and CSS in this tutorial and the images I've used are from the PlanetCute image pack from Daniel Cook Apologies in advance, but this is a fairly length tutorial....
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress