寻找CSS属性可编辑交互式用户界面学习工具 [英] The hunt for a CSS attribute-editable Interactive User Interface Learning Tool

问题描述

我试图学习css属性关系。根据我目前的知识，我敢说，大多数网页的构建都只有大约30种左右的属性，但你如何匹配它们，就是让页面看起来更干净，更好的功能和整体为用户提供更好的体验。目前，我得到的反馈是，唯一的学习方式是结合使用经验并查看具有我想要的功能并尝试复制的网页上的实现示例。我认为这太耗时了，对于想要开发一种可靠的CSS方法的人来说，这不是一个有效的工具。您是否使用了类似于以下任何工具的工具来帮助您了解基本操作语义标记的属性交互作用？

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

• JSFIDDLE ：一个用于在一个窗口中查看HTML，JS，CSS和结果的在线平台，允许共同的共享代码。




• 按钮制作器：为图形按钮生成动态CSS / HTML。




• SourceTree ：了解Git的存储库结构，
  Mercurial和SVN版本控制系统。




• Eclipse ：具有多个实现，代码和信息的桌面组织的IDE
  

• CodingBat ：一个在线控制台通过'snippet'编码学习Python或Java，并查看不同传递参数的结果。

：一个在线IDE，允许片段编码和查看多个结构化学习路径中的CSS / HTML / JS /结果。

具体而言，我想了解基于位置的样式的关系，如固定，浮动等。

解决方案

对我来说，最好的学习方式：想想你想做的事情。做了。经历找出哪些工作起作用，哪些不起作用的过程。找出如何解决它。修理它。惊讶于糟糕的结果。重复。

您不会通过查看独立示例来了解所有小技巧。 看任何东西都不会学到太多东西。做到这一点。一旦你掌握了正在发生的事情，就做点什么。复制内容。耗时的？是的，当然...如果你这样说。体验随着时间而来。

复制其他人的事情是，你不知道他们经历的过程。他们为什么以某种方式做某事？这是对的吗？仅仅因为有人把它放在网上并不意味着它是好的。

特别是，你想实现什么功能？谷歌认为，阅读所有人不同的方式。找到一个你喜欢的，实现它。调整它。如果你不明白的话，看看那个。

我认为有一个术语，当你试图找到某些东西时，你会从一个（相关的）另一个直到你忘记了你的原始问题......当你需要提高生产力时，这很糟糕。这里完全没问题，你只是想学习一切。

对于某些事情来说，有结构是很重要的。一旦你了解了基础知识，我认为拥有某种结构或系统会让你失望。我喜欢去解决问题，随时学习。当我试图找出某些东西时，除了记事本和Chrome之外，我没有任何东西可以打开Goog​​le搜索结果标签。您不需要所有这些GUI工具。当然，他们可能会让你的开发速度更快一些，他们的自动完成或者错误警告，但是你的冲动是什么？

不要花太多时间找到完美的一套工具，你永远不会得到你正在寻找这些工具的东西。就这样做。

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.

解决方案

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.

这篇关于寻找CSS属性可编辑交互式用户界面学习工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！