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

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

I’m a Viking

Yesterday I was officially greeted in  Viking Code School having scheduling session with Erik and another student. The further path looks as exciting and well organized as the prep work series, if not more. Of course, on top of that now I have access to other fellow students and mentors on Slack, access to support during specific office hours. In the first stages of the program collaboration with students is not an essential element but very encouraged.

The next block is expanding knowledge of CSS into CSS3 and HTML into HTML5 and adding new concepts like SASS or Bootstrap. I cannot say much yet about my progress as I have literally just before midnight started reading new materials. I am meeting my mentor on Thursday evening, and I hope to finish the first minor project, which building a simple website. After completing whole four web pages of Facebook earlier in the Prep Work, this doesn’t seem too complicated; however, there are some new elements in CSS like Media Query, Box Sizing, etc. which implementation is necessary and still new to me.

After gaining access to the next few blocks of material, I was enthusiastically flipping through further lessons. So after that, the road lead through Ruby – from basics to Object Oriented, and TTD Ruby – RSpec. The great thing Viking has is the rhythm at which course is organized. There are no revolutionary jumps in pace; rather a tempo with many steps forward, few backward after so the created links between neurons are getting stronger through this repetition.  I’m so eager to learn as much as I can now, but again, time is so limited.

I got an email from my college this morning; they want me to register for the second year soon. I have a bitter feeling about linking Viking and my postgraduate course with full-time work. I got a reply from Program Director in college, saying that deferring the coming year means I may come back to the course not in a year time, but even after two years as the modules are shuffled throughout different semesters. I can’t figure out what to do as of now. However, this means, I have to switch soon from the Standard path of Viking course to the Basic…

As for the past few days following my last post until yesterday, I honestly admit – I didn’t do much. I couldn’t get through modern Roman Numbers challenge and felt like would be worth just to take a rest before the future effort. I hope to publish some parts of my new project I’m starting tomorrow.

The second stage of the road

I wonder where to start. I feel excited and… apprehensive. I sense that a big challenge is coming. For about six weeks I was working through all the blocks of materials on Viking Code School website. This meant full-time work, studying over weekends and after work for over 21 hours a week and carefully planning space for meeting with friends without whom I wouldn’t get here on my own. This got me into a daily routine, new habits and one goal kept me going – to get to the Viking ship.

Here I am now – on Viking ship. There is plenty of work before me which I got used to, but this work is now of collaborative type. This is one of the reasons I choose to study with Viking Code School; to learn web development and work together on projects. Another challenge will be to deal with one of the very limited resources – time.

I signed up for Standard path for two months now which will suppose to take at least 21 hours a week. In late September, I am starting my 3rd semester in college where I am expecting to have three different modules – each taking about 8 hours a week of classes, and later with much more for working on projects. This is where I plan to switch from Standard Plan to the Basic one. Nevertheless, the time pressure, pair programming and perhaps complexity of some subjects are the greatest tests will come to face.

As for the last few days, the biggest highlight was the chat with Erik Trautman. It was a very stimulating meeting… with the fact I reached my first goal and finally met him, I felt like a kid on Boxing Day. I am officially starting my course on Monday, and I am going to meet my mentor then. All teamwork will be done through Slack and Google Hangouts – the same tools that Scrum teams in my client company is using – and it is very respectable organization.

An interesting coincidence happened the same day. I went to a local Ruby Ireland meetup where I met William, a man who looks after Facebook Study Group | CodeBuddies & TOP which gathers developers going through the Odin Project – the one that Erik founded. Moreover, I found a post on Williams blog great solution to the problem I was struggling recently – Roman Numbers.

In the spare time like on lunch breaks (summer is quiet in the office) I spent on doing some coding on really addictive website Code Wars . I have completed about six different challenges so far. The great thing about the website is that it forces to build code starting from building tests first – TDD.

Now I’m going to spend next three days on going through last few chapters of Chris Pine book and do the recap on the prep work I did so far. I regret now I won’t have time to finish all the Exercises from the book, but at least starting to get why Class.class gives Class in return :). I have Ruby, Rails, Git all set up with my Bash. Almost ready for Monday.

Finished coding block

