Become a Bootstrap Expert: Build 20 Layouts!
4.5 (57 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,741 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Become a Bootstrap Expert: Build 20 Layouts! to your Wishlist.

Add to Wishlist

Become a Bootstrap Expert: Build 20 Layouts!

The largest Bootstrap video course online is here. Follow along as we build 20 complete layouts in Bootstrap 3 and 4!
4.5 (57 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,741 students enrolled
Created by Ajdin Imsirovic
Last updated 5/2017
English
Current price: $10 Original price: $35 Discount: 71% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 17.5 hours on-demand video
  • 8 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build any layout with Bootstrap
View Curriculum
Requirements
  • Basic understanding of how html and css work is a plus, but not a requirement
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

Daria Layout - With this layout we will dive straight in into making a completely custom layout.

Healthy Blog - A layout for a health-related blog, with a transparent nav and a large header image, using panel component for blog entries and colorful sidebars.

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

Who is the target audience?
  • Novice web designers
  • Entrepreneurs
  • Anyone interested in front-end development
Students Who Viewed This Course Also Viewed
Curriculum For This Course
179 Lectures
17:33:36
+
Introduction: Get to Know Bootstrap and It's Grid System
3 Lectures 17:30

What is responsive web design? What is Bootstrap? How does it help us develop websites faster? How does the grid system works? All of these questions are answered in this introductory video.

Preview 08:47

This video describes how the Bootstrap grid works, i.e. how these classes are used: col-xs-*, col-sm-*, col-md-*, and col-lg-*.

Preview 02:57

In this video, we will discuss the difference between responsive and non-responsive sites. We will also see a non-responsive site changed to a responsive site simply by referencing Bootstrap css and linking to it from our html.

Here we will demonstrate the reason why Bootstrap helps us with RWD: We don't even have to touch css! We just need to reference proper Bootstrap css classes in our html, and we have a responsive site out-of-the-box!

Also, please check out this video's resources, there is a download available!

How Does a Responsive Layout Work in Practice?
05:46
+
Layout 1: My Portfolio
5 Lectures 37:21

In this video, we will learn how to get the source code of a starter barebones template from the official Bootstrap website, and how to change the navbar by using Bootstrap's pre-made navbar classes.

We will also learn how to start adding responsive placeholders for our images. In other words, we'll start building our responsive layout portfolio.

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

Downloading Bootstrap and Setting Up the Basic File Structure
08:30

In this video we will learn how to add responsive images to our portfolio.

Adding Images to My Portfolio Layout
02:54

This video explains how to style a simple footer and how to properly add custom css classes inside our html structure, as well as how to declare those custom styles in our custom.css file.

Working on the Footer
02:10

In this video, we will build the about me page. We will add some custom styles, use placehold.it for our images, and get introduced with the concept of bootstrap components by adding a component to our about me page.

Building the About me Page
14:33

In this video, we'll add a Google Map to our contact page. We will add an inline form under it and we will use a Bootstrap utility class to hide the map from mobile devices.

Adding the Contact Page
09:14
+
Layout 2: Daria Layout
46 Lectures 03:07:32

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

Preview 01:57

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

Preview 01:17





Tweaking the Navbar and Logo
04:46


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
+
Layout 3: Health Blog
32 Lectures 02:43:24

Remove the Jumbotron
00:41

Making the Navbar Transparent
03:16

Changing the Color of Nav Links
03:00

Changing the Color of Nav Brand and Nav Link Pseudo Classes
06:23

Adding Underlines to Nav Links on Wide Screens
05:14

Adding a Background Image to the Body Element
01:46

Moving the Background Image to Header
01:26

Adding the "Welcome to Our Blog" Heading
02:40

Gradient Overlay Problem
05:24

Fixing the Gradient Overlay Problem
02:15

Fixing the Transparent Background on the Nav for Mobile Resolution
01:59

Ajdusting the Position of the Background Image on the Mobile View
02:36

Customizing the Hamburger Styles and the Nav Items on Mobile Nav
05:54

Solving the Box Shadow Issue on Mobile Navbar
03:10

Completing the Navbar Customization
04:54

Adding Breadcrumbs and a Search Form
06:34

Adding a Background Image from a Microstock site, Tweaking the Nav Brand
08:38

Making it "Real"
05:08

Tweaking the Navbar, the Background, and the Search Input Field
06:20

Fixing Small Navigation Hover, Breadcrumb Search Padding
03:46

Start Working on the Main Section
04:50

Building the Blog Post Intro Panel, Part One
09:55

Building the Blog Post Intro Panel, Part Two
04:47

Building the Blog Post Intro Panel, Part Three
10:00

Building the Blog Post Intro Panel, Part Four
04:33

Cleaning Up Our Inline Styles
10:00

Wrapping Up the Blog Post Intro Panel
04:06

Adding the Sidebar Panel, Part One
06:15

Adding the Sidebar Panel, Part Two
09:20

Completing the Sidebar, Adding the Footer and the Pagination
09:48

Fixing the Pagination and Centering It
03:15
+
Adding Git to Our Workflow
3 Lectures 13:04

In this lecture we will use several previously mentioned git commands to start tracking changes we make to our layout. Also, we will see the power in cloning and manipulating repositories from Github.

Begin using Git in our C9 IDE
04:30

In this lecture, we will continue working with some basic git commands to track the development of our layout.

Begin using Git in our C9 IDE, part 2
04:38

Using the Bootstrap 3 and 4 Autocomplete plugins for Sublime Text
03:56
+
Questions and Answers
1 Lecture 02:29

This video demonstrates how to expand an abbreviation in Sublime Text and c9 IDE.

Question 001: How to Get the Lorem1000 Expansion to Work?
02:29
+
Working with C9.io; Bower, Bootstrap CSS and Components in Depth
76 Lectures 09:11:06
Installing Bootstrap 3 via bower
08:04

Add Jekyll and Use Bootstrap 3 With It
15:54

Add container fluid, add col widths to breakpoints, and use bg color classes
10:35

Offseting Columns
06:43

Keeping our Code Dry with Jekyll Partials
13:43

It's time to start using git to increase our efficiency and protect our code. This video is a very simple explanation of the most basic git concepts. 

However, these basic concepts will take us a long way, and allow us to improve our skills and speed up our development.

A Simple Introduction to Git and the Three Trees Concept
07:54

Tracking Our Code and Serving Our Site with Github
13:40

Comparing Changes Between Commits
19:18

Sass Style Options in Config Yaml
04:24

Overriding Offsets from Lower Grid Tiers
06:58

Nesting Columns
14:20

Applying Code Formatting Command in C9 Messes with Jekyll's frontmatter
02:11

Introducing Emmet Plugin to Speed Up Our Development
03:04

Column Ordering with Push and Pull Classes
13:30

Typography Headings and the Small Element
13:41

Typography Lead Inline Text Elements and Alignment Classes
12:39

Verifying the Typography Page is Displayed on Github and Commiting Changes
02:51

Typography Continued
08:55

Lists
10:13

Commiting Messages with Nano Editor
07:10

Description Lists
08:31

Typography, Displaying Code
09:59

Working with Tables
17:17

Working with Forms; A Basic Form Example
14:33

Working with Inline Forms
12:44

Working with Inline Forms with Input Add-ons
08:23

Working with Horizontal Forms
08:05

Working-with-forms: Supported Controls
07:36

Working with Forms: Textarea
01:52

Working with Checkboxes and Radios
05:10

Working with Forms: Using Selects
03:53

Working with Static Controls in Forms
03:24

Working with Input States in Forms
05:36

Working with Forms: Associating Help Text with Form Controls
03:26

Working with Forms: Validation States
14:08

Working with Forms: Control Sizing
03:05

Button Tags, Button Options, and Button Sizes
05:10

Active and Disabled Buttons
03:28

Working with Images, Responsive Images, and Image Shapes
05:51

Helper Classes: Contextual Colors and Contextual Backgrounds
01:44

Using Close and Caret Icons
01:22

Quick Floats
02:43

Centering Content Blocks
10:10

Using Clearfix
06:36

Showing and Hiding Content
02:53

Screen Reader and Keyboard Navigation Content, and Image Replacement
02:37

Responsive Utilities, Visibility and Print Classes
09:13

Using Less and Sass
04:53

Components: Glyphicons
05:18

Components: Dropdowns
04:39

Components: Expanding Dropdowns Upwards (Dropups)
03:07

Components: Aligning Dropdowns
04:02

Components: Dropdown Headers, Dividers, and Disabled Menu Items
02:39

Components: Button Groups, Button Toolbars, and Button Group Sizing
03:31

Components: Horizontal and Vertical Button Groups with Nested Dropdowns
04:06

Components: Justified Button Groups
03:28

Components: Single Button Dropdowns
01:51

Split Button Dropdowns, Button Dropdown Sizing, and Dropup Variation
08:54

Input Groups
18:40

Navs (Tabs and Pills)
06:19

Navbar
13:57

Breadcrumbs
03:02

Pagination
05:27

Labels
06:00

Badges
03:43

Jumbotron
03:24

Page Header
01:32

Thumbnails
10:20

Alerts
05:44

Progress Bars
07:43

Media Object
10:25

List Group
04:42

Panels
07:19

Responsive Embed
04:32

Great Design and the Well Component
07:41

Thinking About Components to Use
08:52
+
Layout 4: A Custom Bootstrap Docs Site
9 Lectures 55:16
Layout 4 Navbar, part 1
08:16

Layout 4 Navbar, part 2
05:19

Layout 4 Navbar, part 3
04:51

Removing the Forms TOC
04:45

Add a Dropdown Heading to the Navbar
06:18

Use git diff to See the Actual Changes to Code
05:41

Reviewing Completed Navbar 1
04:52

Adding Navbar 2
08:55

How to Deal with Too Many Nav Items in a Navbar
06:19
+
Layout 5: Accountants Academy
4 Lectures 25:54
Links to Images from Behance.net, Freepik.com, and Pexels.com
02:08

Set Up a New Project on C9 with npm, Bower, and Jekyll
10:15

Setting up Git, and publishing the site on Github
07:01

089 Wireframing our layout and organizing images
06:30
About the Instructor
Ajdin Imsirovic
4.3 Average rating
102 Reviews
6,396 Students
3 Courses
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.