The hunt for a CSS attribute-editable Interactive User Interface Learning Tool

Question

I am attempting to learn css attribute relationships. With my current knowledge, I would venture to say that there are only about 30 or so attributes that the majority of web pages are built around, but how you match them up is what gives one page a cleaner look, better functionality, and an overall better experience for the user. Currently I am getting feedback that the 'only' way to learn is by a combination of experience and looking at examples of implementation(s) on webpages that have the feature(s) I want, and trying to replicate. I think this is too time consuming, and not an effective tool for someone wanting to develop a solid approach to CSS. Is/are there tools that you have used similar to any of the below that help you understand the interaction of the attributes for basic manipulation of semantic markup?

Current tools that have GUIs to allow quick feedback of attribute/element manipulation:

• JSFIDDLE : An online platform for viewing HTML, JS, CSS, and the result in one window, allowing for common shared code.

• Button Maker : Dynamic CSS/HTML generation for a graphical button.

• SourceTree : For understanding repository structure for Git, Mercurial and SVN version control systems.

• Eclipse : An IDE with 'desktop' organization of multiple implementations, code, and information panes.

• CodingBat : An online console for learning Python or Java by 'snippet' coding and viewing results of different passed parameters.

• Codeyear / CodeAcademy : An online IDE to allow for both 'snippet' coding and viewing CSS/HTML/JS/results in several structured learning paths.

Specifically, I would like to learn the relationships of postion based styles, such as fixed, float and such.

Answer 1

For me, the best way to learn: Think up of something you want to make. Make it. Go through the process of finding out what works and what doesn't. Figure out how to fix it. Fix it. Be amazed at how crappy the result is. Repeat.

You won't learn all the little tricks by looking at independent examples. You won't learn much by "looking at" anything. Do it. Once you have a basic grasp of what's going on, make something. Copy something. Time consuming? yes, sure... if you say so. Experience comes with time.

The thing with copying other people is that you don't know the process they went through. Why did they do something a certain way? Is it even right? Just because somebody put it online doesn't mean it's any good.

So specifically, what function do you want to implement? Google that, read all the different ways people do it. Find one that you like, implement it. Tweak it. If you don't understand, look into that.

I think there's a term for when you're trying to find something, you go from one (related) thing to another until you forget your original issue... That's bad when you need to be productive. It's perfectly fine here, where you just want to learn everything.

For some things, it's important to have structure. Once you learn the basics, I think having some sort of structure or system will just slow you down. I like to go at it and solve a problem, learning as I go. When I'm trying to figure something out, I have nothing but Notepad and Chrome with a lot of Google search results tabs open. You don't need all these GUI tools. Sure they might make your development go a little faster with their auto complete or error warnings, but what's your rush?

Don't spend so much time finding the perfect set of tools that you never get to the thing you were finding those tools for. Just do it.