Coding online – YOOBEE: HTML and CSS Beyond the Basics

yoobee

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.

Screen Shot 2015-01-20 at 9.37.41 am

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.

Some screenshots…

… 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!

Screen Shot 2015-01-20 at 11.55.34 am

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.

Advertisements

5 thoughts on “Coding online – YOOBEE: HTML and CSS Beyond the Basics

  1. Hi Libby,

    I read a few of your blog posts already, informative read of all the learning HTML/CSS and Javascript platforms you’ve tried. I recommend jQuery and Javascript book by Jon Duckett for you, it’s a great asset for learning more Javascript and jQuery. Furthermore to answer your question as to why your site does not render on mobile as a responsive website is because it needs this in the ‘head’ of the page: tuck that in between those tags and give it another whirl.

    Thanks for sharing, Maurice

    • Hey Maurice
      Thanks for the comment. Have updated site with what you put on twitter ([meta name=”viewport” content=”width=device-width, initial-scale=1″] replace [ with <)! It works yay! Cheers lib

    • Yes that’s what I like about his books, nice layout and very concise. Easy to follow as he starts off with the basics but covers a lot so towards the end of the book there’s advanced Javascript. Also a lot of examples in jQuery and a number of plugins. The kind of book you’ll reference once you’ve read it cover to cover 🙂

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