Monthly Archives: June 2016

Freebie: Responsive Landing Page Template With Flexbox

By Danny Markov


The fist impression a website leaves on potential customers often plays a huge role in their decision whether to buy or pass on a product. A landing page with a good design can keep users engaged longer and hint them that the advertised product or service is of high quality.

To help you save time on building a landing page from scratch, we created this HTML template that can be used as is or as a starting point for your start-up’s website. It’s simple, fully responsive, and 100% free!

The Design

Our template consists of a single static HTML page with several sections:

  • Header with company logo and navigation menu.
  • Hero with titles, action button and fullscreen background image.
  • Demo section with a gallery for showing off pictures or stock images.
  • Features section for listing different services or features.
  • Reviews section for quotes and recommendations.
  • Callout section with a simple input form and button.
  • Footer including social media links and text (removable).
Features And Services Section

Features And Services Section

The whole layout is responsive and looks good on all devices ranging from small phones to large desktop monitors. It doesn’t have any flashy animations or complex graphics to keep it lightweight, customizable, and lightning-fast.

The Code

The entire template is made up of just two files: a HTML layout and a CSS stylesheet. We haven’t used any frameworks, so editing and customizing it should be relatively simple. This also makes it easier if you want to implement any framework of your choice such as Bootstrap or MDL.

The only external dependencies used in the project are a couple of fonts:

For the of the CSS we’ve relied on a pretty standard set of properties, nothing too experimental. Some parts of the layout are done via flexbox, but that shouldn’t cause any compatibility issues as it has almost full browser support.

Free for Commercial Use

This landing page template is completely free and can be used in both personal and commercial projects. For more information check out Tutorialzine’s licence page.

We hope you enjoyed this template! If you want more free stuff check out our full collection of freebies and leave any suggestions for new templates that you want to see in the comments below!


Quick Tip: Detecting Your Location With JavaScript

By Danny Markov


Most modern devices are capable of detecting their own location either through GPS, WiFi, or IP geolocation. Developers can use this information to provide better search suggestions, nearby store locations, and implement all kinds of useful map interactions in their apps and websites.

In the article below we’re going to take a look at an easy, pure-JavaScript way to access a device’s whereabouts without relying on any external dependencies or third-party services. Let’s begin!

Location sources

JavaScript offers a simple, yet powerful tool for locating devices in the form of the Geolocation API. It consists of a small set of easy to use methods that can obtain the device position through all three of the previously mentioned services:

  • GPS – primarily on mobile devices, very accurate up to 10 meters.
  • WiFi – available on most internet connected devices, also very accurate.
  • IP geolocation – limited to region and often times unreliable, used as a worst-case scenario when the other two fail.

When geo data is requested the browser will try and use all three of the above options depending on what’s available. The results from the WiFi source are usually used as it is quicker than GPS and way more accurate than IP geolcation.

Using the Geolocation API

The Geolocation API has almost full cross-browser support, but to make sure that it’s accessible to our users, it’s a good idea before doing anything to check whether the geolocation object exists in the Window.navigator interface.

