¿Dónde luchan los principiantes de CSS? ¿Qué áreas son las más frustrantes de entender?

Answer 1

Para mí la lucha comenzó cuando tuve que hacer cosas profesionales.

Déjame explicarte, haces un sitio web para ti mismo y se ve exactamente de la manera deseada. No cuestionamos, no luchamos, estamos bien para ir.

Ahora imagina que ese tipo, lo llaman cliente, te quiere, cambia el menú para hacer lo que vio en otro lugar, y no sabes cómo hacerlo, lo buscas en Google, encuentras piezas de código, funciona. ! pero … no exactamente como debería … el menú se abre demasiado rápido, no hay submenú, el título está debajo del menú.

Ahora estás en una mierda profunda, porque necesitas entender el siguiente nivel, ¡dominar css!

hay diferentes etapas en css, van por el nivel de complejidad, más complejo es el problema para actualizar y los cambios.

Enumeraría el nivel por dificultad aquí (Mi propia respuesta, mi propia escalera):

1. Diseño visual simple (tipografía, color, fondo). La parte que todos amamos, fácil de leer y predecir, sin tonterías, un niño de 10 años puede dominar eso en una semana.
2. los punteros específicos, clase, ID, menú (UL, LI) 20% de dificultad.
3. los punteros específicos profundos , cuando apuntas a un div dentro de un div, por ejemplo, cuando no tienes una clase asociada a ese objeto específico porque no tienes acceso al html. 30% de dificultad
   algunos pueden encontrarlo más difícil, creo que está bien
4. La dificultad de los flotadores (izquierda, derecha, etc.) está bien, puedes hacer algunas pruebas, la experiencia te dará confianza y podrás jugar para hacer lo que quieras. Lo clasificaría en un 40% de dificultad para el conocimiento requerido.
5. La posición, ya ves, para un cerebro como el mío, esto simplemente no tenía sentido.
   La posición absoluta se usa para colocar cualquier cosa donde quieras, ¿no?
   ¿Por qué está todo desordenado?!? Me tomó un año sentirlo fácilmente, cambiarlo, arreglar el plan de mi código. 60% incluido (índice Z, posicionamiento, especificidades del navegador)
6. Por último, pero no menos importante, la capacidad de respuesta . Es la comprensión global de todo lo que es css. hasta que sea lo suficientemente bueno, temerá cada vez que abra su sitio web en un dispositivo o navegador específico.

A partir del punto 2 luché, encontré compromisos, hice excusas, me pregunté, me rendí y regresé.

El código está evolucionando, las herramientas son más fáciles y los clientes entienden que algunos navegadores y dispositivos deben dejarse de lado. (Te amo, cliente)

Si está deseando aprender css, puedo decirle por mi experiencia que es fácil, si encuentra al profesor adecuado, paso a paso, obtendrá la razón detrás de cada error.

TL; DR: el posicionamiento y la capacidad de respuesta son difíciles de manejar a menos que busques la forma real de resolver esto.

Answer 2

Definitivamente las posiciones . Es difícil de entender, porque te pide que entiendas conceptos abstractos como padres e hijos.

Mezcle la posición con animaciones de css y / o animación de Javascript y tendrá desarrolladores front-end peor pesadilla.

Aprendí posiciones en CSS por mi cuenta (mi profesor ni siquiera sabía lo que era), pero como quería hacer animaciones muy limpias hechas solo con código, tuve que aprenderlo (¡y lo logré! Mi primer intento real de usar La posición para una animación compleja en un sitio web estaba en el título de mi sitio web de portafolio. Le dejaré que lo vea.)

Incluso con mis pocos años de experiencia, no entiendo completamente cómo funcionan las posiciones (entiendo lo que cada una de ellas “significa”, pero no sé por qué reaccionan como x en situaciones particulares).

La posición es realmente lo que hará que su sitio web se vea limpio y moderno (con encabezados pegajosos, por ejemplo, y muy buen comportamiento de respuesta). También hace que su diseño sensible sea más fácil de codificar.

Afortunadamente, un concepto reciente en CSS, pantallas flexibles, reemplazará una parte de las funciones de atributo de posición. Le recomiendo aprender flex antes de las posiciones, porque la flexibilidad será ampliamente utilizada en el futuro y facilitará su trabajo para crear una visualización rápida de la página. Tenga en cuenta que la posición es solo para cosas de lujo, flex, sin embargo, está hecha para crear columnas y listas de bloqueo. También te ayudará a entender un poco las posiciones, ya que se basa en parte en los mismos conceptos.

Así que sí, la flexibilidad y la posición probablemente serán la parte más difícil de tu aprendizaje.

Answer 3

Asi que. Muchos. Propiedades

