My Bootstrapped HTML & CSS big project – done

I realize I’ve not been posting on my blog as often as I used to, and there were good reasons for that. One is the fact that after my last post I was working on a big project which I have just finished yesterday morning. The other reason is, and I will be repeating myself here, the scarcity of time.

The project I’m talking about was similar to the Facebook website and resembles the project I already did during Prep Work. This version of the website, however, is a combination of Bootstrap, CSS3, and HTML5 with new tagging and SASS. It is much more responsive now, and finally, I’m happy I created something that looks well on the mobile phone as well as on a tablet, laptop desktop.

The very beginning of the project was a slow process. I worked on navbar for about two days and couldn’t build it in the way I wanted. I got into the trap of rearranging bootstrap into my needs which resulted in frustrating situations… fixing one issue was causing few more problems to appear like an alignment of elements. I tried to build hero section with provided background image with bootstrap’s  jumbotron – bad idea. I know now to leave jumbotron as it is and to use usual div elements if I want to attain my own idea of an final look.

Another lesson caScreen Shot 2016-09-06 at 00.22.05.pngme from positioning columns in a grid. To build a grid with photos i.e.,. 3 x 3 size, I am creating a couple of divs with class “container” and nesting there classes of “row” and “col-xs-4″ and in it <img src=””> tag. Such combination creates problems (as shown on the left) so only after few hours I finally corrected this; thanks, to StackOverflow post which shows what I mean. Basically I had to add <img> tag into another <div>.

More challenges came with the idea of setting different collapsing breakpoint for main navbar and position the second sub-navbar  in the middle of a page. I have also added new behaviour, so it changes from original position:Screen Shot 2016-09-06 at 00.26.59

 

 

to the unfolded drop-down menu on a smaller screen or shrinking browser’s window:

Screen Shot 2016-09-06 at 00.26.40

Stackoverflow again was a saver.

 

I have a new experience also with building a big website. The very crucial thing here is the strategy.  I was considering either building entirely new code, forcing the existing objects to behave my way (not good) or creating a lot of tricks here and there to make it work – also a bad idea. At the very end of the projects, I started realizing how valuable this strategic thinking is, how good is to look for common elements and make one reusable code. Perhaps one day we will see HTML objects of sorts.

I have also created button hover effects which you can see clicking on my repository. A very helpful was Mike Young Repository with many nice ideas and code of various effects. I also reached one of the colleagues in Viking, and someone else’s perspective improved the way I looked at things. I sorted it out yesterday and today. The effect I present below on the screenshot is one of the five webpages I have created for Viking.

Screen Shot 2016-09-04 at 23.39.24

Link to HTML preview of my code repository on GitHub

The project took all my time in the last ten days. I had those moments of enlightenment where intuitively I just know without analyzing to use clearfix to elements or feeling how floats would behave. However, these few situations show how much time need to be devoted in order to become exceptional Front End Developer.

There are still few things I would like to polish to perfection on my website, but I guess the better time will come to return to this when JavaScript come into play. This will happen however in next few months. The next station on the road is Ruby – going through the basics and first projects onto bigger one – can’t wait.

Advertisements

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