I have been working through Yoobee’s online course ‘HTML and CSS Beyond the Basics’. It has covered using wireframes to design your site to ending with responsive design.
There were 7 sections in total and I learned a number of things. What I am particularly happy about is learning more about responsive design.
… positioning, typography, hybrid layouts, CSS downdown menus and different ways of creating buttons.
The final project was to create your own site based on your wireframe from the first lesson. My aim was to create a CV/resume site for myself.
Here is my original wireframe (done in Photoshop) and my adjusted one after doing more of the course (done in Pixlr Editor – great online photo editing tool).
Screenshots of my final site:
I tried to make it a responsive design, which works when making the browser window smaller. However, I have hosted it up on Google Drive and Github and when I look at them on my iPhone it is not coming up with the mobile layout! I’m not sure why this is, anyone got any ideas?
I had a thought that there must be sites out there that can imitate what a website would look like on different devices and with a quick search found this site – http://quirktools.com/screenfly/, you can paste in a website url and change the device and also share that link. Of course you can do the same thing using the developer tools in Chome or Firefox, although I have found Chrome a bit of hassle as I go down in devices sizes, sometimes it doesn’t load the responsive design.
Overall I enjoyed doing this course. The video tutorials were good and activities/tasks useful. I liked that the aim was for participants to have built a site (even if one page) by the end of the course. I personally like to create sites rather then just go through learning of the code without an tangible outcome. And I got a certificate!
The online course was run using Moodle and again it is a great example of how Moodle is an excellent platform for a completely online course – easy to use, navigate and communicate.
I have now started with Treehouse with a free trial. Have picked up some good theory, deeper understanding of how CSS selectors work already.