Learning Bootstrap 3
Video Description
In this Bootstrap 3 training course, expert author Mark Shufflebottom shows you how to use this front end framework to design a website. Bootstrap is easy to use and allows a designer to specify exactly how the site will look and behave on a number of different displays, including mobile, desktop, and tablet. To get the most out of this tutorial you should already have a fundamental understanding of HTML, CSS, and JavaScript.
You will start the course by learning about the grid system, including how to use containers, nested columns, and column offsets. You will move into learning about the site structure, following along with Mark as he teaches you how to build a NavBar, build the intro section, info panel, and more. This video tutorial will also teach you how to set up the home page, blog page, client page, and contact page. Finally, Mark will show you how to customize the Bootstrap download and customize colours.
Once you have completed this computer based training course, you will have a solid understanding of how to design a website with Bootstrap 3, and be able to apply this knowledge to your own web development projects. Working files are included, allowing you to follow along with the author throughout the lessons.
Course Curriculum
Chapter 1.Introduction | |||
1 Introduction to Bootstrap 3 | 00:01:58 | ||
2 What To Expect | 00:01:14 | ||
3 The Site Build Plan | 00:02:29 | ||
4.How To Access Your Working Files | 00:03:22 | ||
Introduction To Bootstrap_Working files | 00:00:00 | ||
Chapter 2.Setting Up Bootstrap | |||
5 Examining The Framework Files | 00:05:58 | ||
6 Documentation Overview | 00:02:48 | ||
Setting Up Bootstrap_Working files | 00:00:00 | ||
Chapter 3.The Grid System | |||
7 Using Containers | 00:03:36 | ||
8 Coding Rows And Columns In HTML | 00:01:20 | ||
9 The Grid | 00:02:53 | ||
10 Controlling The Grid Across Devices | 00:06:29 | ||
11 Column Offsets | 00:03:14 | ||
12 Using Nested Columns | 00:04:04 | ||
13 Column Ordering | 00:02:27 | ||
The Grid System_Working files | 00:00:00 | ||
Chapter 4.Responsive Helpers | |||
14 Responsive Images | 00:02:42 | ||
15 Responsive Utility Classes | 00:02:58 | ||
16 Media Queries and Breakpoints | 00:02:00 | ||
Responsive Helpers_Working files | 00:00:00 | ||
Chapter 5.Site Structure | |||
17 Building A NavBar | 00:08:19 | ||
18 Fixing The NavBar To The Top Of The Browser | 00:02:34 | ||
19 NavBar Dropdowns | 00:03:13 | ||
20 Building the Intro Section | 00:07:13 | ||
21 Building The Marketing Panel | 00:04:39 | ||
22 Button Options | 00:02:57 | ||
23 Building The Info Panel | 00:03:30 | ||
24 Block Quote | 00:02:03 | ||
25 Togglable Tabs | 00:06:05 | ||
26 Glyphicons | 00:02:05 | ||
27 Building The Footer | 00:03:26 | ||
28 Using Custom Typography | 00:02:42 | ||
Site Structure_Working files | 00:00:00 | ||
Chapter 6.The Home Page | |||
29 Image Carousel | 00:06:58 | ||
30 Carousel Navigation | 00:04:23 | ||
31 Four Column Grid | 00:05:48 | ||
The Home Page_Working files | 00:00:00 | ||
Chapter 7.The Blog Page | |||
32 Setting up the grid structure | 00:02:42 | ||
33 Adding the blog entries | 00:04:54 | ||
34 Pagination Component | 00:01:52 | ||
35 Search Box Inline Form | 00:03:15 | ||
36 Using List Groups | 00:02:31 | ||
37 Media Component | 00:02:56 | ||
The Blog Page_Working files | 00:00:00 | ||
Chapter 8.The Clients Page | |||
38 Setting The Grid | 00:01:58 | ||
39 Thumbnails | 00:03:05 | ||
40 Tooltips | 00:01:42 | ||
41 Collapse Panels | 00:03:52 | ||
The Clients Page_Working files | 00:00:00 | ||
Chapter 9.The Contact Page | |||
42 Setting The Grid | 00:02:08 | ||
43 Adding a Google Map | 00:01:55 | ||
44 Horizontal Forms | 00:04:28 | ||
45 Modals | 00:03:12 | ||
46 Building The Sidebar | 00:02:34 | ||
The Contact Page_Working files | 00:00:00 | ||
Chapter 10.Customizing Bootstrap | |||
47 Customizing The Download | 00:03:01 | ||
48 Customizing Colours | 00:02:58 | ||
49 Starter Templates | 00:02:04 | ||
Chapter 11.About The Author | |||
50 About The Author | 00:00:57 |
Course Reviews
No Reviews found for this course.