Desde un fondo de programación, estoy acostumbrado a aprender una sintaxis relativamente pequeña. Con CSS, la gran cantidad de propiedades es abrumadora.

Si quiero cambiar el color de algo uso:

color , background , background-color

Necesito permanentemente tener abierto algún tipo de hoja de referencia, incluso si estoy haciendo cosas básicas.

Las cosas simples se sienten no intuitivas.

Es probable que esto desaparezca a medida que tenga más experiencia, pero siento que incluso las tareas simples de diseño y diseño son difíciles de realizar.

Centrar un div implica cambiar el ancho y los márgenes.

¿Quieres posicionarte usando top, bottom, right, left ? Tienes que establecer la position .

Ah, y el hecho de que la posición absoluta signifique que el elemento está posicionado en relación con otro realmente me irrita.

Answer 4

He terminado mi html, CSS, javascript curso en codeacademy. En cuanto a tu pregunta, no hay ninguna parte de CSS con la que luchar. Depende de sus necesidades o creatividad para crear su sitio web cómo lucir. Por lo tanto, no necesita experiencia, lo digo como práctica y necesita saber cómo buscar en Google este CSS, como el encuadre de preguntas para sus dudas.

Hay tantos sitios web para aprender sobre desarrollo web. Solo elige uno de ellos. Recomiendo la academia de códigos para lo básico y trato de crear una aplicación de una sola página para practicar lo que has aprendido.

Las cosas difíciles hacen que te muevas en la dirección correcta y te da experiencia. Así que cuanto más practiques (apliques cosas al crear sitios web), más aprenderás. Todo lo que aprendes por ti mismo principalmente.

Si tiene alguna pregunta sobre el desarrollo web por favor comentar.

Answer 5

Cuando era principiante, siempre admiraba el hermoso sitio diseñado con CSS, algo de JavaScript y, en secreto, espero que mi próximo trabajo con CSS se acerque a lo que admiro.

El principal problema que enfrenté fue la visualización del CSS que estoy escribiendo. No visualicé, escribo una regla y recargo la página para ver cómo se refleja. Así que mis atajos de teclado más golpeados fueron:

• Ctrl + s * (2… 5 veces)
• Alt + tab
• Ctrl + r / Ctrl + Shift + r * (2… 3 veces)

Entonces, el problema que luego me di cuenta es que percibí el CSS como un código de programa pero como una herramienta de dibujo / pintura.

Había tomado algunas clases de dibujo y pintura, y lo más importante de esas clases es que no es necesario que lo visualicen primero. Pinta lo que deseas en tu mente, visualízate a ti mismo mezclando la paleta y poniendo pinceladas.

Así que traté de aplicar esa filosofía aquí en CSS; y ahora generalmente escribo mi 70% inicial css sin cambiar al navegador.

Y otra área de lucha era el posicionamiento de elementos. Posición como “estática”, “relativa”, “absoluta” y “fija”. La combinación de estos me mantuvo desconcertado durante la mayor parte de los días de mi tiempo de principiante.

---

Si le gustó mi respuesta, le agradecería que la votara presionando el botón azul claro que se encuentra debajo y puede seguirme si desea leer más como estos. O puedes visitar mi blog Time to Hack.

Answer 6

Margen vs Relleno – ¿Cuál usar y cuándo? Hay casos en que * es aplicable *, pero es porque no ha considerado que habrá ajustes que tendría que hacer a medida que se presenten las solicitudes de actualización.

Posicionamiento: Relativo vs Absoluto – Igual que el anterior. A pesar de que la posición absoluta es la salida fácil, FME, siempre debe ser su última opción. (Especial: propiedades que necesitan un posicionamiento especificado para poder trabajar.)

Clases: si está utilizando un marco, siempre es una buena idea agregar nuevas clases personalizadas en lugar de modificar las existentes.

EDMs: saber qué funciona y qué no funciona. Todavía no he podido encontrar una guía confiable.

Y, por último, compatibilidad: navegadores y back-end. Estas son las únicas cosas que realmente hacen que el CSS sea más difícil de lo que tiene que ser.

---

Nota especial:

JS. Simplemente te permite hacer mucho más. Solo ten cuidado con el tipo de cosas que podrías haber hecho en CSS más simple.

Answer 7

Algo por lo que luché como principiante entendía la especificidad de CSS. A veces me sorprendería saber por qué ciertos objetos reaccionaron como lo hicieron.

También me costó entender cómo colocar los objetos.

Answer 8

Como todo, la práctica es perfecta. Si está familiarizado con html es un ahorro de tiempo usar css. He encontrado que algunas personas realmente se confunden con cuándo usar las clases y cuándo no.

Answer 9

Creo que para mí fue:

1. Pseudo elementos
2. Diseño 3D y animación con CSS.
3. Posicionamiento CSS