Bootstrap Responsive Design
4.1 (9 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.
97 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bootstrap Responsive Design to your Wishlist.

Add to Wishlist

Bootstrap Responsive Design

Design for mobile, tablet and desktop screens with ease!
4.1 (9 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.
97 students enrolled
Last updated 3/2017
English
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • How to include Bootstrap libraries
  • How to use the Bootstrap starter template
  • Understand how to apply Bootstrap themes
  • Use Basic Bootstrap grids
  • Understand CSS Media Queries and how they relate to Bootstrap
  • Understand the transition from stacked to horizontal grids
  • Be able to create grids for mobile, tablet and desktop using Bootstrap
  • Use Boostrap to render headings, body and lead body copy
  • Use Bootstrap to render underline, small text, bold and italics
  • Adjust alignment using Bootstrap
  • Render lists, and description lists using Bootstrap
  • Create a basic table
  • Add striped rows to a table using Bootstrap
  • Create a bordered table using Bootstrap
  • Create an interactive hover table
  • Understand how the concept of responsive design applies to tables
  • Render form controls using Bootstrap
  • Create optimized text inputs using Bootstrap
  • Understand form groups
  • Work with forms on a Bootstrap grid
  • Understand and use the Boostrap Image Classes
  • Use responsive images
  • Use the Collapse Plugins
  • Create Accordions to manage content
  • Create standard and inverted navigation bars
  • Create dropdowns
  • Add buttons and form fields to nav bars
  • Create a basic carousel
View Curriculum
Requirements
  • A understanding of fundamental HTML will help make you successful
Description

It's a mobile phone world.

And a tablet world.  And a laptop world.  The fact is, it's a multi-screen world and your web sites and applications have to live in it.  

Perhaps, you're looking for an easy way to implement the principals of responsive design in your own work. Perhaps, you want an easy mobile-first framework to wrap around your own work. Or, maybe, you just want to learn the right way to do things in a multi-screen world.

From the screen in your users' pockets to the giant 4K desktop screen, your apps and web sites have to look good everywhere-- but how does someone create for such varied screen sizes and resolutions-- 

The answer is Bootstrap.

Bootstrap is a visual, client-side framework that lets you build gorgeous mobile apps and build those into full screen-compliant applications.  And, if you're going to learn Bootstrap, there is no better way then from our course Bootstrap Responsive Design. 

In this course expert developer and master instructor Mark Lassoff will take you from the very fundamentals of development with Bootstrap to applying techniques like Grids and Navigation bars.

If you're serious about responsive design, then you need Bootstrap.  And, if you're serious about learning Bootstrap you need Bootstrap Responsive Design from LearnToProgram.tv-- Over 500,000 online students can't be wrong

Who is the target audience?
  • Web Designers or Developers who want an easy responsive framework
  • Programmers who need an easy way to make apps responsive
Students Who Viewed This Course Also Viewed
Curriculum For This Course
41 Lectures
02:54:17
+
Getting Started
6 Lectures 39:37

Get started quickly and make your first Bootstrap app.

Preview 14:55

Including the Bootstrap libraries allows you to access all Bootstrap features.  You'll learn how in this video lecture.

Preview 06:01

A good starter template will make it easy to use Bootstrap for every project you start. Mark explains in this video.

Preview 03:57

Bootstrap themes can be used to skin you Bootstrap apps and give them a unique look.  You'll learn more about themes in this video.

Preview 06:54

Central to Bootstrap is the concept of the container.  You'll learn about containers and fluid containers in this video lecture.

Preview 04:02

There is a world of custom components for Bootstrap.  Mark will introduce you to them and show you how one works in this video.

Custom Components Intro: Footer
03:48
+
Containers and Grids
5 Lectures 27:32
Section Introduction: Containers and Grids
00:59

Much of the 'magic' of Bootstrap involves the grid.  The Bootstrap grid allows you to design once and display accurately across a variety of screen sizes and resolutions.

Basic Grids and Media Queries
04:20

Understanding how grids transition from stacked (mobile) to horizontal is critical to understanding how Bootstrap works.

Stacked to Horizontal Grids
07:55

You'll learn how to create grids that work on both mobile and tablet devices as Mark codes an example.

Mobile and Tablet Grids
03:53

You'll learn to create a grid that works not only on mobile and tablet, but also on desktop devices.

Mobile, Tablet and Desktop Grids
10:25
+
Typography
6 Lectures 23:03
Section Introduction: Typography
00:52

Bootstrap manages typography well.  You'll learn some basic typography tags in this video.

Headings, Body and Lead Body Copy
04:23

Mark will demonstrate more typographical tags in this video.

Underline, Small, Bold, Italics
03:13

You'll learn how to align text, use text transformations and utilize abbreviations in this video lecture.

Alignment, Transformation and Abbreviation
05:42

Bootstrap does some neat things with HTML lists.  You'll see a demonstration in this video lecture.

Lists and Description Lists
03:38

You'll learn about some unique typographical formats you can use with Bootstrap in this video lecture.

Codes, Keyboards and Variables
05:15
+
Tables
6 Lectures 21:11
Section Introduction: Tables
00:46

Mark creates a basic table styled by Bootstrap.

Basic Table
04:55

You'll learn to create a basic table with striped rows in this video lecture.

Adding Striped Rows
03:37

You'll create a neat, clean table with visible borders in this section of the course.

Creating a Bordered Table
03:33

A hover table interacts with the user as they mouseover various segments of the table. Mark demonstrates in this video.

Hover Table
05:07

Bootstrap tables can be made to be responsive.  You'll learn how in this video lecture.

Responsiveness and Tables
03:13
+
Forms
5 Lectures 26:11
Section Introduction: Forms
00:57

Bootstrap styles your form controls so they are usable across a multitude of screen sizes and resolutions.

Form Controls
07:45

Bootstrap can also be used to style various types of text inputs and make them usable.

Text Inputs
06:16

Form groups can make your forms look more interesting and be more usable at the same time.  

Form Groups
04:52

Your forms can work with your Bootstrap grid to be usable across many different sized screens.

Forms and the Grid
06:21
+
Images with Bootstrap
3 Lectures 05:57
Section Introduction: Images with Bootstrap
00:36

Bootstrap has classes that can be used to style images.  You'll learn how in this section of the course.

Bootstrap Image Classes
03:03

Responsive images adjust for screen size.  They are an important facet of responsive design.

Responsive Images
02:18
+
Collapsables
3 Lectures 09:26
Section Introduction: Collapsables
00:48

When you have a lot of content and a small screen size, collapsibles can be great to hide content until it's needed by the user. 

The Collapse Plugin
04:53

An accordion is stack of collapsibles that allow you to hide and categorize content.  It's a great way to display lots of information on mobile devices.

Accordions
03:45
+
Navigation Bars
4 Lectures 14:41
Section Introduction: Navigation Bars
00:40

Bootstrap makes good looking navigation bars easily.  You'll examine the code with Mark in this video.

Standard and Inverted Nav Bars
05:26

Easily add dropdowns to your navigation bars in this video lecture.

Dropdowns
04:23

Navigational bars can contain both buttons and forms in Bootstrap.  You'll learn how to implement in this video.

Buttons and Forms in Navbars
04:12
+
Bootstrap Carousel
3 Lectures 06:39
Section Introduction: Bootstrap Carousel
00:39

An image carousel is a common way to display a number of images in Bootstrap.  Easy to code, Mark demonstrates in this video.

Creating a Basic Carousel
02:51

Easily add captions to your image carousels.

Adding Captions
03:09
About the Instructor
LearnToProgram, Inc.
4.3 Average rating
4,420 Reviews
142,894 Students
46 Courses
Learn Web, Mobile and Game Development

LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram's valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.

With a mission of “teaching the world to code" LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.

With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company's most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.

The company is based outside of Hartford, Connecticut.