Become a Bootstrap Expert: Build 20 Layouts!

The largest Bootstrap video course online is here. Follow along as we build 20 complete layouts!
4.6 (39 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,585 students enrolled
$19
$35
46% off
Take This Course
  • Lectures 54
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English

Course Description

*** THIS COURSE IS STILL IN DEVELOPMENT. ***

*** MORE LAYOUTS WILL BE UPLOADED SOON! ***

Bootstrap is the standard in modern web development.

It is a mobile ready web development framework for HTML, CSS and JavaScript.

It is also the fastest way to build a website that works on any device, and learning it is easy.

In this course, all our experience in working with this awesome framework is structured in an easy to learn and accessible manner.

There are 20 full websites that we will build in this course, and we plan to make over 50 hours of video.

This course will be constantly updated, and with Bootstrap 4 coming out this year, you don't have to worry about this course being outdated.

Here is a list of layouts we will be building:

My Portfolio - A simple Portfolio to get introduced to some of bootstrap's functionality

(More information to be added here as the course progresses)

With all of these website layouts being built from scratch, and with the content constantly updated to the newest Bootstrap version, you have great value in this course.

What are the requirements?

  • Basic understanding of how html and css work is a plus, but not a requirement

What am I going to get from this course?

  • Build any layout with Bootstrap

What is the target audience?

  • Novice web designers
  • Entrepreneurs
  • Anyone interested in front-end development

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction: Get to Know Bootstrap and It's Grid System
Introduction
Preview
08:56
There are 4 Column Size Presets in Bootstrap
Preview
03:01
How Does a Responsive Layout Work in Practice?
06:06
Section 2: Layout 1: My Portfolio
08:56

Please note that there is a download included in this lecture. The download contains the finished code for Layout 01 - My Portfolio.

Adding Images to My Portfolio Layout
06:27
Working on the Footer
04:29
Building the About me Page
14:33
Adding the Contact Page
12:56
Section 3: Layout 2: Daria Layout
01:57

In this video, we'll have a look at the finished layout, and we'll talk about what we will be building.

01:17

In this video, we will preview the 4 different color schemes for this layout.

Setting up our theme folder
Preview
03:54
Referencing css and js and adding the custom.css file
Preview
04:22
The Best Way to Learn Bootstrap Theme Development
Preview
07:10
Changing the Navbar Color and Adding the Logo
Preview
09:06
Tweaking the Navbar and Logo
04:46
Adding the Slider
Preview
07:47
Installing Sublime Text Plugins
01:59
Adding Three Columns to the Theme
03:00
Expand Abbreviations and Wrap Them in HTML Tags with the Emmet Plugin
03:01
A Crash Course in Emmet and Adding Panel Classes to Our Three Columns
03:07
Working with Complex Emmet Abbreviations
04:52
Finishing the Structure for the Main Content
02:00
Removing Panels, Adding Color and Size to Fonts
03:41
Adding Border and Padding to Main Content
04:00
Working on Sidebar2
03:42
Adding Minor Tweaks to Sidebar1
02:57
Adding the Sidebar Navigation
02:28
Copying the Sidebar Navigation from Daria Red
02:27
Solving the Problem of Font Awesome Not Loading
02:51
Changing the Color of H3 in Sidebar2
02:51
Adding the Footer Part One
04:02
Adding the Copyright in the Footer
02:17
Adding the Footer Part Two
05:16
Adding the Footer Structure Part Three
02:13
Adding the Footer Structure Part Four
04:07
Adding the Placehold.it Image in the Footer
01:45
Using Mozilla Firefox for HTML Includes
04:02
Is There a Better Way?
02:45
Working with c9.io and PHP Includes
11:08
Adding the Header
02:59
Splitting up the Index File
07:24
Adding the Single Sidebar Pages
05:22
Adding the Full Width Page
03:51
Adding the No-Slider Page
06:00
Adding the Nav Items
03:44
Roboto Font, Nav Item Padding, Navbar Shadow
04:57
Adding More Subtle Tweaks
02:47
Fixing the Right Sidebar and Starting to Work on the Left Sidebar Nav
04:44
Fixing the Class Naming Issues and Colors for The Left Sidebar Nav
04:07
Fixing Up the Footer Area
05:01
Taking Care of the Footer Nav and Subscribe Input and Submit Button
03:04
Using CSS Specificity to Solve the Gray Border Issue
04:56
Solving the Footer Error and Adding the Contact Page
05:14
Adding Styles to the Send Button
02:32

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ajdin Imsirovic, Web Developer

Ajdin Imsirovic holds a major in English Language and Literature. He's been hacking html and css for the last 15 years, and the WAMP stack for the last 5, all the while working in a range of industries, most of which were unrelated to coding. He hopes to use his diverse set of skills to create and teach technology in a unique, user friendly manner. Currently living in Bosnia, he works as a web developer, exploring his interests in education and entrepreneurial business.


Life long learning is important to Ajdin, a dedication which grew through his employment history. In the future, Ajdin plans to develop his programming skills further, and to realize at least a dozen personal projects in development right now.


Ready to start learning?
Take This Course