Start Now with Bootstrap 3 | Ebook Included

Create a functional & responsive site with the most popular, mobile 1st framework
4.3 (98 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.
3,243 students enrolled
Instructed by Sandy Ludosky Design / Web Design
$19
$55
65% off
Take This Course
  • Lectures 34
  • Length 4 hours
  • Skill Level Beginner Level
  • 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 4/2014 English

Course Description

Let me introduce you to Bootstrap 3 : the lightweight and responsive framework for a better and faster mobile-friendly web development.

Lessons include:

  • Downloading and understanding the boostrap files
  • Review of the Bootstrap 3 files structure
  • Presentation and demonstration of the 12-column Grid System
  • Styling easily and quickly with Bootstrap built-in CSS classes
  • Adding functional components like navbars, responsive tables, forms...
  • Adding interactive elements with javascript plugins, like the carousel, the modal...
  • A 2-part design project featuring multiple examples of the Bootstrap 3 CSS styling and dynamic elements

Join me to learn about the open-source responsive framework Bootstrap 3.

By the end of the course, you will easily design sleek, mobile-ready websites with HTML, CSS and JavaScript.

What are the requirements?

  • HTML, CSS, Javascript, JQuery

What am I going to get from this course?

  • You will learn to build complexe and dynamic site layouts with the 12-column Grid System
  • You will learn how to design your site quickly with CSS buill-in classes and other functional components
  • You will learn how to override the Boostrap styling with your custom style
  • You will understand how to incorporate javascript plugins and add interactive elements to your site
  • By the end of this course, you will know how to design better and faster mobile-friendly websites

What is the target audience?

  • beginner and intermediate

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 to Boostrap 3
Intro
Preview
00:48
Curriculum & Project Overview
Preview
02:37
Files and Resources
Preview
01:10
Section 2: Getting started with Bootstrap 3
Section Overview & Intro
Preview
00:44
Downloading Bootstrap 3
Preview
04:31
The Grid System
07:12
09:53

Clarification at 3' of the lecture:

  • Large devices Desktops = (≥1200px)
  • Medium devices Desktops = (≥992px)
  • Small devices Tablets = (≥768px)

learn more on getbootstrap.com

Grid Demos & Examples -part II
11:17
Section 3: Bootstrap 101 - CSS & Components
Section Overview
Preview
00:48
Styling with CSS - Part I
14:26
Styling with CSS - Part II
13:37
Styling with CSS - Part III
09:37
Boostrap Components - Part I
14:35
Boostrap Components - Part II
10:57
Boostrap Components - Part III
09:53
Section 4: Bootstrap 201 - Javascript
Section Overview
Preview
00:49
Collapse.js
08:30
Carousel.js
06:55
Tab.js
07:17
Affix.js
04:12
Section 5: Project - Styling with CSS
Project Overview
Preview
00:45
Customize the Header
13:35
Create the Products Thumbnails
08:02
Create the Photo Gallery
08:56
Customize the Footer
09:44
Responsive Utilities and Media Queries
11:53
Section 6: Project - Interactive elements & Javascript Plugins
Section Overview
Preview
01:29
Create a Slideshow with Carousel.js
12:38
Add a Contact Form with Modal.js
08:52
07:59

At 3:40, make sure to replace with correct spelling:

preventDefault();

use correct code =

//Popover.js
$('.popup_message a').popover({
trigger: 'hover',
placement: 'bottom',
delay: { show: 200, hide: 1000 }

});

$('.popup_message').on('click', function(e){
e.preventDefault();
return false;

});

Tooltip.js
06:11
Add Scrollspy.js to the navbar
04:29
Section 7: Supplementary resources
Last Words & Other Resources
00:32
Boostrap Quiz
15 questions
Download Ebook Here
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Sandy Ludosky, Web Designer & Developer

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada.

I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.

Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

On top of being a Udemy instructor, I am an avid learner of new technologies and digital stuff.

Ready to start learning?
Take This Course