Training: Bootstrap 3.1 fundamentals

If you’re a web developer – and I mean a developer – someone who writes back-end code and doesn’t have a lot of front-end design experience – prepare to meet your new best friend. Bootstrap is a very flexible and powerful front-end framework consisting of a set of CSS classes and JavaScript plugins that will make your sites look not like the boring, drab, dare I say ugly… sites that developers are known to create, but instead look pretty darn good. This course will take us through the process of acquiring Bootstrap – you’ll see how we can download Bootstrap distributions and sources or use a CDN or front-end package manager like Bower to get Bootstrap.

Bootstrap has many reasons to love it. Why? Apart from being a FREE, open-sourced, really powerful, mobile-first responsive front-end framework, it also provides you with quite a lot of value right out of the box – with very little effort. With just a simple knowledge of some of the basic elements of Bootstrap styles, it takes just a small amount of work – typically just adding an CSS class here or there to HTML elements you already have in place to – to truly transform your site in to a professional-looking cleanly designed web application. In this course, we look at what basic CSS classes come with Bootstrap and how to apply them to your site to make it look great. You’ll be surprised at how easy it is, and maybe you’re love affair with this front-end framework will begin too.

HTML is pretty simple. There are a limited number of elements, and only so much you can do to style those individual elements. Bootstrap’s core CSS does a good job with that default styling, but now it’s time to take the next step. In this course, we’ll look at Bootstrap Components – these are design elements that are not a part of HTML proper, but a combination of HTML and CSS that create compelling visual design elements to help create engaging user interfaces. We’ll look at creating some different input elements, page navigation, emphasizing content in subtle ways with labels and badges, or in big ways with jumbotrons. We’ll also check out how we can visually separate content from its surroundings – both text-based content in wells, panels and alerts, and images in thumbnails. It all comes together beautifully with Bootstrap to make our job of creating great-looking websites easy!

It’s time for JavaScript to take the center stage! Bootstrap comes loaded with a ton of great JavaScript plugins to help us create powerful and engaging sites for our customers and users. We’ll capture the user’s attention with modal dialogs and create an auto-updating navigation element that remains fixed in the browser window as you scroll through your site. We’ll also add some interactive elements to your site as we show and hide content dynamically using the tab and collapse plugins, as well as provide some additional contextual content to our users in the form of tooltips ad popovers. This is when we take our site to the next level – not only will it look good, but it will start behaving well too. Interactive and engaging – that’s what will hold your viewers attention – Let’s see how Bootstrap will help us deliver.