Blocks, floats, boxes… looking for pattern

I am just finishing HTML and CSS course of coding block at Viking Code School. It took me way longer than I expected. After I had finished The Viking shop website, I started working on the final assignment which is replicating in HTML and CSS four Facebook websites and sub-websites. It took me five days to build them. I have only a few lines of code to finish and refactor the whole thing before pulling my request to VCS on GitHub. I will include the effect of my work in the coming days.

I know this part of the course was emphasizing basics in web building, so nothing like modern responsive solutions or even new CSS properties like flexboxes were included… not mentioning JavaScript. However, I feel I spent more time on it than necessary. I came across many bizarre positioning issues like the one below.

So here we have, main friends box, holding image more or less in the middle between top and bottom border, but friend-name box or button are pushed to the bottom border and clearly margin that is set on friend-name box doesn’t work at all. It is inline-box element so margins should work. I have sorted this problem by setting main friends box as relative and float, img with a display as block and friend-name with display as absolute with adequate positioning. It worked, I still don’t know why the first scenario behaved the way it did. Moreover, while searching on the internet for a solution, I found a vast list of situations where these boxes are acting not as they are expected to ie here.

Screen Shot 2016-08-03 at 22.32.58

Screen Shot 2016-08-05 at 00.54.23

So far, for the past five weeks, I am spending at least 20 hours a week on studying or doing projects. Here is my breakdown for last seven days:

Friday – 4 hours

Saturday – 6 hours

Sunday – 4 hours

Monday – 3 hours

Tuesday – 3 hours

Wednesday – 2 hours

Thursday – 5 hours

Which in total makes 27 hours! I spent it mostly on doing some short tutorials with Ruby, finishing Viking Shop Website and the Facebook project. I realize how difficult it is to find time. I am coming from work around 6pm. Doing some exercises, preparing dinner will take about an hour. Ironing, cleaning, emails, shower etc. will take some more time.  It doesn’t leave me with more than 3 hours for studying… sometimes if I am eager about learning more I do it at the expense of my sleep – which is very bad idea. On Saturday I was working until 4am, and it took me other 2-3 days to recover from this “jet lag”. Very bad idea. Thankfully summer time at work is not very busy, so I have enough energy for studying.

I have also started yesterday  Codecademy Ruby course breaking the order of things a bit. I just couldn’t resist on one side and the other I was frustrated about being stuck with CSS and the websites building project for so long.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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