Responsive Web Design with Bootstrap Hands-On

What You'll Learn

Leverage the power of Bootstrap to rapidly develop sleek responsive websites that are mobile friendly and adapt to all screen sizes and devices! The popular Bootstrap framework makes it easy to assemble the common elements you see on nearly every web page - navigation, buttons, forms, and even includes a grid system that makes creating column based layouts a breeze. Using a front-end framework, like Bootstrap, takes the guesswork and headaches out of creating consistent and professional responsive websites.

For the purpose of this class we code in a basic free text editor. We will show you how to get a good text editor installed and preview things directly from your computer. Bootstrap is a front-end framework and doesn't require a server environment for you to see the site we create on your local host.

Outline:

  • 9:00am - 9:05am: Introductions and review of class syllabus
  • 9:05am - 9:20am: Introduction to Bootstrap, what responsive design is, and why it's important
  • 9:20am - 9:40am: Understand the instructor supplied basic foundation site. This site will act as your code base to install bootstrap into. The instructor will break down the code and help you understand how your sites main container works and how you can adjust it to behave differently at different screen sizes.
  • 9:40am - 10:00am: Download Bootstrap. unzip bootstrap and examine bootstraps files.
  • 10:00am - 10:30am: Integrate bootstrap in to a HTML/CSS website (this is the instructor supplied site referenced above). You will not need any additional software because your browser can render HTML/CSS and as well the javascript aspects found inside bootstrap. At this time we will also include jQuery which is a very popular library for JavaScript. We do this because it unlocks additional functionality within bootstrap and helps future proof your site to do other interesting things as your knowledge grows.
  • 10:30am - 11:15am: Overview of the Bootstrap grid system. This is the most powerful feature of Bootstrap and what makes all developers fall in love with the framework. This is also a sneak peak at most of the features of Bootstrap.​
  • 11:15am - 12:00pm: Hands on guided practice time with grid system. Instructor will help troubleshoot your code, find road blocks you may be having, and help you do interesting things that you might need specific help with. Once you get into the grid you start seeing lots of possibilites that you could imaging doing but not quite sure how to get there. Usually the answer is simpler than you think. This is a great time to ask questions.
  • 12:00pm - 1:00pm: Lunch break
  • 1:00pm - 1:20pm: Instructor will basically try and "catch" everyone up to each other. Because everyone is at varying degrees coding this time is set aside to go over just about anything that needs to be covered. It will be a combination of Q& A, lectures, HTML, CSS, and even possibly additional information on programming languages such as JavaScript. It also could be guided practice time. Keep in mind that we had very little time with the grid before lunch so the grid may be discussed a lot in this hour.
  • 2:00pm - 2:15pm: Column offsets (bootstrap grid)
  • 2:15pm - 2:30pm: Using nested columns (part of grid)
  • 2:30pm - 2:45pm: Column ordering (part of grid)
  • 3:45pm - 4:30pm: Last but not least playing with aspects of bootstraps "Kitchen Sink". This includes styled buttons, font embedded icons (gyphicons), tooltips, and many other fun and useful parts of bootstrap.
  • 4:30pm - 5:00pm: Hands-on, instructor-guided practice applying what you've learned to keep building out your responsive Bootstrap website.

Equipment:

This class requires you to bring your own computer. You will need Sublime Text Editor (it's free). You can use a preferred text editor but this is the one the instructor will use and highly recommends.

Who Should Take This

Students should have some basic understanding and experience with HTML and CSS prior to taking this class. However, even with just basic knowledge of HTML, Bootstrap makes it easy to  build responsive websites that include responsive  navigation, buttons, links and other common user interface elements.  The class is designed as an introduction to Bootstrap so students do not need any prior knowledge or experience with Bootstrap.

If you need to some basic HTML and CSS please have a look at our Intro to HTML and Understanding CSS workshops.

Presented By Brian Shaffer

Brian Shaffer

Brian Shaffer is a seasoned web developer and Internet marketer. Over the past eight years, Brian has designed, developed, and marketed over 70 sites that are growing and thriving today. As an HTML, CSS, Javascript, and PHP expert, Brian builds on all major open source platforms, including WordPress and BigCommerce, to provide companies with sites that they can maintain without knowing how to program. Over the past few years, Brian has taken a liking to Twilio, and has built many phone and text message applications for clients using their platform. Take a look at some of the demos at Brian Shaffer's blog.

$249
BDA Members
$279
Non-Members

Registration:

BDA Members: $249.00

Non-Members: $279.00

Available Dates

Sorry, we don't have this event scheduled right now but we'll probably be adding it again soon! If you're interested in this event, we recommend using our follow feature to be notified the next time we add it to our schedule. You can also email us to request that we add it soon.

Customer Comments

I will use this on every website I create! Excellent instructor!Rachel
Read All Comments

Related To: Responsive Web Design with Bootstrap Hands-On

UI/UX Design Certificate Program

UI/UX Design Certificate Program

Fees: $1299 for members / $1399 for non-members

Introduction to HTML

Introduction to HTML

With Brian Shaffer

Fees: $69 for members / $89 for non-members

Understanding CSS

Understanding CSS

With Brian Shaffer

Fees: $139 for members / $159 for non-members

×

Comments For: Responsive Web Design with Bootstrap Hands-On

I will use this on every website I create! Excellent instructor!Rachel on 1/24/2015
Absolutely valuable!Gina on 1/24/2015
×

GET INSTANT ALERTS ABOUT

NEW CLASSES & EVENTS!

SIGN UP FOR OUR NEWSLETTER!

WIN FREE CLASSES BY CONNECTING WITH US!

CLOSE THIS THING