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 - 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 possibilities 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 is a hands-on class where you'll "learn by doing". Therefore you'll need a computer with the latest version of the software (more details on that below). We always recommend that if you have one, that you bring your own computer if at all possible. However, if you need one, we have several Apple iMac workstations with all the necessary software that are available by reservation for only $20 per day. If you need to use one of our computers, please email us so that we can arrange this for you and process the rental payment ahead of time. In most cases, the class will be taught with the Macintosh version of the software but generally the only difference between the Mac and Windows version is the keyboard shortcuts, using the Command key on Mac and the Control key on Windows.
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.
Presented By Brian Shaffer