Tech Blog #3: Styling practice with CodePen.io

Business & Tech

After a rough start to this week, I stumbled on some new-found energy that spurred me to design and write a little something something.

And then some. That’s where this post comes in.

Since mid Jan this year, I have been on a rampage with my 2 hours (or so) a day picking up web development basics. My mornings went like this: Get up at the crack of dawn, watch my Treehouse tutorials and do the code challenges. But due to the steep learning blitz, I felt that I needed to step back and really let things digest. I needed a more optimal way of learning and the best way that I know of is to practice practice PRACTICE. That’s when I came up with the idea of going on some sprints – essentially a mini-project where I do nothing but code for an hour.

I had full intentions of using CodePen.io as my scrum area for my mini-projects. I began using this last week and at that stage, I was thinking of designing another 2 mini-p’s focussing on polishing my HTML 5 and CSS 3.

But then the weekend rolled in and I found some inner energy to start finishing those 2 pieces this week. Here are the results.

CodePen.io

Just one quick thing before I start.

I first toyed with CodePen.io around this time. I was incredibly rough back then but I’m on the improve having worked with the Treehouse crew for the past month.

And for any budding designer/developers, or for any well-travelled pros, CodePen.io is a great app that lets you develop on the fly using HTML, CSS and Javascript. It has a lot of social features such as sharing and admiring (i.e. liking) other people’s work. And when I say ‘work’, I mean there’s an abundance of designs out there which you can fork (but don’t forget to credit the original designer of course).

And forking a piece of code is exactly that; it allows others to further enhance the original (or at the very least, it spreads ideas around).

Designing around Flexbox

CodePen: FlexBox
Date: 6 Feb 14

Flexbox

Flexbox is one super way of getting content to align. Working with the entire Box Model has been challenging to say the least and I needed a quick and easy way to get all my objects looking aesthetically pleasing to the eye.

Here’s a good little article on how Flexbox works.

I really cannot explain it any better. But what I would just like to say is that I would encourage you to use the ol’ Flex if you want a quick and easy way to fire up a page (for those that haven’t used it before).

There’s obviously better options like Bootstrap but I’ll save that for a later post.

An iconic statue is ideal for a Background Image ‘Cover’

CodePen: Background Cover
Date: 12 Feb 14

Waiting

No Flexbox here BUT I do have one photo that I have been intending to use for a while. This snap is from the statue in Australia Square, Sydney where it has been sitting for as long as I can remember.

The page looks pretty simple – simply because IT IS. The only trick here is to use:

body{background-size: cover;}

with your choice snap.

Of course I have a little Lorem text in there to indicate some potential possibilities to further the design. But that’s more of a small feature compared to the Claude Monet background.

And in case you want to host your CSS and/or JS on Google Drive, then this guy has it covered.

Cubic-Bezier in CSS

CodePen: The Cube Moves
Date: 13 Feb 14

Cubic Bezier

I always fancied myself as having a good eye for design so I wanted to mess around with some Typography initially. However I stumbled upon Cubic-Bezier and soon found myself immersed in the design possibilities. So the Typography went out the window – well, except for Google Fonts – and in came the mini-p centered around the Cubic-Bezier.

The CB basically works like this. Once again that resource is invaluable and I do not intend to use this post as tutorial.

What this page does, is that once you hover over that square block above the word “The”, the square block moves from left to right while changing colour from “white” to “yellow”.

And I’m sure that if you need more resources on CB, a simple Google will bring up a fair few resources.

I need more!

More lessons, more practice and more mistakes.

Yes I need more mistakes and I want to make them as early as I possibly can – so that I can avoid future ones.

I have to get back to my routine now. It’s been an enjoyable month learning with Treehouse – big shout out to Guil, Nick, Jason, Dan, Pasan, Zac, Allison and Mat. You guys ROCK!

Fail, Fail-fast THEN GROW!

PC @ MMA

3 thoughts on “Tech Blog #3: Styling practice with CodePen.io

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