Classy Coding

My Journey to Code

Relieve Your CSS Anxiety

Leave a comment

Yesterday, MakerSquare held a seminar on design and thanks to the wonderful Elyse Holladay she gave an awesome presentation and tools that I want to share.

If you are starting out a project the first thing you should do is get your basic layout set. The best tool to do this is to use borders around all your divs so you can be sure you aren’t using a CSS trick to visually fix any issues but actually solving your issue. So beware with CSS tricks that look like they solved the problem but they just hide your real problem and then if you have to expand on your layout you will run into problems.

Also, there is a fantastic tool called CodePen where you can put in your html, javascript, and css to see how your changes will look before committing them and having to refresh your page to see what your changes did. This is such a time saver and I tried this on a sample code that Elyse provided and you can really learn how floats work in your layout by doing this. Before learning this, doing any styling was so painful and took three times as much time.  I found using this in combination with the border trick to see my issues and fix them. Check out this awesome blog post about all the different code playgrounds such as code pen so you can choose the best one for yourself to work with: http://www.sitepoint.com/7-code-playgrounds.

Begin any CSS project using borders, using a code playground, and begin with your basic layout before diving too deeply into your styling. These are the tips that I have learned this past week in my studies at MakerSquare and I hope they will help you as much as they did for me. I didn’t like CSS until I learned these steps and tools. So thank you MakerSquare and Elyse Holladay for relieving my CSS anxiety!

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s