Bootstrap 4 Theme Development Masterclass
3.6 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,645 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bootstrap 4 Theme Development Masterclass to your Wishlist.

Add to Wishlist

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!
3.6 (30 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,645 students enrolled
Created by René Puchinger
Last updated 4/2017
Current price: $10 Original price: $150 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 39 mins on-demand video
  • 5 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
  • You should already have prior knowledge of HTML, CSS and Javascript.

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!

Who is the target audience?
  • This course is for web developers and web designers who want to create great looking sites with Bootstrap or enhance their skills in this field.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
2 Lectures 03:15

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.

Preview 02:12

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

Preview 01:03
Bootstrap Basics
4 Lectures 09:28

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

Preview 01:03

We will present an overview of the Bootstrap responsive grid.

Preview 03:42

We will code our first page header with a menu.

Preview 01:37

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

Preview 03:06
Creating a Decent Looking Page
4 Lectures 15:05

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.

Refining the Header and the Hero Area

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

Creating the Services 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.

Adding The Portfolio Section

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.

Creating the Testimonials Section and The Contact Form
Finalizing the Page and Spicing it Up
4 Lectures 09:16

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

Finalizing the Menu and Making it Smooth

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

Enhancing the Gallery and Testimonials by Means of Isotope and Flickity

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

Parallax Scrolling Effect and Animation Effects

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.

Retina Device Support
Bonus Section
1 Lecture 02:01

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.

Preparing Your Images For a Great Theme
About the Instructor
René Puchinger
3.4 Average rating
51 Reviews
3,494 Students
2 Courses
Web Developer & Web Designer

I graduated from Informatics and since then I have been working as a software development professional. I have always been interested in learning new technologies and pushing my boundaries.

My experiences include development of Bootstrap themes, development of free and commercial WordPress plugins and my specialty is programming for the WooCommerce platform.