¿Quieres mejorar en código? Enseñarle a alguien CSS.

Una amiga mía me pidió recientemente que le enseñara a codificar. Era una principiante absoluta y no tenía idea de lo que realmente implica la codificación. Decidí empezar donde comencé: HTML y CSS. Usando CodePen, comenzamos a bifurcar bolígrafos y a modificarlos. Pronto, comenzó a abrirse un camino de aprendizaje.

El objetivo de este artículo no es enseñar CSS básico a quienes ya lo conocen, sino resaltar las cosas que inspiraron a un recién llegado y, con suerte, inspirarlo a usted a transmitir algunos conocimientos a otros si surge la oportunidad. Me sentí bien ayudar a alguien y, a cambio, aprendí algunas lecciones realmente valiosas que cambiaron mi forma de pensar sobre mi código. ¡Gana, gana!

Entonces, aquí vamos: cinco lecciones que aprendí al enseñar CSS a alguien.

Lección 1: No empezar de cero

Cuando comencé a codificar para la web hace 12 años, comencé con el diseño: posicionamiento con flotantes, márgenes, relleno y declaraciones de posición. Puede parecer obsoleto hoy en día, pero aun así, aquí es donde fui de inmediato con mi nuevo compañero de programación.

No fue tan bien.

Como puede imaginar, comenzar con algo como "Aquí se explica cómo colocar un cuadro vacío en el medio de la pantalla" fue un error. ¡Qué aburrido! Y aunque me impresionó mi propia capacidad para demostrar cómo Flexbox puede colocar un elemento en el centro de la pantalla (más sobre esto más adelante), inmediatamente me enfrenté a muchas preguntas adicionales no posicionales.

"Entonces, ¿cómo se cambian los colores?"

“¿Puede cambiar de forma cuando se coloca sobre él?”

"¿Qué fuentes puedes usar en la web?"

Pensé que estábamos a semanas de todo eso.

Entonces, mis planes de enseñar la cuadrícula de 12 columnas se fueron por la ventana y sacamos la tabla de colores con el nombre de Chris junto con un par de bolígrafos bifurcados y comenzamos a jugar. En primer lugar, cambiamos los colores del logotipo de Cassidy Williams Netflix/Netlify. ¡Guau! Éxito instantáneo.

a href="https://netlify.com" target="_blank"   div    div/div    div/div    div/div  /div  divPrettier/div/a

Luego, algunos ajustes simples al CSS:

