Twitter Bootstrap Tutorials: Read Before You Start

twitterbootstraptutorialIt’s time to get your website up and running. You’ve explored the What-You-Say-Is-What-You-Get (WYSIWYG) editors, considered WordPress and seriously thought about hiring a design team.

You aren’t alone in this predicament. In fact, so many people suffer from the same problem that the folks over at Twitter put together a web development framework called ‘Bootstrap’ and made it available for free through GitHub.

Learn how to code a responsive website with the new Twitter Bootstrap 3 in this online course!

What is Bootstrap?

Bootstrap is a free, open-source web development framework that gives you all the tools you need to create your own ‘responsive’ website (i.e. a website that scales automatically to any given screen size – more on this below). Think of Bootstrap as a box of Lego blocks that can be put together to create websites. It is powerful and relatively easy to learn, even for those without any technical background.

Why Bootstrap?

Web design has changed dramatically in the last few years. The proliferation of mobile devices means that designers today need to design for phones and tablets along with standard desktops. A website needs to look good on a 5-inch phone screen, as well as a 27-inch monitor. This requires a unique set of skills; specifically, an-in depth knowledge of web technologies such as HTML5, CSS3, jQuery, and of course, Photoshop, all of which you can learn at the Designer Workshop by David Carmona. This course covers everything from rapid prototyping to cross-browser CSS. Like Bootstrap itself, this course is a free and will save you from a great deal of frantic Googling and head-scratching during development.

In response to these web development challenges, designers have come up with something called ‘responsive’ design. A responsive website has a flexible layout that can scale automatically to different screen sizes. It looks good on mobile screens as well as computer monitors. For an example of a responsive website, check out BostonGlobe.com. Try scaling the window size and observe how all elements scale automatically.

Creating responsive designs requires a lot of time and effort. Bootstrap provides you with the basic framework for creating a simple responsive website. You don’t need to code anything yourself. Just include the appropriate pre-written code from Bootstrap into your website, and you’ll be all set with your very own responsive web design!

Getting Started with Bootstrap

When you know what you want to accomplish, the best place to start is with a basic class like Twitter Bootstrap for Beginners from Stone River Elearning. This is designed for people with no design experience to develop websites immediately. The videos walk you through the process from setting up the fluid grid system to creating navigation menus.

Because Bootstrap is open source, you will have to keep up with the changes to be able to maintain the code or explain it to a new team. That’s why following up with a course like Responsive Web Design with Twitter Bootstrap and Dreamweaver is highly recommended. This class gives you lifetime access to video updates that will help you manage the dynamic nature of the tool.

Finally, when you have enough experience and confidence working with Bootstrap, you will benefit most from bouncing your ideas off another Bootstrap pro in a full 23 lecture course from Chris Converse, Create an Engaging Website with Twitter Bootstrap. You will experiment with the finer points of web design like creating your own icons, building device-sensitive elements, and fully customizing each component. The course also gives you working templates in HTML, CSS, JavaScript, and Photoshop that you can use to develop a host of different websites.