寻找CSS属性可编辑的交互式用户界面学习工具

Question

我正在尝试学习css属性关系。以我目前的知识，我冒昧地说，大多数网页都是围绕着大约30个左右的属性构建的，但是如何匹配它们才能使一个页面看起来更干净、功能更好、以及用户的整体体验更好。目前，我得到的反馈是，学习的“唯一”方法是结合经验，在具有我想要的功能的网页上查看实现的示例，并试图复制。我认为这太费时了，对于那些想要开发一个可靠的CSS方法的人来说，这不是一个有效的工具。您是否使用了与以下任何工具类似的工具来帮助您理解用于语义标记基本操作的属性之间的交互？

当前具有GUI以允许快速反馈属性/元素操作的工具：

• JSFIDDLE：一个在线平台，用于查看HTML、JS、CSS以及一个窗口中的结果，允许共享代码。
• 按钮制造者：用于图形按钮的动态CSS/HTML生成。
• SourceTree：用于理解Git、Mercurial和SVN版本控制系统的存储库结构。
• 月食：一个包含多个实现、代码和信息窗格的桌面组织的IDE。
• CodingBat：一个在线控制台，用于通过“片段”编码学习Python或Java，并查看不同传递参数的结果。
• 代码年/ CodeAcademy：一种在线集成开发环境，允许在多个结构化学习路径中编码和查看CSS/HTML/JS/结果。

具体来说，我想学习基于位置的风格的关系，如固定的，浮动的等等。

Answer 1

对我来说，最好的学习方法是:想出你想做的事情。搞定。在这个过程中找出哪些是有效的，哪些是不可行的。想出解决办法。把它修好。惊讶于结果有多么糟糕。重复一遍。

你不会通过看独立的例子来学习所有的小窍门。“看”什么东西都不会学到多少东西。去做吧。一旦你对正在发生的事情有了基本的了解，就做点什么吧。复制什么东西。很费时吗？是的，当然..。如果你说是的话，那就是吧。经验随时间而来。

模仿别人的问题是，你不知道他们经历了什么过程。他们为什么要做某种特定的事情？这是对的吗？只是因为有人把它放到网上并不意味着它有任何好处。

因此，具体而言，您希望实现什么功能？谷歌，阅读所有不同的方式，人们这样做。找到一个你喜欢的，实现它。调整一下。如果你不明白，那就去调查。

我认为有一个术语是指当你试图发现某件事时，你会从一个(相关)事物到另一个(相关)事物，直到你忘记你最初的问题…当你需要有效率的时候，这是很糟糕的。在这里很好，你只想学到所有的东西。

对于某些事情来说，有结构是很重要的。一旦你学会了基础知识，我认为拥有某种结构或系统只会拖慢你的脚步。我喜欢努力解决问题，边学边学。当我试图找出一些东西时，我除了笔记本和Chrome之外什么都没有，还有很多谷歌搜索结果选项卡打开。您不需要所有这些GUI工具。当然，他们可能会使您的开发速度更快一些，他们的自动完成或错误警告，但您急什么呢？

不要花那么多时间去寻找那些你永远找不到的完美的工具。就这么做。