Bi-Weekly Learning Update (11!)

In one of my previous posts I declared that I was still trying to stay away from using frameworks- freeCodeCamp had different plans for me! I had made it onto the ‘ziplines’- challenges set up that have you using a combination of skills, and the first of these ziplines asks you to make use of Bootstrap to create a mock portfolio site.

The assignment provided me with a list of criteria which I had to meet, including functioning links to external sites, links to sections within the site, and buttons featuring thumbnails of previous web development work. There was also an example site to be used as inspiration, and I tried to stick to that as closely as possible. freeCodeCamp challenges tend to take place inside the browser [as opposed to say, the Odin Project, where you might use a text editor to create a webpage], so the portfolio site was made, as suggested, in CodePen, another really great resource!

portfoliothumb

Click here to see what I came up with.

I didn’t have much experience using Bootstrap before, but I had a lot of fun with it. It was really neat to be able to add a class to an element and have it totally changing the style automatically for you [a lot of the time it was adding classes like ‘btn‘ and ‘jumbotron‘]

The feeling of accomplishment after finishing this challenge wasn’t from building the site though, it actually came from reading the documentation. I would say that I’ve always been afraid of documentation. I always thought of it as being full of big scary words and concepts that I wouldn’t be able to wrap my head around [read: that I was too stupid to comprehend.] While I know that I can’t speak for everyone, I would hazard a guess that this is a pretty common feeling for people learning to code. I knew that I had to look at the documentation at some point- I mean, I couldn’t just guess what classes to apply, and when I did look I was super relieved to find that it was all really readable. If there was something I didn’t understand I could read a little further to see if it was explained later in the documentation, or, since Bootstrap is so widely used, I ended up googling a few things. By the end of the project I felt a lot more confident using both Bootstrap and the documentation than I had at the start of the project.

One of the great things about Bootstrap is that it makes it very easy to create responsive layouts. I wouldn’t consider the site I made for this project suitable for mobile [even making your browser window too narrow breaks it!], but it does respond to various screen sizes. Responsiveness didn’t seem to be one of the goals of this project- even the example broke when I made my browser window too small, so even though Bootstrap worked beautifully [seriously, I was playing with browser window width for about ten minutes looking at changes.] I didn’t want to spend too much time making the site suitable for mobile.

I really liked working with Bootstrap- I can really see how it would speed up the process of making a site, and I can see myself working with it in the future! I visited the site again while writing this post, and there was a notice at the top of the page that version 4 will be released soon, and I found myself getting excited and wondering what they’d be adding to it- it’s definitely something to keep an eye on!

Has anyone else been using Bootstrap or a similar framework, either to play around with or to build a full site from? I’d love to hear other peoples’ experiences with them!

One thought on “Bi-Weekly Learning Update (11!)

  1. I use Bootstrap all the time in my front-end designs and I love it (ex: LetsGoIsland.com, a vacation rental site I did for a client). I also like RGS (responsive grid system). I want to learn Pure, Less, and MDL in the future, which also offer efficient CSS frameworks built with responsiveness in mind.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s