Soy un programador experimentado, pero acabo de comenzar a aprender desarrollo web. Puedo aprender JavaScript y HTML bastante fácil. Sin embargo, CSS me está volviendo loco. Hay demasiadas reglas y sintaxis extraña. ¿Cómo debo aprenderlo?

Las propiedades en CSS entran en conflicto entre sí: conozca las reglas en profundidad detrás de los diseños .

Esto es grande. Si comprende cómo funcionan los diseños, desbloquea los secretos de CSS. Ya no se preguntará por qué esa molesta propiedad ” alinear texto: centro ” no funciona. Casi todos los conflictos en CSS provienen de propiedades de diseño mal entendidas. Por ejemplo, “alinear texto” solo se aplica a elementos en línea.

Realmente lo entiendo. CSS puede ser difícil. Tomará mucho tiempo aprender y se sentirá incómodo. Sin embargo, definitivamente vale la pena aprenderlo. Una vez que comprenda estos conceptos, toda la sintaxis extraña y las reglas extrañas comienzan a tener sentido.

Domina estos conceptos:

• Conozca la propiedad de visualización: visualización | CSS-Tricks
• Descubra cómo la posición cambia cada elemento y afecta a sus hijos: aprenda el posicionamiento CSS en diez pasos
• Comprender las transformaciones de elementos: transformar | CSS-Tricks

Si aún no lo ha hecho, debe aprender más sobre:

• Los marcos CSS basados ​​en el servidor tienen gusto de SASS, que se ejecuta en Ruby
• Marcos CSS basados ​​en el cliente como LESS, que está basado en JavaScript
• Marcos de diseño web receptivos, como Bootstrap o Foundation

Los tres tienen un enfoque más prescriptivo para CSS, donde las clases específicas dan como resultado un diseño y una presentación específicos. Hace la vida más fácil. En general, CSS es diferente de la programación iterativa tradicional, porque tiene un estilo declarativo, al igual que HTML y JavaScript.

Siempre animo a las personas que tienen dificultades con CSS a que aprendan un marco más prescriptivo como Bootstrap, aprendan cómo funciona y luego echen un vistazo a cómo ese marco define sus propios estilos CSS.

En lugar de seguir tutoriales aleatorios, encuentro que es mucho más interesante dividir CSS en diferentes partes, cada parte tiene sus propias reglas:

– Reglas relacionadas con el posicionamiento estructural (estático, relativo, absoluto, fijo);
– La diferencia entre elementos de bloque y en línea;
– Selectores: clase vs id, descendientes directos vs no directos, hermanos;
– Precedencia: la especificidad de los selectores importa;
– Reglas relacionadas con propiedades que le dan a los elementos un cierto estilo (refiriéndose, por ejemplo, a color, color de fondo, decoración de texto, etc.). Este es probablemente el más fácil;
– La cuadrícula de 960 píxeles;

Los marcos CSS son opcionales.

Comprender estos ya es una base bastante sólida.
Si tiene un marco de estudio (una planificación estructural), podría ser más fácil colocar ciertas reglas en su mente, en lugar de comenzar a aprender reglas a través de tutoriales aleatorios.

CSS es más difícil que JavaScript?

Aprende haciendo aquí:
http://codepen.io/

Pagado
HTML y CSS: Diseño y creación de sitios web: Jon Duckett: 8580001041711: Amazon.com: Libros
Aprender diseño web

Los mejores recursos gratuitos
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS
https://www.codecademy.com/learn

Otros
Construyendo su primera página web
Guión | Aprenda HTML, CSS, JavaScript con nuestro tutorial en línea gratuito | Asamblea General
http://www.css3.info/
Tutoriales CSS | Perro HTML
La mejor manera de aprender CSS – Tuts + Tutorial de diseño web

Más
Aprenda diseño web: más de 50 de los mejores recursos educativos en línea para aprender T0 Crear sitios web

Puedo estar en los mismos zapatos que usted con solo comenzar a retomar el desarrollo web. Me gustaría sugerir un enfoque diferente que estoy usando. Compré un libro en línea llamado “Una forma más inteligente de aprender HTML y CSS” de Mark Myers. No necesita WAMP o XAMPP para esto, solo un editor de texto como Notepad ++. Tengo XAMPP instalado para mi otro libro, que es para construir sitios web dinámicos con PHP. Este libro se compone de pequeños capítulos de aprender, hazlo (88 de hecho) que tienen ejercicios en línea para cada capítulo. Esto realmente refuerza lo que lees porque estás obligado a codificar después de cada capítulo. Cada capítulo tiene una o dos páginas, va bastante rápido. Después de hacer solo 10 capítulos, encuentro que CSS es fácil. El autor muestra la relación entre HTML y CSS muy a fondo. El libro es menos que una parada de comida rápida y los ejercicios en línea son gratuitos para cualquiera. Obtuve mi libro a través de kindle para que pueda obtener una copia a través de Amazon. Lo mejor de codificarte mi amigo.

