Automated web application with Bootstrap 4 & Material Design

brandflow tutorial

What will you learn

In this tutorial, you will learn truly exciting things - creating a dynamic content and remote code injection.

These methods are also called Marketing Automation. Thanks to them you can:

Changing the website content based on user action

For example, you will learn how to display a specific content to the user who visited your website for the first time, and completely different to the returning visitor.

Using various methods triggering of Bootstrap modals

For example, based on a percentage of the scrolled page, time spent on the website or previously visited pages.

Creating a scoring algorithm

You will create a website which learns your user. We'll set points to the user for visiting specific pages, clicking on crucial buttons and doing other important activities. Then, based on gained scores we'll launch a dedicated action.

Creating a system for recovering shopping carts

Abandoned carts are one of the biggest problems of any e-commerce website. We'll create a mechanism which decreases the number of abandoned carts and helps to increase sales.

Creating a related content system

Basing on user interest, we'll create a mechanism to suggest him a similar content.

Creating automated marketing actions

You will learn how to display different prices and discounts based on various ads/traffic sources.

Web and behavioral analysis

You will learn how to measure if the website achieves your business goals and how to analyze the behavior of your users and then automatically adjust the website to their needs.

How to measure the user engagement and the effectiveness of your user interface

Stunning design it's not enough. Your user interface has to be clear and user-friendly. You will learn how to measure if it works as expected.


Below you can find a detailed list of lessons and their content.

If you are an advanced user - you can choose the lesson you want to start.

If you are a beginner - click the green button below, to start a tutorial with the recommended path.

Start Tutorial

Table of contents

I. Project introduction

A brief introduction to the concept of the project and its objectives.

You will learn what exactly dynamic content and remote code injection are and how you can use them to enhance any of your projects.

Start

II. Preparing the environment

At the beginning of any advanced project, you have to prepare the environment.

You will learn how to install node.js, Git BASH, Live Server & BrandFlow.

Start

III. Remote code injection

You will learn how to install a special script for remote code managing.

Then I'll teach you how to use it and how to change the content of the website based on user action.

Start

IV. Labels

In this lesson, you will learn how to create and use labels.

Labels are incredibly useful concept when creating an automation algorithm.

They let us classify the specific user based on his behavior. After this classification, we can trigger a dedicated action.

Start

V. First algorithm

In this lesson, I will teach you how to create your first automation algorithm.

You will learn how to create a website which learns your user and react appropriately to his actions.

Start

VI. Modals

In this lesson, we will discover powerful possibilities of modals.

You will create Cookies Modal, which is displayed only once, Related Article modal, which shows up only if the user scrolled 60% of the page and you will also create a special condition which triggers the modal if the user spent more than 20 seconds on the specific page.

Start

VII. Scoring system

In this lesson, we will create our first Scoring algorithm.

Thanks to the Scoring we can create a website which learns the user. We'll set points to the user for visiting specific pages, clicking on crucial buttons and doing other important activities. Then, based on gained scores we'll launch a dedicated action (for example we'll launch a personalized Modal).

Start

VIII. Web and behavioral analytics

In this lesson, we'll learn basics of web analytics and behavioral analytics.

This is the first step towards big data analysis.

Start

IX. Events and goals

Goals and events are 2 most important concepts of web analytics.

They help you verify if the website achieves the business goals of your company and if the UI you built is clear and efficient for the users.

Start

X. Automated paths

Coming soon

Start

Previous lesson Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits