La búsqueda de una herramienta de aprendizaje de interfaz de usuario interactiva editable por atributos CSS

Estoy intentando aprender relaciones de atributos css. Con mi conocimiento actual, me atrevería a decir que solo hay alrededor de 30 atributos que la mayoría de las páginas web tienen, pero la forma en que los combina es lo que le da a una página una apariencia más limpia, una mejor funcionalidad y un diseño general mejor experiencia para el usuario. Actualmente recibo retroalimentación de que la ‘única’ forma de aprender es mediante una combinación de experiencia y mirando ejemplos de implementación (es) en páginas web que tienen la (s) función (es) que deseo e bash de replicar. Creo que esto consume demasiado tiempo y no es una herramienta efectiva para alguien que quiera desarrollar un enfoque sólido de CSS. ¿Hay / hay herramientas que haya utilizado similares a cualquiera de las siguientes que le ayuden a comprender la interacción de los atributos para la manipulación básica del marcado semántico?

Herramientas actuales que tienen GUI para permitir comentarios rápidos sobre la manipulación de atributos / elementos:

  • JSFIDDLE : una plataforma en línea para visualizar HTML, JS, CSS y el resultado en una ventana, lo que permite un código común compartido.

  • Button Maker : generación dinámica CSS / HTML para un botón gráfico.

  • SourceTree : para comprender la estructura del repository para los sistemas de control de versiones Git, Mercurial y SVN.

  • Eclipse : un IDE con organización de “escritorio” de múltiples implementaciones, códigos y paneles de información.

  • CodingBat : una consola en línea para aprender Python o Java mediante la encoding de ‘fragmentos’ y visualización de resultados de diferentes parámetros pasados.

  • Codeyear / CodeAcademy : un IDE en línea para permitir la encoding de ‘fragmentos’ y ver los resultados de CSS / HTML / JS / en varias rutas de aprendizaje estructuradas.

Específicamente, me gustaría aprender las relaciones de los estilos basados ​​en la posición, como fijo, flotante y tal.

Para mí, la mejor manera de aprender: piensa en algo que quieras hacer. Hazlo. Siga el proceso de averiguar qué funciona y qué no. Descubre cómo solucionarlo. Arreglalo. Sorpréndate de lo horrible que es el resultado. Repetir.

No aprenderá todos los pequeños trucos mirando ejemplos independientes. No aprenderás mucho “mirando” nada. Hazlo. Una vez que tenga una comprensión básica de lo que está pasando, haga algo. Copia algo ¿Pérdida de tiempo? sí, claro … si tú lo dices. La experiencia viene con el tiempo.

Lo que sucede al copiar a otras personas es que no se conoce el proceso por el que pasaron. ¿Por qué hicieron algo de cierta manera? ¿Está incluso correcto? El hecho de que alguien lo ponga en línea no significa que sea bueno.

Entonces, específicamente, ¿qué función quieres implementar? Google eso, lea todas las diferentes formas en que las personas lo hacen. Encuentra uno que te guste, impleméntalo. Ajustarlo. Si no entiendes, mira eso.

Creo que hay un término para cuando intentas encontrar algo, pasas de una cosa (relacionada) a otra hasta que olvidas tu problema original … Eso es malo cuando necesitas ser productivo. Aquí está perfectamente bien, donde solo quieres aprender todo.

Para algunas cosas, es importante tener estructura. Una vez que aprenda los conceptos básicos, creo que tener algún tipo de estructura o sistema simplemente lo retrasará. Me gusta ir y resolver un problema, aprendiendo sobre la marcha. Cuando bash descubrir algo, no tengo más que Notepad y Chrome con muchas tabs de resultados de búsqueda de Google abiertas. No necesita todas estas herramientas GUI. Claro que pueden hacer que su desarrollo sea un poco más rápido con sus advertencias automáticas o de error, pero ¿cuál es su prisa?

No pierda tanto tiempo buscando el conjunto perfecto de herramientas que nunca obtenga para aquello para lo que estaba buscando esas herramientas. Solo hazlo.