if (navigator.geolocation) {
  // geolocation is available
else {
  // geolocation is not supported

Inside the navigator.geolocation object reside all of the methods for the API:

  • Geolocation.getCurrentPosition() – Determines the device’s current location.
  • Geolocation.watchPosition() – Listens for changes in the location and invokes a callback on every movement.
  • Geolocation.clearWatch() – Removes a watchPosition event handler.

Тhe getCurrentPosition() and watchPosition() methods are used in a nearly identical fashion. They both work asynchronously, trying to obtain the device position and depending on the outcome of the attempt call a success callback or an error callback if it’s provided.


    // Success callback
    function(position) {

        position is an object containing various information about
        the acquired device location:

        position = {
            coords: {
                latitude - Geographical latitude in decimal degrees.
                latitude - Geographical longitude in decimal degrees. 
                altitude - Height in meters relative to sea level.
                accuracy - Possible error margin for the coordinates in meters. 
                altitudeAccuracy - Possible error margin for the altitude in meters. 
                heading - The direction of the device in degrees relative to north. 
                speed - The velocity of the device in meters per second.
            timestamp - The time at which the location was retrieved.


    // Optional error callback

        In the error object is stored the reason for the failed attempt:

        error = {
            code - Error code representing the type of error 
                    1 - PERMISSION_DENIED
                    2 - POSITION_UNAVAILABLE
                    3 - TIMEOUT

            message - Details about the error in human-readable format.


As you can see, using the Geolocation API is pretty straightforward. We just have to call the right method, wait for it to return the coordinates, and then do whatever we want with them.

User permission

Since the Geolocation API exposes deeply personal information, when an application tries to access it for the first time, a dialog pops up requesting permission. This ensures that users will not have their private data revealed unless they explicitly allow it.

Permission Dialog In Desktop Chrome

Permission Dialog In Chrome On Android

Permission Dialog In Chrome On Android

The browser usually takes care for displaying the dialog, but permission can also be requested programmatically by the developer. This is sometimes necessary, since once denied the original browser-generated dialog doesn’t show itself a second time.

Secure hosts

Another protective measure is the usage of an HTTPS connection. Due to a new web security policy, Google Chrome (both desktop and mobile versions) no longer allows non-secure hosts to run the Geolocation API. Instead, developers who want to use this feature are required to serve their apps over HTTPS, thus minimizing the risks of having people’s data stolen or abused.

You can read more about the issue in this Google Developers blog post.

Demo app

To demonstrate how the whole process works, we’ve built an oversimplified app showcasing some of the capabilities of the API. It consists of a button, which when pressed, grabs the device coordinates and feeds them to this GMaps plugin, pinpointing the location on the map.

findMeButton.on('click', function(){

    navigator.geolocation.getCurrentPosition(function(position) {

        // Get the coordinates of the current position.
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        // Create a new map and place a marker at the device location.
        var map = new GMaps({
            el: '#map',
            lat: lat,
            lng: lng

            lat: lat,
            lng: lng


The demo, as well as the full code are available on JSFiddle:

Demo on JSfiddle

Demo on JSfiddle


The Gelocation API is reliable and production ready, so we encourage you to play around with it and see what it’s capable of. If you’ve seen some original uses of this technology on the web, or you’ve made a cool project yourself, fell free to share it in the comment section below – we would love to see it!


15 Interesting JavaScript and CSS Libraries for June 2016

By Danny Markov


Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.

For June 2016 we’ve selected for you 15 free libraries which will help you build better responsive layouts, do advanced JavaScript magic, add beauty to your projects, and much more!


Use Bideo to make your landing pages cooler by adding a fullscreen video to the background. This library can be used on any HTML page, and will make sure that your video is responsive and always displayed correctly. It also offers auto play as well as showing a static cover image in case the media file takes a couple of seconds to load.


Push notifications have had good browser support for a while now but have always suffered from a lack of a working cross-browser API. Push.js is a library that comes to solve this issue and offer a clean, universal way to control desktop notifications that work equally well in Chrome, Firefox, Safari and IE.


Cutestrap is a CSS framework that serves as a smaller, more compact alternative to Bootstrap. In it’s 8kb the library packs a number of well-styled UI components, an advanced responsive grid, as well as a bunch of useful modifier classes. Due to it’s simplicity Cutestrap is very easy to customize via overwriting the default styles or by using Sass.


Timedropper is a time picker with a superb design and buttery-smooth animations. It’s built on top of jQuery and can be initialized on any input field with a simple $('#some-input').timeDropper(); call. We also highly recommend Timedropper’s brother – Datedropper, a wonderful date picker which we’ve already included in one of our previous monthly lists.


CSSgram is a library that offers more than 20 Instagram filters recreated using the CSS filter and blend properties. It doesn’t rely on JavaScript to achieve the desired effect, so it’s extremely simple to use – either through vanilla CSS or Sass. CSSgram works in all desktop and mobile browsers except for IE which doesn’t support CSS filters.

Flexbox Grid

Pure CSS library for creating responsive gird layouts. As the name suggests Flexbox Grid is based entirely on the flexible boxes model, which is the most modern and robust way to build layouts in HTML. Grids created using flexbox properties are very adaptive and can be aligned and positioned with little to no effort.

Intense Images

A beautiful image viewer that allows users to zoom into any media object and examine it closely in full screen. The library manages to look great without having any fancy animations or styles, which also makes it really easy to customize and tailor to your needs. Intense images has no external dependencies and should work in all modern browsers.


Picnic is a CSS framework that differentiates itself from the huge array of front-end libraries with one unique quality – invasiveness. What this means is that Picnic CSS doesn’t rely on the user to add classes to each element for styling. Instead it invades the default styles of the page and automatically adds it’s customization to all HTML elements, leaving the markup short and clean.


JavaScript plugin for embedding emojis, media, maps, and all kinds of cool stuff in HTML text. When initialized on an element, Embed.js will take it’s inner text and replace specific markup in the string with special content: YouTube links turn into video, Twitter links into tweets, Spotify links into audio players, etc. A long list of services are available including Github, SoundCloud, Codepen, Instagram, and many others.


Trianglify is a JavaScript library for creating geometric gradient images. After setting up the dimensions of your gradient and how it should look (colors, size of cells, etc.), the end result can be drawn directly into a canvas, as an SVG DOM node, or exported as a base64 data URI. An online generator is also available.


Replace the default alert and prompt JavaScript popups with colorful, animated dialog boxes. There are five different types of messages, lots of customization options, and all the methods you’ll ever need. SweetAlert2 has great browser compatibility and as a result you’ll get popups that look the same way across all operating systems and web browsers, including IE 10+ and Edge.

Adaptive Backgrounds

This jQuery plugin analyzes images and finds out what is their most prevalent color. The primary color is then extracted and can be applied as the background of any selected HTML element. With a sprinkle of creativity this library can be used to create amazing web designs and demos.


With Typed.js you can replace the boring placeholders in input fields with animated ones. Just write down one or more example strings and this jQuery plugin will display them in your form as if they are being typed in. There are also some customization options such as different cursors, type speed, looping, and more.


A jQuery plugin for creating tabbed content, which can also be used for making carousels and paginations. Tabslet is very lightweight, but still manages to offers a ton of useful options such as animations, different event listeners, and exceptional browser compatibility with support going all the way back to for IE7.


ContentTools is a powerful JavaScript library that can transform any HTML page into a WYSIWYG editor. There are detailed step-by-step tutorials on the project’s website which will help you get it up and running, and once properly installed ContentTools reveals countless possibilities for building wondrous interactive apps and services.


Learn Git in 30 Minutes

By Danny Markov


Git has exploded in popularity in recent years. The verison control system is used by huge open source projects like Linux with thousands of contributors, teams of various sizes, solo developers and even students.

Beginners are often terrified by all the cryptic commands and arguments that git requires. But you don’t need to know all of that to get started. You can begin by mastering a handful of the most often used ones, and then slowly build from there. And this is exactly what we will teach you today. Let’s begin!

The basics

Git is a collection of command line utilities that track and record changes in files (most often source code, but you can track anything you wish). With it you can restore old versions of your project, compare, analyze, merge changes and more. This process is referred to as version control. There are a number of version control systems that do this job. You may have heard some of them – SVN, Marcurial, Perforce, CVS, Bitkeeper and more.

Git is decentralized, which means that it doesn’t depend on a central server to keep old versions of your files. Instead it works fully locally by storing this data as a folder on your hard drive, which we call a repository. However you can store a copy of your repository online, which makes it easy for multiple people to collaborate and work on the same code. This is what websites like GitHub and BitBucket are used for.

1. Installing Git

Installing Git on your machine is straightforward:

  • Linux – Simply open up a new terminal and install git via your distribution’s package manager. For Ubuntu the command is: sudo apt-get install git-all
  • Windows – we recommend git for windows as it offers both a GUI client and a BASH comand line emulator.
  • OS X – The easiest way is to install homebrew, and then just run brew install git from your terminal.

If you are an absolute beginner, then a graphical git client is a must. We recommend GitHub Desktop and Sourcetree, but there are many other good and free ones online. Getting to know the basic git commands is still important even if you use a GUI app, so for the remaining of this lesson, this will be our only focus.

2. Configuring Git

Now that we’ve installed git on our computer, we will need to add some quick configurations. There are a lot of options that can be fiddled with, but we are going to set up the most important ones: our username and email. Open a terminal and run these commands:

$ git config --global "My Name"
$ git config --global

Every action we do in Git will now have a stamp with our name and address on it. This way users always know who did what and everything is way more organized.

3. Creating a new repository – git init

As we mentioned earlier, git stores its files and history directly as a folder in your project. To set up a new repository, we need to open a terminal, navigate to our project directory and run git init. This will enable Git for this particular folder and create a hidden .git directory where the repository history and configuration will be stored.

Create a folder on your Desktop called git_exercise, open a new terminal and enter the following:

$ cd Desktop/git_exercise/
$ git init

The command line should respond with something along the lines of:

Initialized empty Git repository in /home/user/Desktop/git_exercise/.git/

This means that our repo has been successfully created but is still empty. Now create a simple text file called hello.txt and save it in the git_exercise folder.

4. Checking the status – git status

Git status is another must-know command that returns information about the current state of the repository: is everything up to date, what’s new, what’s changed, and so on. Running git status in our newly created repo should return the following:

$ git status

On branch master

Initial commit

Untracked files:
  (use "git add ..." to include in what will be committed)


The returned message states that hello.txt is untracked. This means that the file is new and Git doesn’t know yet if it should keep track of the changes happening to that file or just ignore it. To acknowledge the new file, we need to stage it.

5. Staging – git add

Git has the concept of a “staging area”. You can think of this like a blank canvas, which holds the changes which you would like to commit. It starts out empty, but you can add files to it (or even single lines and parts of files) with the git add command, and finally commit everything (create a snapshot) with git commit.

In our case we have only one file so let’s add that:

$ git add hello.txt

If we want to add everything in the directory, we can use:

$ git add -A

Checking the status again should return a different response from before.

$ git status

On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached ..." to unstage)

	new file:   hello.txt

Our file is ready to be commited. The status message also tells us what has changed about the files in the staging area – in this case its new file, but it can be modified or deleted, depending on what has happened to a file since the last git add.

6. Commiting – git commit

A commit represents the state of our repository at a given point in time. It’s like a snapshot, which we can go back to and see how thing were when we took it.

To create a new commit we need to have at least one change added to the staging area (we just did that with git add) and run the following:

$ git commit -m "Initial commit."

This will create a new commit with all the changes from the staging area (adding hello.txt). The -m "Initial commmit" part is a custom user-written description that summarizes the changes done in that commit. It is considered a good practice to commit often and always write meaningful commit messages.


Remote repositories

Right now our commit is local – it exist only in the .git folder. Although a local repository is useful by itself, in most cases we will want to share our work and deploy it to a server or a repository hosting service.

1. Connecting to a remote repository – git remote add

In order to upload something to a remote repo, we first have to establish a connection with it. For the sake of this tutorial our repository’s address will be We advise you to go ahead and create your own empty repository at GitHub, ButBucket or any other service. The registration and setup may take a while, but all services offer good step-by-step guides to help you.

To link our local repository with the one on GitHub, we execute the following line in the terminal:

# This is only an example. Replace the URI with your own repository address.
$ git remote add origin

A project may have many remote repositories at the same time. To be able to tell them apart we give them different names. Traditionally the main remote repository in git is called origin.

2. Uploading to a server – git push

Now it’s time to transfer our local commits to the server. This process is called a push, and is done every time we want to update the remote repository.

The Git command to do this is git push and takes two parameters – the name of the remote repo (we called ours origin) and the branch to push to (master is the default branch for every repo).

$ git push origin master

Counting objects: 3, done.
Writing objects: 100% (3/3), 212 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
 * [new branch]      master -> master

Depending on the service you’re using, you will need to authenticate yourself for the push to go through. If everything was done correctly, when you go in your web browser to the remote repository created earlier, hello.txt should be available there.

3. Cloning a repository – git clone

At this point, people can see and browse through your remote repository on Github. They can download it locally and have a fully working copy of your project with the git clone command:

$ git clone

A new local respository is automatically created, with the github version configured as a remote.

4. Getting changes from a server – git pull

If you make updates to your repository, people can download your changes with a single command – pull:

$ git pull origin master

 * branch            master     -> FETCH_HEAD
Already up-to-date.

Since nobody else has commited since we cloned, there weren’t any changes to download.


When developing a new feature, it is considered a good practice to work on a copy of the original project, called a branch. Branches have their own history and isolate their changes from one another, until you decide to merge them back together. This is done for a couple of reasons:

  • An already working, stable version of the code won’t be broken.
  • Many features can be safely developed at once by different people.
  • Developers can work on their own branch, without the risk of their codebase changing due to someone else’s work.
  • When unsure what’s best, multiple versions of the same feature can be developed on separate branches and then compared.

1. Creating new branches – git branch

The default branch of every repository is called mater. To create additional branches use the git branch command:

$ git branch amazing_new_feature

This just creates the new branch, which at this point is exactly the same as our master.

2. Switching branches – git checkout

Now, when we run git branch, we will see there are two options available:

$ git branch
* master

Master is the current branch and is marked with an asterisk. However, we want to work on our new amazing features, so we need to switch to the other branch. This is done with the git checkout command, expecting one parameter – the branch to switch to.

$ git checkout amazing_new_feature

3. Merging branches – git merge

Our “amazing new feature” is going to be just another text file called feature.txt. We will create it, add it, and commit it.

$ git add feature.txt
$ git commit -m "New feature complete."

The new feature is complete, we can go back to the master branch.

$ git checkout master

Now, if we open our project in the file browser, we’ll notice that feature.txt has disappeared. That’s because we are back in the master branch, and here feature.txt was never created. To bring it in, we need to git merge the two branches together, applying the changes done in amazing_new_feature to the main version of the project.

git merge amazing_new_feature

The master branch is now up to date. The awesome_new_feature branch is no longer needed and can be removed.

git branch -d awesome_new_feature



In the last section of this tutorial, we are going to take a look at some more advanced techniques that are very likely to come in handy.

1. Checking difference between commits

Every commit has it’s unique id in the form of a string of numbers and symbols. To see a list of all commits and their ids we can use git log:

$ git log

commit ba25c0ff30e1b2f0259157b42b9f8f5d174d80d7
Author: Tutorialzine
Date:   Mon May 30 17:15:28 2016 +0300

    New feature complete

commit b10cc1238e355c02a044ef9f9860811ff605c9b4
Author: Tutorialzine
Date:   Mon May 30 16:30:04 2016 +0300

    Added content to hello.txt

commit 09bd8cc171d7084e78e4d118a2346b7487dca059
Author: Tutorialzine
Date:   Sat May 28 17:52:14 2016 +0300

    Initial commit

As you can see the ids are really long, but when working with them it’s not necessary to copy the whole thing – the first several symbols are usually enough.
To see what was new in a commit we can run git show [commit]:

$ git show b10cc123

commit b10cc1238e355c02a044ef9f9860811ff605c9b4
Author: Tutorialzine
Date:   Mon May 30 16:30:04 2016 +0300

    Added content to hello.txt

diff --git a/hello.txt b/hello.txt
index e69de29..b546a21 100644
--- a/hello.txt
+++ b/hello.txt
@@ -0,0 +1 @@
+Nice weather today, isn't it?

To see the difference between any two commits we can use git diff with the [commit-from]..[commit-to] syntax:

$ git diff 09bd8cc..ba25c0ff

diff --git a/feature.txt b/feature.txt
new file mode 100644
index 0000000..e69de29
diff --git a/hello.txt b/hello.txt
index e69de29..b546a21 100644
--- a/hello.txt
+++ b/hello.txt
@@ -0,0 +1 @@
+Nice weather today, isn't it?

We’ve compared the first commit to the last one, so we see all the changes that have ever been made.

2. Fixing a commit

If you notice that you’ve made a typo in your commit message, or you’ve forgotten to add a file and you see right after you commit, you can easily fix this with git commit --amend. This will add everything from the last commit back to the staging area, and attempt to make a new commit. This gives you a chance to fix your commit message or add more files to the staging area.

For more complex fixes that aren’t in the last commit (or if you’ve pushed your changes already), you’ve got to use git revert. This will take all the changes that a commit has introduced, reverse them, and create a new commit that is the exact opposite.

The newest commit can be accessed by the HEAD alias.

$ git revert HEAD

For other commits it’s best to use an id.

$ git revert b10cc123

When reverting older commits, keep in mind that merge conflicts are very likely to appear. This happens when a file has been altered by another more recent commit, and now Git cannot find the right lines to revert, since they aren’t there anymore.

3. Resolving Merge Conflicts

Apart from the scenario depicted in the previous point, conflicts regularly appear when merging branches or pulling someone else’s work. Sometimes conflicts are handled automatically by git, but other times the person dealing with them has to decide (and usually handpick) what code stays and what is removed.

Let’s look at an example where we’re trying to merge two branches called john_branch and tim_branch. Both John and Tim are writing in the same file a function that displays all the elements in an array.

John is using a for loop:

// Use a for loop to console.log contents.
for(var i=0; i<arr.length; i++) {

Tim prefers forEach:

// Use forEach to console.log contents.
arr.forEach(function(item) {

They both commit their code on their respective branch. Now if they try to merge the two branches they will see the following error message:

$ git merge tim_branch 

Auto-merging print_array.js
CONFLICT (content): Merge conflict in print_array.js
Automatic merge failed; fix conflicts and then commit the result.

Git wasn’t able to merge the branches automatically, so now it’s up to the devs to manually resolve the conflict. If they open the file where the conflict resides, they’ll see that Git has inserted a marker on the conflicting lines.

<<<<<<< HEAD
// Use a for loop to console.log contents.
for(var i=0; i<arr.length; i++) {
// Use forEach to console.log contents.
arr.forEach(function(item) {
>>>>>>> Tim's commit.

Above the ===== we have the current HEAD commit, and below the conflicting one. This way we can clearly see the differences, and decide which is the better version, or write a new one all together. In this situation we go for the latter and rewrite the whole thing, removing the markers to let Git know we’re done.

// Not using for loop or forEach.
// Use Array.toString() to console.log contents.

When everything is set, a merge commit has to be done to finish the process.

$ git add -A
$ git commit -m "Array printing conflict resolved."

As you can see this process is quite tiresome and can get extremely hard to deal with in large projects. Most developers prefer to resolve conflicts with the help of a GUI client, which makes things much easier.

4. Setting up .gitignore

In most projects there are files or entire folders that we don’t want to ever commit. We can make sure that they aren’t accidentally included in our git add -A by creating a .gitignore file:

  1. Manually create a text file called .gitignore and save it in your project’s directory.
  2. Inside, list the names of files/directories to be ignored, each on a new line.
  3. The .gitignore itself has to be added, committed and pushed, as it is just like any other file in the project.

Good examples for files to be ignored are:

  • log files
  • task runner builds
  • the node_modules folder in node.js projects
  • folders created by IDEs like Netbeans and IntelliJ
  • personal developer notes

A .gitignore banning all of the above will look like this:


The slash at the end of some of the lines signals that this is a folder and we are ignoring everything inside it recursively. The asterisk serves it’s usual function as a wild card.


This ends our tutorial on git! We tried our best to bring you only the most important information you need, presented as short and concise as possible.

Git is quite complex and has a lot more features and tricks to offer. If you wish to find out more, here are some learning resources we recommend:

  • The official Git docs, including a whole book and video lessons – here.
  • Getting git right – Atlassian’s collection of tutorials and articles – here.
  • A list of GUI clients – here.
  • Git cheat sheet (PDF) – here.