Estás abrumado Pero solo hay tantas cosas que necesitas aprender en CSS.

Pasa más tiempo con eso.

Si eso no funciona, pasa MUCHO más tiempo con eso.

Luego hará clic y será tan fácil como cualquier otra cosa.

Aprenda sobre semántica HTML y convenciones de nomenclatura. Eso es raro ¿verdad? Aprendiendo HTML para aprender CSS. CSS adecuado y limpio se trata de estructurar su código HTML y nombrar sus clases e identificaciones correctamente.

Otra cosa importante es que diste a mirar CSS como poner pintura en un lienzo. Comienza con el fondo donde define todos los estilos principales. Luego comienza a definir estilos para diferentes secciones html (barra de navegación, barra lateral, área de contenido, etc.). Después de eso, comienza a diseñar los detalles en cada sección.

Con cada capa (lienzo, sección, grupo de elementos, elementos) anula pequeños detalles de sus estilos principales. Este es el principio de la conexión en cascada donde los estilos de capa inferior son anulados por los estilos de capa superior.

Use nombres de clase para definir estructuras modulares como un cuadro cuadrado que sería una etiqueta html de sección con un encabezado y un título.

Primero define .box como la clase para esta sección donde .box-title sería el título de esa casilla. Como el título del cuadro es h1, adquiere automáticamente los estilos de los estilos de nivel inferior.

Echa un vistazo al siguiente enlace. Esta plantilla está construida de manera escalable. Si descarga la plantilla y mira css y html, verá que todo es modulador y, por lo tanto, se puede personalizar fácilmente.

https://almsaeedstudio.com/theme …

CSS es una locura y tiene una mentalidad diferente. Mi consejo es comenzar poco a poco y tratar de construir diferentes elementos de la interfaz de usuario y expandir desde allí. No comience con un diseño de sitio completo. Otros probablemente le darán consejos sobre recursos. Un buen lugar para comenzar es navegar por http://codepen.io/ . Vea cómo las personas construyen elementos y también los bifurcan e intentan cambiarlo. También haga sus propios elementos de la interfaz de usuario y obtenga comentarios al respecto.

Te sugiero que eches un vistazo a los preprocesadores CSS. Añaden mucha funcionalidad y sentido al mundo de CSS. Le ahorran toneladas de tiempo y no tendrá problemas para recogerlos ya que ya tiene experiencia en la codificación. Sé que hay muchos, pero estos son con los que me siento cómodo, y probablemente los más populares:

• Hojas de estilo sintácticamente impresionantes de SASS
• MENOS Primeros pasos | Less.js

Al hacerlo, si aún no ha mirado uno, consulte los marcos CSS. Arrancan su desarrollo CSS con cosas como clases de utilidad, cuadrículas y barra de navegación.

Usa y abusa del inspector, Google y sitios web como CSS Tricks.

Use herramientas como tutoriales y capacitación en video en línea, Codificación, Aprenda a codificar haciendo – Code School

CSS no es tan difícil. Si puede, le recomiendo CSS Core Concepts y CSS Fundamentals de Lynda.com. El autor James Williamson hace un trabajo increíble al explicar las cosas.

Toma mucho tiempo aprender CSS ya que lo sabes. Te recomiendo que aprendas todo lo que puedas y te muevas al framework CSS “Bootstrap”

Ir a través del curso de desarrollo front-end de la casa del árbol. Aquí lo guiarán paso a paso y lo interrogarán también. Esto le da mucha confianza para abordar su próximo proyecto. Comenzará a aprender la sintaxis. Después de esto, comience a hacer algo que sea útil y se verá obligado a enorgullecerse. Creo que el mejor ejemplo sería un portafolio o currículum receptivo de una página que pueda alojar en Git Hub. Estarás buscando en google una tonelada y está bien. Es solo parte del proceso de aprendizaje.

Aprender haciendo. Encuentre un diseño o proyecto web que desee crear y aprenda todo el CSS que necesita para hacerlo realidad haciendo referencia a los recursos en las otras respuestas. Tener un objetivo para trabajar te motivará a mejorar tus habilidades de CSS.

Cuando aprendí CSS, uno de los primeros días me drogué mucho antes de comenzar a escribir código ese día. Dicho esto, CSS desafía toda lógica. Solo debe sentirse realmente cómodo con el modelo de caja y el posicionamiento, y ser realmente bueno para hacerle a Google las preguntas correctas. CSS es definitivamente un rito de iniciación para cualquier desarrollador de front-end aspirante.

Recomiendo w3Schools. No solo dan múltiples ejemplos, sino que la información es bastante comprensible y está bien organizada.

Para ver el verdadero poder de CSS, eche un vistazo a este sitio cuando cada enlace muestra exactamente el mismo contenido, pero usa una estructura CSS diferente

La belleza del diseño CSS