DEV Community

Joshua M Loran
Joshua M Loran

Posted on

Bootstrap! A useful tool for beginners front end development

So, I’m going to school to learn to be a full stack developer. So far we have learned many useful tools. We’ve learn various methods on how to manipulate datasets. We’ve learned object oriented programming with ruby and how to build relationships between the models. We’ve learned SQLite and active record database management. And, we’ve learned some simple ways users can interact with views (or webpages). Everything we’ve learned to this point enables us to build a a fairly complex backend for a website, but we have yet to learn about the user experience.

An aweful experience...
alt text

This is not what we as developers want for our users, and wouldn’t you know it, our next project is to build a fully functional website with a great frontend. Sure, no problem. But what about the user experience? I’ve never dabbled in html, css, or javascript and while I have full confidence developing the scaffold for a website, I’ve never built a good looking front end. I had a chance to meetup with some of the students in the cohort before mine and their projects look amazing. They include interactive sliders, buttons, great images and layouts that scale and adapt to to the users device and preferences. I want that same level of polish. I want the user and my site to be:

alt text

How could some of these students, that were at the same level as me build such wonderful things. The answer was, Bootstrap. I’d never heard of bootstrap and didn’t know what it was, so I’ve spent the last few days researching what it is and how to use it. I must say, it’s pretty cool stuff.

In a basic sense, bootstrap is a framework that can be accessed by front end developers for use in their designs. It is composed of CSS, JavaScript/jQuery, and glyphicons. At this point, those are magical things I don’t fully understand. But, the beauty of bootstrap is that I don’t need to have a robust knowledge of these things. It is a framework that lets me play with how a page looks and how a user interacts with it in such an easy way that I can accept it as a tool and move on to more important things.

alt text

The easiest way to get started is to head over to the getting started page. However, you don't necessarily need to download the files to use it. It can also be used by utilizing a CDN, Content Delivery Network. One advantage of using a CDN is that bootstrap is used by MANY sites and is often in the users cache, which means potential faster load times.

w3schools has a great resource for playing around with some of the features of bootstrap. There are interactive "try it yourself" sections that let you play with the code before you even use in your project. But, perhaps an even better resource, once your comfortable with how bootstrap works is the bootstrap cheatsheet which has a very robust set of bootstrap interactions to make the user experience more enjoyable.

alt text

Now that you've read over and played with bootstrap a little bit and have a long list of usability features, you want to make it look pretty too. Some background imaging and device scaling sure would give the look and feel an upgrade. One of the great things about bootstrap is that it has a large open source community. So, with sites like Start Bootstrap, Get Bootstrap(some cost money), and Wowslider, it is easy to find a theme that will work for you. And, you can always tweek a theme to suit your needs.

Good luck out there friends!

Discussion (0)