So i forgot to write my weekly update last week. Was just too busy working on my app that I didn’t even have time for reflection! Then just yesterday I received a notification that a certain polyashemy.wordpress.com had been updated, and it occurred to me! (polyashemy is written by this dude in class called Ash, and he writes really humorously and pleasantly that I’m an avid follower of his blog now).
Anyway, to put things into context, I’ve just finished a gruelling 3.5h class on PHP. Today Roger lectured on Object Orientated Programming (OOP) and Model View Controller (MVC). It was extremely tough- especially since I didn’t have time yesterday to read the documentation so I could at best understand half of what he was teaching today. But anyway, that’s blog material for Week 4. What I wanted to say (… pause for dramatic effect…) was that I’m sooo busy that the only time I can spare to write this blog post, is after the 3.5h class, while waiting for my pizza order at Dominos (WOOT) now. I’ve been given an estimated waiting time of 15 min, so hopefully within that time I’ll be done reflecting on what progress I made last week.
Okay, so back to Week 3. Last week we focused on learning HTML, CSS and LESS. We also used the HTML5 and Twitter Bootstrap frameworks (by downloading Initializr). Basically, HTML would allow us to enter the desired website content, while CSS (short for Cascading Style Sheets) would allow us to style the page- make it all pretty and such. LESS was a language extension to CSS which really simplified the writing of CSS code – with CSS alone we had to specify styles for every element individually, while with LESS, it works like a programming language- we could simply nest CSS elements within each other, and so some elements would inherit certain styles etc. It was pretty cool- all we had to do was to write LESS code, then use a program called SIMPLESS (or lessphp on cloud9) to convert the code into CSS. Then what HTML5 provided was a default spreadsheet with some default code embodying best practices, while Twitter Bootstrap provided alot of custom-made CSS styles – like premade carousels, modal-boxes etc. Indeed, Twitter Bootstrap really reduces the work of web designers ALOT, you can just use the custom stuff and tweak it some to give the look you want- so you don’t have to start from scratch! However,the trade-off involved is that your website could end up looking extremely like other websites which use the same template!
So we basically stepped straight into it, applying what we learnt directly into implementing our photoshop mockup into an actual webpage! It was very frustrating at times, especially when you spent half an hour on an element and couldn’t get it right. For the most bit, your website looks extremely horrible until you get everything right. I had a lot of problems particularly with the modal box and carousel, but I pretty much managed to smooth things out after many hours of arduous work. It’s really a huge sense of satisfaction when you finally get your website to look the way you wanted! Even learnt how to host my website- it’s currently hosted on Appfog: http://chessdimension.ap01.aws.af.cm/ At this point it’s not connected to my domain yet, just want to keep it private and low profile for now till I actually get it right, and put in real images instead of the placeholders I’m currently using.
Just so I remember, things that still need work are –
1) I’ve currently got placeholder images and logos on the website- these have to be exchanged for actual ones.
2) my modal box that launches on clicking the play button has been styled, but the register modal box is yet to be completed. I expect quite a few problems because I was unable to style the modal box by id, and simply used common classes – will need to figure out a way to distinguish the second modal box from the first, and apply new attributes to it! (still can’t figure out why my CSS code doesn’t work when i specify the modal id).
3) I tested the website on my huge desktop in the office today, and it appears that on a big screen, my content is not long enough, and the footer ends up being 4/5 down the page, leaving an extremely ugly white space below. Done some research on how to fix that (using this thing called sticky footers), and will have to implement that.
4) My website is currently not responsive – just resize it a bit and all kinds of holes start appearing – things shifting into weird positions, basically its a mess. i’ll have to find some time to fix that – we don’t have any more time allocated in class for website design, so it’ll prove a challenge to find the time to actually sit down and fix it all.
Other than that, I think I’ve made good progress! Learning how to code a website within a week, is quite impressive (if I may say). While there can be loads of things to improve on, I guess I must draw the line. As my mentor Ross commented “You can spend days and months and years on CSS, to customise your stuff. But you shouldn’t get too carried away”. Words of wisdom.
Anyway, one last thing before I put down my pen (figuratively). Just a shoutout to Ross, if you’re reading this, thanks for being the best mentor ever! Really appreciate you taking your own time to help me research on how to make the chess board thing work!🙂
OK, so that’s it from me for now. Just in case you’re interested, I’m already back home, munching on my pizza as I type. Got to watch some shows with my girlfriend before I go to bed, hopefully I manage to catch more than 5 hours of sleep tonight before another long day tomorrow. Will have to do some reading at the office just so I don’t get totally lost at class again tmr.
Echo “Over and Out”;