Bootstrap Fascination

No! Not actual boots!

Bootstrap is absolutely magical. Bootstrap allowed me to create an elegant website without having any creative ability. So what exactly is Bootstrap?  Well, Bootstrap is a CSS framework that allows developers to create responsive web designs rapidly. And when I say rapidly, I mean extremely rapidly fast. Bootstrap allowed a HTML and CSS rookie like me to create an eye-catching and feature filled website in a short time. In addition, Bootstrap is a framework that focuses on mobile first design. This means that websites created with Bootstrap allows for automatic resizing to mobile devices without having to add additional code. The features that Bootstrap provides are absolutely amazing for what little time is needed to learn the basics.

To test my knowledge of Bootstrap for this week, my software engineering class had three WODs to do.

WOD 1 Bootstrap “A history of browsers” website

This WOD (link) involves taking the previous website I made last week and applying Bootstrap to it. The directions included taking a simple Bootstrap template, adding the necessary features, and copy the content over from the previous website. Fortunately, I did not run into any issues with this WOD and was able to complete this WOD at around 15 minutes with my first try. Most of my time was taken up by reading Bootstrap documentation to find the correct div class needed.

WOD 2 Responsive Kamanu

WOD 2 (link) required us to recreate Kamanu Composites’ homepage using Bootstrap. The instructions my professor provided were clear so I did not expect much difficulty. However, I found that I was wrong when I attempted my first try of the WOD. My first try of the WOD got me a time of around 39 minutes. My problems I encountered were that I was unable to make the webpage look exactly like the sample page in the WOD. I ran into padding/margin/height issues with the navigation bar, the logos, and background picture. My time was spent mostly tinkering with Chrome Developer tools and playing with the CSS settings to align the content correctly.  The most important thing from this WOD that I learned was that I am able to set the background image of the website using a div class and have its attributes be in the CSS file instead of having it declared in the HTML. This “hack” made aligning the background image a lot easier.

Deciding to attempt the WOD again, I got my time down to 21 minutes. I was able to gain a lot of confidence from performing this WOD again because I stopped struggling with remembering all of the nitty-gritty CSS styling attributes as I became more and more comfortable working with HTML and CSS. In fact, I did not even have to look up the specific attributes I needed and was able to remember them with the help of IntelliJ’s auto completion.

WOD 3 Responsive Castle High School

Ta da! I made a website!

Ta da! I made a website!

Again, this WOD (link) required us to recreate another website using Bootstrap. The website we had to mimic was Castle High School’s homepage. While we did not have to mimic all the elements of the website, we had to style our website to look similar to it. My first attempt at this WOD took me to a borderline DNF time of 48 minutes. I spent most of my time experimenting with different ways to style the webpage and learning new things about Bootstrap. For example, trying to figure out how to move the navigation bar from the top of the page to be below the banner image took me around 5 minutes. The lesson I learned from this was that I should actually read the HTML portion of the code more carefully. All I had to do to move the navigation bar was to delete “navbar-fixed-top” from my div. Another reason for my long time was that I was not utilizing IntelliJ’s duplicate/copy-paste features. I think I was too engrossed in styling the webpage that I have forgotten about IntelliJ’s shortcuts.

Doing the WOD again got my time down to 38 minutes, a good 10 minutes improvement. Most of my time came down to typing out all of the website’s link labels since I was too distracted to remember that I could just simply just select all the text and copy-paste over. On the bright side, I did remember to use IntelliJ’s shortcuts to quickly duplicate lines of code extremely quickly to create the required features.

Conclusion

While I am still learning the process of web development, I feel that Bootstrap is an extreme boost of confidence to my web development skills. By simply being able to make an attractive website was a huge motivation booster because I have never made anything like it before. A website that is both pleasant and feature-filled? I never would have expected I would have been able to do this before I took software engineering.

Advertisements