Designing in the Browser With Bootstrap Premium class

Craig Campbell, Web designer/developer from Fort Worth, TX

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
20 Videos (2h 54m)
    • Introduction

    • Downloading and Setting Up Bootstrap

    • The Bootstrap Grid

    • Bootstrap Documentation

    • Starting From Scratch

    • Starting With a Template

    • Overriding Text Defaults

    • Finding the Right Fonts

    • Bootstrap Navbars

    • Experimenting with Color

    • 11 Tools for Working with Color

    • Inserting Images

    • Experimenting With Layouts

    • More Layout and Color Changes

    • Creating an Image Slider

    • Navigation Drop-Downs

    • Bootstrap Forms

    • Button Options

    • Responsive Considerations

    • Final Thoughts


About This Class

  1. With the rising popularity of HTML and CSS frameworks like Bootstrap, web designers have found an efficient alternative to Adobe Photoshop for designing websites. In this course, you’ll learn how to use Bootstrap as a foundation for rapid website design in HTML and CSS.

 What You'll learn from this class?

  • Downloading and Setting Up Bootstrap:How to download Bootstrap files from Bootstrap website.
  • The Bootstrap Grid's: Bootstrap is built around a responsive, 12-column grid system.So, you’ll learn the basics of how to use this grid to rapidly lay out your content.
  • Starting From Scratch: How  quickly you can make browser-based design decisions without ever opening Photoshop.
  • Starting With a Template: How to use a pre-made Bootstrap template to give you a head start in your design process. 
  • How to design website with Bootstrap.
  • Overriding Text Default: How to override text styles with your own custom styles.
  • Finding the Right Fontsg: Finding the right font is a very important design consideration.So, we’ll take a look at a few online resources for finding the perfect font for your design.
  • Bootstrap Navbars:We'll pull the header out of the main content div and affix it to the top of the site using Bootstrap's navbar classes.
  • Experimenting with Color: Bootstrap has its own basic color defaults for text, links, buttons, and navigation, but these defaults won’t always work for your projects.So, we’ll override some of the default styles as we try to develop our own color palette.
  • Tools for Working with Color:  We'll learn about a valuable online resource that can make color selection a breeze.
  • Using Your Selected Colors:
  • Inserting Images:
  • Experimenting With Layouts:
  • More Layout and Color Changes:
  • Creating an Image Slider:
  • Navigation Drop-Downs:
  • Bootstrap Forms:
  • Button Options:
  • Responsive Considerations:We’ll take one last look at our design at different browser sizes and make any adjustments necessary.

4 of 5 students recommendSee All

Great content.You are such an amazing teacher.Thank you very much!
Everything is well explained
It was an excellent course, learn a lot





Craig Campbell

Web designer/developer from Fort Worth, TX

Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.