Hamburger Menu with CSS Animations: Free Template + Tutorial

Published on: Feb 03 2020 by Anli - Leave a Comment

Hamburger Menu with CSS Animations: Free Template + Tutorial

In simple words, in modern web design, a “Hamburger Menu” is a simple menu either horizontal or vertical, that can be activated or deactivated by clicking on a button which has an icon with three rows when the menu is closed, and an “X” sign when the menu is open.

This icon with three rows resembles a hamburger and gives the name “Hamburger Menu” to this type of menu.

Usually the menu comes with nice animations when you open or close it that can be created with CSS3, JavaScript or a mix of these two as in the case we’ll see today.

So, as you can read from the title, today we will see how to create a Hamburger Menu with animations.

It will be an horizontal navbar / top menu and at the end you will also have all the files as a handy template to customize and use in projects.

Let’s begin!

Read more …

10 Landing Page Templates To Promote Your Next Big Idea

Published on: Oct 03 2019 by Anli - Leave a Comment

10 Landing Page Templates To Promote Your Next Big Idea

Every advertising campaign you run can be helped with the use of an effective landing page which highlights all the advantages of your services or products, and as a result, captures many leads. In this case, a ready-made solution can be a good choice.

To help you with that, today I have a selection of landing page templates by TemplateMonster (affiliate link), designed for different business types and goals.

And if you want, here you can also see some of their best-selling landing page templates (aff. link).

So, let’s take a look at the templates of this collection!

Read more …

Bootstrap 4 Sidebar Menu: Tutorial + Free Template

Updated on: Feb 21 2023 by Anli - 2 Comments

Bootstrap 4 Sidebar Menu: Tutorial + Free Template

In the last few years, I’ve always been amazed by the beautiful admin templates created by different developers, using the Bootstrap framework and listed for sale on ThemeForest or WrapBootstrap, or just released for free to gain some exposure for their work.

The part of these templates that has really caught my attention and that has been very popular these days, is the collapsible sidebar menu.

This type of menu is not only very nice to see, but it also improves the user interface and usability of these templates, especially admin templates. Google has also used it as part of their Material Design style.

As you probably know UI and UX have been two very popular concepts in the last few years, making the internet full of articles about them, and I think learning how to improve them in your websites, templates and web apps is a good thing as it can increase users and returning visitors.

So, for fun, a few days ago I decided to learn how to create one of these sidebar menus using Bootstrap.

I have created many templates in the past but have never used this type of menu, and after asking the developer’s best friend, Google, I found this (very useful) tutorial by Ondrej.

After a few hours of study and work, I created a template with a beautiful sidebar menu and wrote this tutorial hoping that you can learn something from it too. Or just download the template and use it in your projects 😉 .

So, in a few words, if you don’t want to read all of the above, in this tutorial we’ll see how to create a page with a collapsible sidebar menu using Bootstrap.

Let’s get started!

Read more …

Bootstrap vs Foundation: Which One is Better?

Published on: Jul 10 2019 by Anli - Leave a Comment

Bootstrap vs Foundation: Which One is Better?

Web designing has come a long way throughout the years, as the number of people who took an interest in creating and purchasing websites grew in astonishing numbers.

Things went from simply focusing on practicality and functionality, to creating websites that are beyond impressive in their layout and dynamism.

But, what the regular web visitor or website buyer might not always realize is the amount of work and effort it takes to create these captivating websites that will make a project or business truly stand out.

However, as with most things, the first step behind any project is deciding what will it be created with, which brings us to today’s topic.

Deciding on the right framework to utilize for your next web design project is a very important part of the whole ordeal and it gets especially complicated when going through the several options available, and the suggestions about which one is better are overwhelming.

The discussion of Bootstrap vs. Foundation has been going on for years and a conclusion is yet to be drawn.

Our intention is to give you a general idea about what to expect from each of these two very popular frameworks and to help you decide which one would be the better choice for the project you intend to work on.

With that being said, let’s get started and hopefully you will have a better picture by the end of this article.

Read more …

Bootstrap 4: How To Center Align a “Div” or “Form” Vertically and Horizontally

Published on: Jun 11 2019 by Anli - 1 Comment

Bootstrap 4: How To Center Align a Div or Form Vertically and Horizontally

Centering an HTML element horizontally with CSS, be it a “div” or a “form”, has been always easy for web developers at least for the past 10 years or so.

But what about centering the same element vertically, so that it always remains in the center of the page or in the center of its parent element?

Well, this has been a very tricky task for years (at least for me) and some developers have also used JavaScript in some situations to obtain the desired result.

This has continued to be a problem, at least for me, until the advent of the CSS flexbox layout and the flexbox utilities offered in Bootstrap 4.

And that’s what we’ll be talking about in today’s tutorial.

We’ll see 3 examples where we take a “div” and a “form” and align them in the center, vertically and horizontally, using Bootstrap 4 (current version 4.3.1).

At the end of the tutorial, you can download all the files as handy templates.

Let’s begin!

Read more …

Bootstrap Carousel with Videos: How To + Template

Updated on: Mar 05 2020 by Anli - 11 Comments

Bootstrap Carousel with Videos: How To + Template

A few months ago I published a tutorial about how to use videos with modals in Bootstrap.

Today we’ll see how to use videos in Bootstrap carousels.

You’ll learn how to embed videos from popular video sites like YouTube and Vimeo, and use them in slideshows in your web projects.

At the end, you can download all the template files and use them easily when you need them. Let’s begin!

Read more …

Material Design vs Bootstrap: Which One is Better?

Published on: May 06 2019 by Anli - Leave a Comment

Material Design vs Bootstrap: Which One is Better?

Owning a brand and looking to expand your business comes with certain requirements and suggestions as to which is the best way to go about it.

Flyers, ads on TV, billboards and radio advertising used to be the chosen methods of promoting a brand or business. They are still a very useful way of expanding your clientele and getting more people’s interest about what you are promoting, but things have changed considerably in the past decade.

With Internet access becoming available all around the world, brands have managed to expand beyond their local or national boundaries, making it possible for them to reach audiences and clients in countries that would have been impossible a few years ago.

Whether you are an artist, musician, a manager or a business owner, online presence is the easiest and most important method of getting recognition.

While there are numerous ways of expanding online presence, a website is most certainly necessary.

Enter you, a web developer looking for the best and most efficient product to build great websites for your clients (or yourself).

Our purpose for today is to look at two of the most popular methods for web application development in the last few years, Bootstrap and Material Design. In doing so, we will learn more about their differences and which one would be the better suited for your next project.

Let’s get started!

Read more …