The Beauty of Bootstrap

I’ve heard a lot about Bootstrap from my IT/CS major friends and the ‘beauty’ of it.  I never knew what it actually was about until this week.  All this time, I thought modern web UI designs were written from scratch using CSS and HTML combination.  Well, Bootstrap is still a CSS but rather a  framework created for others to adopt.

Using the Bootstrap would have made my life easier for previous week’s WODs, but it is more beneficial to learn the basics before moving onto systems like the Bootstrap.

WOD 1: Bootstrap BrowserHistory

We were to modify previous week’s A History of Browsers to use Twitter Bootstrap 3.0.  Since we already had the base code, it was relatively easy to convert to a new page using the Bootstrap.  It took a few tries to understand the basic concepts behind the Bootstrap.  This WOD took me about 15 minutes on the first try.

WOD 2: Responsive Kamanu

For the second WOD of the week, we were to reimplement a portion of Kamanu Composites website using the Twitter Bootstrap.  Reimplementing a portion of the website wasn’t much of a struggle.  I was able inspect page elements using Internet Explorer 11 instead of Chrome.  It did take me quite some time to find the info I needed for CSS but I was able to finish the WOD in about 41 minutes.

WOD 3: Responsive Castle High School

Last but not least, we were to give Castle High School website a makeover by taking the old design and modifying it to conform with responsive design.  I have to say, this WOD required a lot of copy and paste for links.  On my first try, I did not finish the WOD on time as I was not able to properly display the website for mobile.  I went through the screencasts again to see what I missed and eventually found a documentation about it through one of the bookmarks we created.  On the second try, it roughly took me 42 minutes.

Conclusion

Using Bootstrap definitely helped the process of creating a webpage.  Additionally, it allows us to have responsive web design without the need of additional coding on our part (relatively).  I may consider making my own website utilizing Bootstrap in the near future out of the classroom environment.

Web UI Design Basics

Web development is an alien subject to me.  I had very minimal prior experience with any web related coding.  The most I did was for MySpace back in 2007 for simple text editing.  I didn’t really grasped the concept of HTML back then.  Which might be why I prefer embedded programming over web development to this day.

I never thought I would revisit HTML (or any web development subject, for that matter).  Ever since the introduction of HTML 5 standard, I got interested in web development.  Now here I am, learning HTML and CSS for a software engineering class I’m currently taking.

WOD 1: Browser History 1

The first WOD was straight forward, even when I am completely new to the web development.  We created a simple webpage containing the history of various web browsers such as Internet Explorer, Firefox, and Chrome.  The first iteration took me about 21 minutes which isn’t a stellar time but I was able to finish it before the DNF time.  Second iteration took me about 16 minutes because I had Google’d less for other online resources.  Through this, I got acquainted with basic editing using HTML for a web page.

WOD 2: Browser History 2

The second WOD was completely foreign to me as I have never encountered CSS before.  I had to refer to a lot of different online resources to get an idea for CSS.  This WOD particularly took longer than other ones.  The first three tries, I DNF’d.  I just was not familiar with syntax and some ideas behind HTML and CSS integration.  On the fourth try, without referring to other references, I was able to to complete the second WOD little under 15 minute mark.

WOD 3: Browser History 3

The third WOD was a little familiar to me thanks to the second WOD that I completed four times.  But by no means it was easier to complete.  This third WOD did not provide a clear instruction (for a person who is completely new to this).  So it came down to a lot of reference to Google and trial and error until something worked, without breaking the page.  I have learned about different ways to create navigation bars.  However, I wouldn’t be able to code one if I was asked to do so right now.  I need more practice to get familiarized with HTML and CSS.  It took me about 17 minutes 30 seconds on my second try.

Conclusion

This week’s WODs were interesting to do.  Every aspect of it were completely new to me.  Some were challenging without clear cut instructions but that is what search engines are for, I guess.  This was a good learning experience for me as I was interested in developing websites for some of my side projects.  HTML and CSS were easy to learn.  Organizing and making sense out of all the syntax (wall of texts, literally) was a bit challenging for me.