Build a responsive webpage with Bootstrap 3

Sandy Ludosky

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
30 Lessons (3h 52m)
    • 1. Curriculum & Project Overview

      demo.zip
      2:37
    • 2. Section overview & intro

      0:44
    • 3. Downloading Bootstrap 3

      4:31
    • 4. The Grid System

      7:12
    • 5. Grid Demos & Examples - part I

      9:53
    • 6. Grid Demos & Examples - part II

      11:17
    • 7. Section Overview

      0:48
    • 8. Styling with CSS - Part I

      14:26
    • 9. Styling with CSS - Part II

      13:37
    • 10. Styling with CSS - Part III

      9:37
    • 11. Boostrap Components - Part I

      14:35
    • 12. Boostrap Components - Part II

      10:57
    • 13. Boostrap Components - Part III

      9:53
    • 14. Section Overview

      0:49
    • 15. Collapse.js

      8:30
    • 16. Carousel.js

      6:55
    • 17. Tab.js

      7:17
    • 18. Affix.js

      4:12
    • 19. Project Overview

      0:45
    • 20. Customize the Header

      13:32
    • 21. Create the Products Thumbnails

      8:02
    • 22. Create the Photo Gallery

      8:56
    • 23. Customize the Footer

      9:44
    • 24. Responsive Utilities and Media Queries

      11:53
    • 25. Section Overview

      1:29
    • 26. Create a Slideshow with Carousel.js

      12:38
    • 27. Add a Contact Form with Modal.js

      8:52
    • 28. Popover.js

      7:59
    • 29. Tooltip.js

      6:11
    • 30. Add Scrollspy.js to the navbar

      4:29

Project Description

Responsive Prototype with Bootstrap 3

INTRODUCTION TO BOOTSTRAP 3

Let's get ready for the course:

        1 - Modern Browser 

My recommendation is to use a modern browser like Chrome.The Chrome web developer tools are excellent. We will get a change to use them in the developement process. Firefox is fine too.

google.png

link to download Chrome

link to make Chrome the default browser

        2 - Code editor 

My recommendation is to use Sublime text. I will use it for the video tutorials, but feel to use any other one of your liking.

sublime.png

link to download Sublime Text (Mac & PC)

       3 - The course Materials

link to download

Now you are all set!

=================

GETTING STARTED WITH BOOTSTRAP 3

This section of the course will guide you through the process of downloading the Bootstrap files and components.

Then, we will learn about the Grid System

Bootstrap includes a responsive, mobile first fluid grid system that scales up to 12 columns.

link to Bootstrap page to download the files

=================

BOOTSTRAP 101 - CSS & COMPONENTS

With built-in CSS and HTML components, Bootstrap 3 allows to code and develop functional and responsive website very fast.

Different examples will teach you how to make the most of the Bootstrap library of components and CSS classes.

link to Bootstrap CSS

link to Bootstrap Components

=================

BOOTSTRAP 201 - JAVASCRIPT

The Bootstrap package includes a library of javascript plugins ready to use out of the box. Each video lesson will walk you through the process of how to implement them:

  • The accordion
  • The slideshow (carousel)
  • The tabs menu
  • The popover

Enjoy!

link to Bootstrap Javacript Plugins

=================

THE PROJECT

Together, you will build a fully functional and responsive page.

You will put into practive what you have learned in the previous video tutorials : CSS, built-in components and Javascript.

And, you will bring this project (below) to life. view in browser.

ee1343ce

Student Projects