08/16/2013 - No Comments!

Strengthen Your CSS Layout Skills

All skills will be forgotten without regular practice. When I think of all the facts and skills I've memorized at some point in my life for a test or one-time exercise, it's truly baffling. While I'm sure this knowledge is rolling around in my gray matter somewhere, my knowledge of the path leading to it has been lost for years.

Over the last few months I've been teaching a group of designers at my work about CSS, and why it's important and powerful skill to have as a designer. During the third two hour training session, I realized just how important the hands-on application of new knowledge is. Those attending my sessions have been grasping the concepts much more quickly than I ever had when learning by reading books. The hands-on approach of my sessions seemed to be working! It just goes to prove that:

There is no better way to learn than by simply doing. Break things. Fail. Just always be sure to stand up and try again.

The only surefire way to fail at something is to give up trying!

As a current CSS project wanes on the priority list at the office, I've taken up a new way of practicing my CSS skill set. It's very simple yet has been a very effective practice for me. I've been recreating magazine layouts using HTML & CSS. Easy, right? I enjoy it because the possibilities are endless, and you'd be surprised how difficult some of the more advanced layouts can be. Recently, I've been further challenging myself by adapting the layouts to be responsive.

Some Examples

Here are a few recent layouts that I've coded up; they begin very simply and increase in their complexity. Click the image to view my coded version. Please try this out yourself, it's fun! Never stop learning.

swim-layout

change-layout

southern-charm

Published by: Ray in 2013, CSS, HTML, Learning, Responsive Web Design, Thoughts