3.45 out of 5
37 reviews on Udemy

Bootstrap 4 Theme Development Masterclass

Let's develop a site theme with Parallax effect, Retina support and cool 3rd party plugins such as Isotope and Flickity!
René Puchinger
3,193 students enrolled
Develop modern responsive pages and themes with Retina device support using the Bootstrap 4 framework.
Use 3rd party plugins such Isotope and Flickity.
Easily implement the Parallax background effect and animation effects.

Do you want to create professional and great looking HTML5 themes?

Then this course is for you.

You will learn how to create a modern responsive theme using the Bootstrap framework. We will proceed from scratch and by means of an intuitive iterative process. This means that we first create a basic structure for our theme which we will further refine to achieve an awesome result.

The features of the theme created with this course include:
* Fully responsive on any device.
* High resolution with Retina support.
* Clearly defined color scheme.
* Typography used the smart way.
* Parallax and animation effects to enhance user experience.
* Portfolio gallery by means of the Isotope plugin.
* Flickable testimonials section using the Flickity plugin.
* and more…

There are lots of facets of web development which we will cover. So let’s start today!


Installing the Necessary Tools

We will install and present the tools which we will use throughout the course. Basically you'll need a code editor, a photo manipulation program and a web browser.

Downloading and Extracting Bootstrap

We will download and extract Bootstrap 4 from the official site.

Bootstrap Basics

Hello World Page

We will create a simple Hello World page. This will be super easy.

The Bootstrap Grid

We will present an overview of the Bootstrap responsive grid.

Using Bootstrap Components - The Header

We will code our first page header with a menu.

The Content Area

We will add a hero area with some content. This is still pretty basic stuff.

Creating a Decent Looking Page

Refining the Header and the Hero Area

We will refine the header and hero area and we will add a logo image and a background full-width image to the hero area.

Creating the Services Section

We will create a "Services" section to our page and we will decorate the section elements with FontAwesome iconic font.

Adding The Portfolio Section

We will create a "Portfolio" section to our page by using the Bootstrap grid elements with some images. We will also use a PrettyPhoto plugin to add a gallery effect.

Creating the Testimonials Section and The Contact Form

We will add a Testimonials section to our page. Later we will make it pop with the Flickity plugin, but for now we will stick with simplicity.

Finalizing the Page and Spicing it Up

Finalizing the Menu and Making it Smooth

We will refine and finish our header by digging further into the styles and we will create a smooth animation effect.

Enhancing the Gallery and Testimonials by Means of Isotope and Flickity

We will use two powerful jQuery plugins -- Isotope and Flickity -- to make the Portfolio and Testimonials sections really stand out.

Parallax Scrolling Effect and Animation Effects

We will enhance the user experience of our theme by adding a subtle parallax effect and some nice looking animations.

Retina Device Support

Finally we will discuss an important topic which will make our theme Retina ready. This means that the theme will be crisp even on high resolution devices.

Bonus Section

Preparing Your Images For a Great Theme

Not all the images that you purchase or download are directly ready to be used in your theme. Here I present few quick tips to make them better.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
3.5 out of 5
37 Ratings

Detailed Rating

Stars 5
Stars 4
Stars 3
Stars 2
Stars 1
30-Day Money-Back Guarantee


1 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion