Bootstrap 4 Theme Development Masterclass
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!
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.
We will download and extract Bootstrap 4 from the official site.
We will create a simple Hello World page. This will be super easy.
We will present an overview of the Bootstrap responsive grid.
We will code our first page header with a menu.
We will add a hero area with some content. This is still pretty basic stuff.
Creating a Decent Looking Page
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.
We will create a "Services" section to our page and we will decorate the section elements with FontAwesome iconic font.
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.
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
We will refine and finish our header by digging further into the styles and we will create a smooth animation effect.
We will use two powerful jQuery plugins -- Isotope and Flickity -- to make the Portfolio and Testimonials sections really stand out.
We will enhance the user experience of our theme by adding a subtle parallax effect and some nice looking animations.
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.
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.