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.
- 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:30am - 10:45am: Overview of the Bootstrap grid system. This is also a sneak peak at most of the features of boostrap.
- 10:45am - 11:15am: Overview of the Bootstrap grid system. This is your essentially your inner containers. Manipulating these are the most important thing to becoming a great website developer.
- 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
- 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.
This class requires you to bring your own computer. You will need the Brackets Code Editor www.brackets.io (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.