Automated web application with Bootstrap 4 & Material Design

bootstrap automation tutorial

What will you learn

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

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

Change the website content based on user action

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

Use various methods to trigger of Bootstrap modals

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

Create a scoring algorithm

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

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

Create a related content system

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

Create automated marketing actions

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

Perform web and behavioral analysis

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

Measure the user engagement and the effectiveness of your user interface

Stunning design is 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 at.

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 example project and its objectives.

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

Start

II. Preparing the environment

At the beginning of any 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 managment.

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

Start

IV. Labels

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

Labels are an incredibly useful concept when creating an automation algorithm.

They let us classify a 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 about your user and reacts appropriately to his actions.

Start

VI. Modals

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

You will create a Cookies Modal, which is displayed only once; a 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 has spent more than 20 seconds on a specific page.

Start

VII. Scoring system

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

Thanks to this Scoring we can create a website which learns about 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 the 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 the basics of web analytics and behavioral analytics.

This is the first step towards "big data" analytics.

Start

IX. Events and goals

Goals and events are two of the most important concepts in web analytics.

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

Start

Rate this lesson

Previous lesson Next lesson

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

About the 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