body {  background: #F9F2DB;  color: #092935;  font-size: 50px;}
a {  color: #092935;}
.logo .uno, .dos, .tres {  background: #C61561;}.logo .dos {  box-shadow: 0 0 20px #F9F2DB;}.logo::before {  background: #F9F2DB;}
.name {  letter-spacing: 8px;}

¡En cuestión de minutos, mi amigo quedó enganchado! No había que preocuparse por una posición aburrida, solo un ejemplo claro de cómo unas pocas líneas simples de código pueden convertir algo tan familiar en algo completamente diferente.

¡Entonces se dio cuenta de que puedes cambiar el color de cualquier cosa! Cargamos un par de sitios conocidos en el navegador y cambiamos los colores de algunos textos y fondos con DevTools, todo en un par de minutos. ¡Misión cumplida! Mi amigo estaba enganchado.

Lección aprendida: no se preocupe por intentar construir algo desde cero. ¡Juega con lo que ya existe!

Lección 2: Comentarios

Aquí no es donde había planeado ir con mi clase planeada, pero surgió la pregunta de por qué algunas partes de CSS comienzan /*y terminan con */, así que lo hicimos.

Este realmente me hizo pensar en mi propio trabajo. Realmente no comento mi código lo suficiente. Ver a un nuevo codificador comentar todo (y me refiero a todo) me recordó lo útiles que son los comentarios, no solo para usted, sino también para un equipo más amplio, o incluso para usted en el futuro. (Sarah Drasner tiene una gran charla sobre este tema).

Y aquí está la cuestión: hasta entonces, pensaba que estaba comentando con bastante diligencia. Sin embargo, ver a otra persona hacerlo me hizo darme cuenta de cuántas veces miro un fragmento de código (particularmente JavaScript) y desearía haber puesto una o dos líneas allí para recordarme lo que estaba haciendo. Una tarea de diez segundos podría haberme ahorrado cinco (o tal vez incluso más) minutos en el futuro. Eso suma y ahora es algo en lo que estoy trabajando.

Lección aprendida: Comenta más.

Lección 3: Posicionamiento

Comenzamos con algo de HTML básico y, sinceramente, vi que los ojos de mi amigo se ponían vidriosos casi de inmediato. Parece tan aburrido cuando no puedes verlo haciendo nada de inmediato (a diferencia de editar CSS preescrito). Sin embargo, nos mantuvimos firmes y obtuvimos resultados.

Créame, no comience colocando elementos div vacíos con bordes de 1 píxel a su alrededor. Perderás tu audiencia muy rápidamente. Coloque una imagen de un perro allí, o del bebé Yoda o de una pizza, siempre que no sea un elemento vacío.

Luego recurrimos a Flexbox. De hecho, al principio encontramos que CSS Grid era demasiado. Analizamos brevemente CSS Grid, pero al leer muchos artículos al respecto, está claro que muchos asumen que el lector ya está familiarizado con CSS, Flexbox en particular. Mi amigo decidió empezar con Flexbox.

Una admisión de mi parte: estoy tan acostumbrado a usar marcos de UI (especialmente Bootstrap) que muy rara vez posiciono algo en Flexbox escribiendo el CSS yo mismo. Sé cómo funciona y (la mayoría de) las declaraciones, pero todavía muy raramente lo escribo yo mismo, incluso en situaciones en las que sería relativamente fácil. La enseñanza me hizo pensar en mi dependencia de los marcos de interfaz de usuario en su conjunto. Sí, sin duda son increíbles y nos ahorran toneladas de tiempo en proyectos, pero recuerdo haber usado Bootstrap en un proyecto reciente que tenía esencialmente dos páginas y probablemente no lo necesitaba.

Lección aprendida: si el proyecto es pequeño con una cantidad mínima de elementos para colocar, ¡considere deshacerse del marco y el código desde cero! ¡El resultado final será ligero, rápido y mucho más satisfactorio!

Lección 4: Tipografía

Me encanta la tipografía. He tenido la suerte de trabajar con grandes diseñadores durante los últimos años y eso realmente me ha ayudado a captar los matices de la tipografía. Es sorprendente cómo los cambios en cosas como la altura de las líneas y el espacio entre letras realmente pueden ayudar a elevar un diseño de promedio a sorprendente. Esto era algo que tenía muchas ganas de inculcar a mi entusiasta nuevo alumno. Bueno, no tenía por qué molestarme, ya que lo único que me interesaba (inicialmente) era cambiar las fuentes y luego, algo crucial para mí, la gran cantidad de fuentes disponibles para usar. Las opciones son casi ilimitadas y los servicios y fundiciones que ofrecen fuentes web se han disparado en los últimos años hasta un punto en el que todo es posible, a una velocidad con poco impacto en los tiempos de carga.

Pero esto es lo que pasa con los diseñadores (y desarrolladores front-end como yo): podemos ser un poco estrechos de miras en nuestras elecciones de fuentes. Los diseños tienden a ceñirse a las mismas fuentes de los mismos servicios (¿alguien quiere Roboto y Open Sans?) porque sabemos que son fáciles de implementar y que funcionan. Explorar fuentes con alguien nuevo en el oficio me obligó a mirar más allá de los viejos elementos básicos y probar algunas cosas nuevas. Ahora estoy buscando nuevas combinaciones que funcionen juntas y determinando cómo funcionan en la pantalla e impactan toda la apariencia de un diseño. En resumen, enseñarle a otra persona sobre la tipografía ha mejorado mi propio viaje con la tipografía, que probablemente se quedó estancado en algo así como 2017.

Lección aprendida: manténgase actualizado con el tipo.

Lección 5. :hoverhace que todo sea divertido

Las cosas iban bien hasta este punto, pero como probablemente puedas imaginar, las cosas todavía estaban bastante estáticas. Sin realmente planificarlo, nos topamos con agregar un efecto de desplazamiento sobre un elemento y fue un gancho instantáneo, ¡como si estuviera cambiando de color por primera vez!

Los desplazamientos añaden interacción e impresionan fácilmente, lo que los hace ideales para que juegue un recién llegado. Escalar objetos, cambiar un cuadro de cuadrado a redondo, ocultar contenido: estos son los tipos de cosas que se pueden hacer tan fácilmente que los desplazamientos son una forma ideal para que un nuevo codificador obtenga resultados instantáneos. Y aquí está la cuestión: “'jugar” así abre otras puertas. “¿Qué pasa si simplemente hago esto?” es algo que muchos de nosotros rara vez nos preguntamos en nuestro trabajo diario. Con diseños definidos para trabajar, a menudo hay pocas posibilidades de jugar e igualmente menos posibilidades de experimentar.

Entonces, aquí está la lección final: tómate el tiempo para jugar. Con solo que te pregunten: "¿Cómo haces para que esto haga aquello?" Me ha obligado a aprender cosas nuevas, ver qué hay de nuevo en CSS y ver qué puedo incorporar a mi trabajo diario. Experimentar (o mejor aún, jugar) me ha convertido en un mejor diseñador y seguiré haciendo más.

Lección aprendida : tómate un tiempo para jugar.

Conclusión

Si algo me ha enseñado el tiempo que he enseñado CSS a un novato es que ya rara vez escribo código desde cero. Los fragmentos de código y el autocompletado me ahorran horas, pero son esas mismas comodidades las que me permiten olvidarme de algunas cosas realmente básicas. Cosas que debería saber. Al enseñarle a otra persona, aunque sea solo por 15 minutos de vez en cuando, mi codificación en general ha mejorado y mis ojos están abiertos a nuevas ideas y técnicas que de otro modo no habría considerado.

¿Y en cuanto a mi amigo? Bueno, CSS la cautivó tanto durante nuestro corto tiempo juntos que ahora está haciendo un curso en línea que incluye HTML, ¡lo cual no parece tan aburrido ahora que sabe lo que es capaz de hacer!