Twitter Bootstrap and Chrome Developer Tools

A13: Bootstrap WODs

Overview: This week’s WODs incorporate the use of html, css, Twitter Bootstrap, and Chrome Developer Tools to inspect websites and manipulate them/use parts of those websites to create basic webpages.

Assignment Link:

WOD Bootstrap-1: BootstrapBrowserHistory

Description: Create an Eclipse project called BootstrapBrowserHistory and use it to implement a Bootstrap version of BrowserHistory3.  Use the default bootstrap theme, change the title and navbar logo to “A history of browsers”, create a three column responsive layout, and use the “well” class to provide some visual interest.

Time: 26:14 DNF, 17:50 Av

My first attempt at this WOD was actually better than the DNF time because I got the website to resemble the desired output but I kept trying to improve it or make it look better because the column heights were uneven. But after watching the youtube video I pretty much had the same result. This WOD was a lot easier than the next two WODs because the template of the website was almost identical to the thesesareus example webpage. My second attempt was a lot faster than my first attempt and a lot cleaner too. I learned from watching the youtube video and using the example code that a single could div can contain element from multiple classes, although we did not have to use multiple classes in a single div for this WOD, the thesesareus example page did use it.

WOD Bootstrap-2: Responsive Kamanu

Description: Create a single page that mimics the first three elements of the Kamanu home page: the nav bar, the picture, and the tag line “We build canoes.” The page must have a responsive nav bar and override Twitter Bootstrap defaults to mimic the site layout.

Time: 1:12:16 DNF , 29:29 Av

This WOD was pretty difficult because I did not know how to use chrome developer tools relatively well. I DNFed the WOD before I could even get the navigation bar setup (although that was the hardest part). I asked a friend how he would have approached the task and he showed me to inspect the original code with chrome developer tools and that was really helpful because it shows all the css classes and elements associated with specific pieces of code that I wanted to implement. Implementing the last two sections of this WOD were pretty straightforward, only the nav bar was a little tricky.

On my second attempt, after learning how to use the chrome developer tools better it made the WOD easier since I knew what classes to override and what css elements to add/remove after inspecting the website with the chrome developer tools.

WOD Bootstrap-3: Responsive Castle High School

Description: Create an Eclipse project called ResponsiveCastleHigh and use it to implement a Responsive version of the Castle High School home page using Twitter Bootstrap.

Time: 56:16 DNF, 42:33 Sd

This last WOD was surprisingly easier than the previous one, since I now knew how to use the chrome developer tools to help. Almost everything felt straightforward and clear except I made a few mistakes which increased my time by a lot. The part the took me the longest was figuring out how to get the knight pride image in the middle column to “shrink to fit” as only a portion of the image was showing, but everything else about the image was fine such as the size and positioning. The funny thing was I used the correct CSS properties from the beginning but kept on changing it because the image would never shrink to fit. Finally after googling similar problems, I realized all the websites were telling me I was using the correct the code so then I remembered how positioning the code in css can affect the layout. I declared the background-image property after all the background-size and background-position properties so apparently those properties do not affect the background-image property if it is set below them. After moving the background-image property above the positioning and size properties, the image shrank to the right size. My second attempt at this WOD was a lot a faster and just a little lower than then Av time.