Speeding up with bootstrap and SASS

It’s been few days since I started and already finished three projects. After my conversation with program coordinator on Monday last week, I started working on my first project. I had to create a replica of a website which purpose was to see how I get on with positioning elements on a website. Simple task helped me to deal better with float elements and using media query I can now set up a website to behave adequately on mobile, tablet, laptop and large screens. I feel confident now in building CSS3 and HTML5 code. I feel I could copy any website. However, it still takes a lot of time for me to accomplish it.

On Thursday my first meet with a mentor. I thought I would send a code and will be told what was right and wrong with it. Nothing close to this. I shared my screen and had to walk my mentor through the code. It was very interesting experience, I had to leave my head and present my thinking outside and express the very reasoning behind the code.

Since Thursday I am working every free hour on following projects which involve using bootstrap and SASS. I had my first introduction to bootstrap half a year ago with Free Code Camp, but here the VCS course helped to fill up all the holes like why specific plugins are included in HTML for bootstrap and what they mean; the reasoning behind the mechanism of bootstrap components as grid, navbar etc. My favourite article I was provided by VCS was Erik Flowers blog – especially this post in the link about the grid. I am starting to see that bootstrap can be either pain or an ally that takes patience and effort to understand which results in greater productivity in a shorter time.

Another cool tool I am mastering is SASS. It is Ruby gem that helps shape CSS file quicker, cleaner and easier. So know instead of typing #f35a1c in various places in a code I can create variable ie. $mycolour: #f35a1c and then can always use this $mycolor instead. There are much more tricks like nesting elements, options of simple command like @import _reset – so one standard file I saved on my laptop is used to all CSS files to reset them from browsers forced styles. With SASS the CSS becomes a sort of “object markup language” as I can now use style and save it like Procs in Ruby for to use it elsewhere or expand other style blocks.

Also, I am excited to share my latest discovery in Sublime Text 3. If anyone wondered like me on how to increment years or days without copying and pasting from the internet (not mentioning manually typing), i.e., for drop down menu. I used middle mouse button to vertically select years in <option>, having installed text pastry package in Sublime, clicked ctr+chift+p… typed “pastry command line”.. and typed in command line 1899 -1 enter (so all selected data will change into 1899, 1898, 1897 etc.) more details on GitHub – on how to extend the power of multiple selections in Sublime Text 2/3. Modify selections, insert numeric sequences, incremental numbers, date ranges – you name it.

Now I’m working on a bigger project – creating 5 web pages similar to Facebook with bootstrap. The whole work is based on using User Stories and slowly I am introduced to Agile type of projects. There is bit greater complexity than with the Facebook project I did during prep work but bootstrap gives me more confidence. I agreed to present my work on the following Thursday when I meet with my mentor. After that, I am going for a long while to work with Ruby – moving to the back end for few months.

Also, I have decided to start Basic path with Viking going on from late September – which is when I start my course at college. The third semester will include Web Authoring, Multimedia Programing, and Server Side Web Development so very relevant modules. However, again the only challenge is time.

Here is my finished website I did before throwing myself to Bootstrap. It uses media query and is made for mobile phones, tablets and laptops.

Microblog.JPG

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