Yesterday I made all the coding challenges from the last assignment at Viking Code School page,  including Counting Game and then finally applied for Flex Program with Viking Code School. There are three different programs, and I wanted to start with the Standard path and in October switching to Basic one for few months when I will have college running back again. I have scheduled the call with Erik from VCS on Tuesday, and I am going to discuss the best way in reaching my goals while compromising with the college course at some stages.

Also on Tuesday I am attending my second Ruby Ireland Meetup here in Dublin. It’s going to be filled with two presentations about programming in a browser with Elm and the way talks were published at the Web Summit. It’s going to be interesting evening.

I’m now struggling with writing a program that would generate new Roman Numbers out of provided integers between 1 and 3000. I spent about 2 hours on coding and corrections only to realize my understanding of the problem was wrong. The challenge is from Chris Pine book, chapter no 9 (page 68). I’m going sleep now. Tomorrow another working day, but I feel will be ready to attack the problem tomorrow with utmost success. it goes without saying that I do not want to look at the solution supplemented at the back of the book.

Solving problems with Ruby

I’m just trying to write few words to stay disciplined before I go to sleep. It’s 0.30am and happy Friday has just started. For the past few days, I have finished Ruby course on Codacademy and went through 9 chapters of Chris Pine book “Learn to Program”. I have also managed to solve first four problems on Project Euler. On top of that, I am still working through some lessons on Viking Code School. The first goal is very near. I hope to accomplish the last block – Coding from Prep Work by Sunday and then finally send my application to VCS. I am very motivated, I have just realized it has been over 50 days/over 120 hours since I started preparing for this course and changing my career.

Codacademy course equipped me with a lot of knowledge. Unfortunately, it is a type of knowledge which was slowly fading due to lack of proper practice (as this course wasn’t too challenging). Thankfully Chris’s book comes as needed addition. I am just finishing chapter 9 now. Most of the chapters ask to program solutions to problems although I solved all of them so far, it’s taking more and more time every next chapter to answer them. Solving some interesting problems le me experience how powerful computing is. How much time would take the brightest mind to find a number of seconds I live on Earth. Apparently, at these very seconds, I’m typing these words in, I am living exactly my  1051710466 second (from chapter 12, page 96-97).

Project Euler, on the other hand, came as the very challenging tour, of which one I wasn’t able to finish due to long time computer was processing all the iterations. I’m talking about Problem no 3: 

The prime factors of 13195 are 5, 7, 13 and 29.

What is the largest prime factor of the number 600851475143 ?

And here is my answer:

num=gets.chomp.to_i
array=[]
1.upto(num) do |x|
if x%2!=0 || x%3!=0 # we only finding prime numbers here
if num%x == 0        # we check if those primes are dividing our number
array.push(x)
num=num/x
end
end
end

puts ‘—-‘
puts array
puts array.max

I assume it may take about 2 hours for my Mac to process this problem, but after checking some of the factors, it is working.

That’s it for now. I hope to write my next post from next point on this road.

Facebook replication

It took a while (6 days) to finish this project. It also took countless corrections, relearning the material and unavoidable frustration. Anyway, this is done now, although not to my greatest proud. This is an example of my work using only basic CSS and HTML markup, basic principles, etc., so the website is not as responsive as the professional one, however very very accurate to the original mockup presented by Viking Code School. I am happy and relieved. Along with the website pictured below, I have also finished the Sign Up page replica, Friends page and Newsfeed website, all available under below link and in my repository.

Screen Shot 2016-08-07 at 22.48.03

https://htmlpreview.github.io/?https://raw.githubusercontent.com/Visiona/prep_facebook_pages/master/about.html

I have spent this all weekend studying (about 14 hours). I’m just finishing Codecademy Ruby for beginners. I am also reading Chris Pine book which goes very well – I have just finished chapter 7. The book is very well written and easy to follow, explaining small things like small letters have a greater value than the capital letters so this is why “adam”>”Xanax” while letter X is greater in value than letter A, letter a is greater than A. There are many similarities to Python, but also differences. I feel also I need to sync more with this new way of translating logic into language than when I was learning JavaScript . I soak with the logic of the Ruby language and my head with spinning around now with the amount of various material I have gone through.

My goal is now to finish this last block by the end of the coming week. Once I have done that, I will work out the best routine before college kicks off back again in late September.