¿Cómo deberían los diseñadores aprender a programar? Git, HTML/CSS, Principios de ingeniería (Parte 2)

Literalmente, se han escrito tomos sobre el control de versiones. Sin embargo, comenzaré compartiendo una breve explicación y otro contenido introductorio para abrir el apetito de seguir estudiando.

El control de versiones (que no debe confundirse con el historial de versiones ) es básicamente una forma en que las personas pueden colaborar en sus propios entornos en un solo proyecto, con una única fuente principal de verdad (a menudo llamada la rama "maestra").

Voy a repasar hoy es lo mínimo que necesitará saber para descargar un proyecto, hacer un cambio y luego enviarlo al maestro.

Hay muchos tipos de software de control de versiones y muchas herramientas para administrar y alojar su código fuente (es posible que haya oído hablar de GitLab o Bitbucket). Git y GitHub son uno de los pares más comunes, mis ejemplos harán referencia a GitHub pero los principios se aplicarán a la mayoría de los demás administradores de código fuente.

Aparte :

• Para una introducción más completa y técnica, vea el artículo de Tobias Gunther.
• Si prefiere un enfoque más práctico, GitHub tiene una excelente guía paso a paso.

Tu primera contribución

Antes de realizar estos pasos, necesitará configurar algunas cosas:

1. Una cuenta de GitHub,
2. Nodo y NPM instalados en su computadora,
3. Una alta tolerancia al dolor o un bajo umbral para pedir ayuda a los demás.

Paso 1: bifurcación (Obtenga una copia del código en su cuenta de GitHub)

En GitHub, bifurcará (bifurcación = crear una copia del código en su cuenta; en la siguiente ilustración, las líneas azul, naranja, roja y verde muestran bifurcaciones) el repositorio (repo) en cuestión.

Para ello, navegue hasta el repositorio en GitHub y haga clic en el botón "Fork", actualmente en la esquina superior derecha de un repositorio. Este será el "origen": su bifurcación en su cuenta de GitHub.

Como ejemplo, navegar a https://github.com/yourGitHubUsername/liferay.design debería mostrar su bifurcación del repositorio Liferay.Design.

Paso 2: Clonar (Descargue el código a su computadora)

En su terminal, navegue hasta donde desea almacenar el código. Personalmente, tengo una carpeta /github en mi carpeta /user ; me facilita organizarla de esta manera. Si desea hacer eso, estos son los pasos: después de escribir estos comandos en la ventana de su terminal, presione la tecla ↵ para ejecutar:

 cd ~/ ## you'll usually start in your root directory, but just in case you don't this will take you there mkdir github ## this creates a "github" folder — on OSX it will now be located at users/your-username/github cd github ## this command navigates you inside the github folder

Ahora que está en la carpeta /github , clonará (descargará una copia del código en su computadora) el repositorio.

 clone https://github.com/yourGitHubUsername/liferay.design

Una vez que ingrese este comando, verá un montón de actividad en la terminal, algo como esto:

 Cloning into 'liferay.design'... remote: Enumerating objects: 380, done. remote: Total 380 (delta 0), reused 0 (delta 0), pack-reused 380 Receiving objects: 100% (380/380), 789.24 KiB | 2.78 MiB/s, done. Resolving deltas: 100% (189/189), done.

Paso 3: Instalar (Hágalo funcionar en su máquina)

Navegue a la carpeta /project . En este caso ingresaremos cd liferay.design . La mayoría de los proyectos incluirán un archivo README.md en la carpeta /root , que suele ser el lugar de inicio para instalar y ejecutar el proyecto. Para nuestros propósitos, para instalar, ingrese npm install . Una vez que esté instalado, ingrese npm run dev .

¡Felicidades! Ahora tiene el sitio disponible en su computadora local; por lo general, los proyectos le dirán dónde se está ejecutando. En este caso, abra un navegador y vaya a localhost:7777 .

Paso 4: Confirmar (Realizar algunos cambios y guardarlos)

Una confirmación es una colección de cambios que realiza; Escuché que se describe como guardar tu progreso en un juego. Hay muchas opiniones sobre cómo se deben estructurar las confirmaciones: la mía es que debe crear una confirmación cuando haya logrado una cosa, y si eliminara la confirmación, no rompería completamente el proyecto (dentro de lo razonable).

Si no va a un repositorio con un cambio en mente, un buen lugar para ir es la pestaña "Problemas". Aquí es donde se puede ver lo que hay que hacer en el proyecto.

Si tiene una idea para algún cambio, adelante, hágalo. Una vez que haya guardado los archivos, estos son los pasos necesarios para crear una confirmación:

 git status ## this will print out a list of files that you've made changes in git add path/to/folder/or/file.ext ## this will add the file or folder to the commit git commit -m 'Summarize the changes you've made' ## this command creates a commit and a commit message

Sugerencia : la mejor recomendación que he visto para los mensajes de confirmación es de "Cómo escribir un mensaje de confirmación de Git" de Chris Breams. Una línea de asunto de confirmación de Git correctamente formada siempre debe poder completar la siguiente oración: "Si se aplica, esta confirmación [su línea de asunto aquí]". Para obtener más información sobre confirmaciones, consulte "Por qué creo confirmaciones atómicas en Git" de Clarice Bouwer.

Paso 5: Empuje (envíe sus cambios a su origen)

Una vez que haya realizado algunos cambios en su computadora, antes de que puedan fusionarse en la rama maestra (agregados al proyecto), deben moverse de su repositorio local a su repositorio remoto. Para hacer esto, ingresa git push origin en la línea de comando.

Paso 6: solicitud de extracción (solicite que sus cambios se fusionen en Upstream)

Ahora que sus cambios han pasado de sus dedos a su computadora, a su repositorio remoto, ahora es el momento de solicitar que se fusionen en el proyecto a través de una solicitud de extracción (PR).

La forma más fácil de hacerlo es yendo a la página de tu repositorio en GitHub. Habrá un pequeño mensaje justo encima de la ventana del archivo que dice "Esta rama es X confirma por delante nombre-repo: rama" y luego opciones para "Extraer solicitud" o "Comparar".

Al hacer clic en la opción "Solicitud de extracción" aquí, lo llevará a una página donde puede comparar los cambios y un botón que dice "Crear solicitud de extracción" lo llevará a la página "Abrir una solicitud de extracción" donde agregará un título e incluir un comentario. Ser breve, pero lo suficientemente detallado en el comentario, ayudará a los mantenedores del proyecto a comprender los cambios propuestos.

Existen herramientas CLI como Node GH (GitHub también lanzó recientemente una versión beta de su herramienta CLI) que le permiten iniciar y administrar solicitudes de incorporación de cambios en la terminal. En este punto, es posible que prefiera usar la interfaz web, ¡y eso es genial! Yo también.

Paso de bonificación: remoto (enlazar todos los repositorios)

En este punto, tenemos tres referencias de repositorio:

1. upstream : el repositorio principal que está rastreando, a menudo es el repositorio que bifurcó;
2. origin : el nombre predeterminado del control remoto que clona;
3. local : el código que está actualmente en su computadora.

Hasta ahora, tiene el n.° 2 y el n.° 3, pero el n.° 1 es importante porque es la fuente principal. Mantener estas tres cosas en línea entre sí ayudará a que el historial de confirmaciones se mantenga limpio. Esto ayuda a los mantenedores de proyectos, ya que elimina (o al menos minimiza) los conflictos de fusión cuando envía solicitudes de extracción (PR) y lo ayuda a obtener el código más reciente y mantener actualizados sus repositorios locales y de origen.

Establecer un control remoto ascendente

Para rastrear el control remoto aguas arriba, en su terminal ingrese lo siguiente:

 git remote add upstream https://github.com/liferay-design/liferay.design

Ahora, verifique qué controles remotos tiene disponibles: ingrese git remote -v en su terminal, debería ver algo como:

 origin https://github.com/yourGitHubUsername/liferay.design (fetch) origin https://github.com/yourGitHubUsername/liferay.design (push) upstream https://github.com/liferay-design/liferay.design (fetch) upstream https://github.com/liferay-design/liferay.design (push)

Esto le permitirá obtener rápidamente la última versión de lo que está aguas arriba: si no ha trabajado en un repositorio durante mucho tiempo y no tiene ningún cambio local que desee conservar, este es un comando útil que uso. :

 git pull upstream master && git reset --hard upstream/master

La Ayuda de GitHub es un gran recurso para esta y muchas otras preguntas que pueda tener.

HTML y CSS: comenzando con la semántica

En la web, hay un suministro interminable de recursos para aprender HTML y CSS. Para los propósitos de este artículo, estoy compartiendo lo que recomendaría basado en los errores que cometí cómo aprendí por primera vez a escribir HTML y CSS.

¿Qué son HTML y CSS?

Antes de continuar, definamos HTML y CSS.

HTML significa lenguaje de marcado de hipertexto.

Hipertexto:

“El hipertexto es texto que se muestra en la pantalla de una computadora u otros dispositivos electrónicos con referencias (hipervínculos) a otro texto al que el lector puede acceder inmediatamente”.

— “Hipertexto” en Wikipedia

Lenguaje de marcado:

“…un sistema para anotar un documento de una manera que sea sintácticamente distinguible del texto.”

— “Lenguaje de marcado” en Wikipedia

En caso de que tampoco sepa qué significan muchas de esas palabras, en pocas palabras, HTML es la combinación de referencias (enlaces) entre documentos en la web y etiquetas que usa para dar estructura a esos documentos.

Para una introducción completa a HTML y CSS, recomiendo los primeros pasos de Introducción a HTML y CSS, ambos en los documentos web de Mozilla Developer Network (MDN) . Eso, junto con los excelentes artículos que ofrecen sitios web como CSS Tricks, 24 Ways y muchos otros, contienen básicamente todo lo que necesitará consultar con respecto a HTML/CSS.

Hay dos partes principales de un documento HTML : el <head> y el <body> . - El <head> contiene elementos que el navegador no muestra: metadatos y enlaces a hojas de estilo y scripts importados. - El <body> contiene el contenido real que representará el navegador. Para representar el contenido, el navegador lee el HTML, proporciona una capa base de estilos según los tipos de etiquetas utilizadas, agrega capas adicionales de estilos proporcionadas por el propio sitio web (los estilos se incluyen en / se hace referencia desde el <head> , o están en línea), y eso es lo que vemos al final. (Nota: a menudo también existe la capa adicional de JavaScript, pero está fuera del alcance de este artículo).

CSS son las siglas de Cascading Style Sheets (hojas de estilo en cascada): se utiliza para extender el HTML al facilitar que los documentos tengan una apariencia personalizada. Una hoja de estilo es un documento que le dice al HTML cómo deben verse los elementos (y cómo deben colocarse) al establecer reglas basadas en etiquetas, clases, ID y otros selectores. Cascada se refiere al método para determinar qué reglas en una hoja tienen prioridad en el caso inevitable de un conflicto de reglas.

"'En cascada' significa que los estilos pueden caer (o en cascada) de una hoja de estilo a otra, lo que permite utilizar varias hojas de estilo en un documento HTML".

— Cascada — Max Diseño

CSS a menudo tiene una mala reputación: en sitios con muchas hojas de estilo, puede volverse difícil de manejar rápidamente, especialmente si no se usan métodos consistentes y documentados (más sobre esto más adelante), pero si lo usa de manera organizada y siguiendo todos las mejores prácticas, CSS puede ser tu mejor amigo. Especialmente con las capacidades de diseño que ahora están disponibles en la mayoría de los navegadores modernos, CSS no es tan necesario para piratear y luchar como lo era antes.

Rachel Andrew escribió una excelente guía, Cómo aprender CSS, y una de las mejores cosas que debe saber antes de comenzar es que:

"No necesita comprometerse a memorizar cada propiedad y valor de CSS".

— Raquel Andrés

En cambio, es mucho más importante aprender los fundamentos : selectores, herencia, el modelo de caja y, lo que es más importante, cómo depurar su código CSS (pista: necesitará las herramientas de desarrollo del navegador).

No se preocupe por memorizar la sintaxis de la propiedad de background , y no se preocupe si olvida cómo alinear exactamente las cosas en Flexbox (¡la Guía de trucos CSS para Flexbox es posiblemente una de mis 10 páginas más visitadas! ); Google y Stack Overflow son tus amigos cuando se trata de propiedades y valores de CSS.

Algunos editores de código incluso tienen autocompletado incorporado, por lo que ni siquiera necesita buscar en la web para poder averiguar todas las propiedades posibles de un borde, por ejemplo.

Una de mis características nuevas favoritas en Firefox 70 es el indicador de reglas CSS inactivas. Le ahorrará horas tratando de averiguar por qué no se aplica un estilo.

Semántica

Comencemos con el código semántico . La semántica se refiere a los significados de las palabras, el código semántico se refiere a la idea de que el marcado tiene un significado en un idioma determinado.

Hay muchas razones por las que la semántica es importante. Si pudiera resumir esto, diría que si aprendes y usas el código semántico, te hará la vida mucho más fácil porque obtendrás muchas cosas gratis, ¿y a quién no le gustan las cosas gratis?

Para obtener una introducción más completa al código semántico, consulte la breve publicación de blog de Paul Boag sobre el tema.

La semántica te da muchos beneficios:

1. Estilos predeterminados
   Por ejemplo, usar una etiqueta de título <h1> para el título de su documento hará que se destaque del resto del contenido del documento, como lo haría un título.
2. Contenido accesible
   Se podrá acceder a su código de forma predeterminada, lo que significa que funcionará con lectores de pantalla y será más fácil navegar con un teclado.
3. Beneficios de SEO
   El marcado semántico es más fácil de leer para una máquina, lo que lo hace más accesible para los motores de búsqueda.
4. Beneficios de rendimiento
   El HTML limpio es la base de un sitio de alto rendimiento. Y el HTML limpio también probablemente conducirá a un CSS más limpio, lo que significa menos código en general, lo que hará que su sitio o aplicación sea más rápido.

Nota: Para una mirada más profunda a la semántica y HTML, Heydon Pickering escribió "Semántica estructural: la importancia de los elementos de sección de HTML5", que recomiendo leer.

Principios y paradigmas de ingeniería: conceptos básicos

Abstracción

Hay toneladas de aplicaciones, tangentes y niveles que podríamos explorar sobre el concepto de abstracción, demasiados para este artículo que pretende brindarle una breve introducción a los conceptos para que los conozca a medida que continúa aprendiendo.

La abstracción es un paradigma de ingeniería fundamental con una amplia variedad de aplicaciones; para los fines de este artículo, la abstracción es separar la forma de la función. Aplicaremos esto en tres áreas: tokens, componentes y el principio Don't Repeat Yourself.

fichas

Si ha utilizado una herramienta de diseño moderna durante algún tiempo, probablemente se le haya ocurrido la idea de un token . Incluso Photoshop e Illustrator ahora tienen esta idea de estilos compartidos en una biblioteca centralizada: en lugar de codificar valores en un diseño, usa un token. Si está familiarizado con el concepto de variables CSS o SASS, ya está familiarizado con los tokens.

Una capa de abstracción con tokens es asignar un nombre a un color, por ejemplo, $blue-00 se puede asignar a un valor hexadecimal (o un valor HSL, o lo que quieras), digamos #0B5FFF . Ahora, en lugar de usar el valor hexadecimal en sus hojas de estilo, usa el valor del token; de esa manera, si decide que blue-00 es en realidad #0B36CE , solo tiene que cambiarlo en un solo lugar. Este es un buen concepto.

Si toma este mismo paradigma de abstracción y va un paso más allá, puede crear tokens y asignar una variable a un valor funcional. Esto es particularmente útil si tiene un sistema robusto y desea tener diferentes temas dentro del sistema. Un ejemplo funcional de esto sería asignar una variable como $primary-color y asignarla a $blue-00 , de modo que ahora puede crear marcas y, en lugar de hacer referencia al azul, está haciendo referencia a una variable funcional. Si alguna vez desea usar el mismo marcado, pero con un estilo diferente (tema), entonces solo necesita asignar $primary-color a un nuevo color, ¡y su marcado no necesita cambiar en absoluto! ¡Magia!

Componentes

En los últimos 3 o 4 años, la idea de los componentes y la creación de componentes se ha vuelto más relevante y accesible para los diseñadores. El concepto de símbolos (iniciado por Macromedia/Adobe Fireworks, luego ampliado por Sketch y luego llevado al siguiente nivel por Figma y Framer), ahora está más disponible en la mayoría de las herramientas de diseño (Adobe XD, InVision Studio, Webflow y muchas otras). otros). La creación de componentes, incluso más que los tokens, puede separar la forma de algo de su función, lo que ayuda a mejorar tanto la forma como la función.

Uno de los primeros ejemplos más notables es el componente de objetos de medios de Nicole Sullivan. A primera vista, es posible que no se dé cuenta de que una página completa se compone esencialmente de un solo componente, representado de diferentes maneras. De esta manera, podemos reutilizar el mismo marcado (formulario), modificándolo ligeramente pasando opciones o parámetros y estilos, y hacer que proporcione una variedad de valores (funciones).

No te repitas

DRY (Don't Repeat Yourself) es uno de mis principios favoritos: crear cosas que se pueden reutilizar una y otra vez es una de las pequeñas victorias que puedes tener al programar.

Si bien a menudo no puede (y posiblemente no debería) esforzarse por aplicar el principio SECO el 100 % del tiempo, siempre, es al menos beneficioso ser consciente de esto para que, mientras trabaja, pueda considerar cómo puede hacer que cualquier cosa en la que esté trabajando sea más reutilizable.

Una nota sobre la regla de tres: un corolario del principio SECO es la regla de tres: esencialmente, una vez que reutiliza (copiar/pegar) algo tres veces, debe reescribirlo en un componente reutilizable. Al igual que el Código pirata, es más una guía que una regla estricta y rápida, y puede variar de un componente a otro y de un proyecto a otro.

CSS y Metodologías de Estilo: Atomic vs. BEM

Hay muchas formas diferentes de organizar y escribir código CSS: Atomic y BEM son solo dos de las muchas que probablemente encontrará. No tienes que “elegir” uno solo, ni tienes que seguirlos exactamente. La mayoría de los equipos con los que he trabajado suelen tener su propia combinación única, según el proyecto o la tecnología. Es útil familiarizarse con ellos para que, con el tiempo, pueda aprender qué enfoque tomar según la situación.

Todos estos enfoques van más allá de "simplemente" CSS y estilo, y a menudo pueden influir en las herramientas que utiliza, la forma en que organiza sus archivos y, potencialmente, el marcado.

CSS atómico

No debe confundirse con el diseño web atómico: el CSS atómico (quizás denominado más acertadamente como "funcional") es una metodología que esencialmente favorece el uso de clases pequeñas y de un solo propósito para definir funciones visuales. Algunas bibliotecas notables:

1. CSS atómico de Steve Carlson;
2. Taquiones de Adam Morse;
3. Tailwind CSS por Adam Wathan.

Lo que me gusta de este método es que te permite aplicar estilos y temas a las cosas rápidamente; uno de los mayores inconvenientes es que el marcado puede abarrotarse bastante rápido.

Consulte el artículo de John Polacek sobre trucos CSS para obtener una introducción completa a Atomic CSS.

BEM

La filosofía BEM es un gran precursor de muchos de los marcos de JavaScript modernos como Angular, React y Vue.

"BEM (Bloque, Elemento, Modificador) es un enfoque basado en componentes para el desarrollo web".

— BEM: inicio rápido

Básicamente, todo lo que se puede reutilizar es un bloque. Los bloques se componen de elementos, algo que no se puede usar fuera de un bloque y, potencialmente, de otros bloques. Los modificadores son cosas que describen el estado de algo o la forma en que se ve o se comporta.

Personalmente, me gusta la teoría y la filosofía de BEM. Lo que no me gusta es la forma en que se nombran las cosas. Demasiados guiones bajos, guiones, y puede parecer innecesariamente repetitivo ( .menu , .menu__item , etc.).

Lectura recomendada : BEM para principiantes escrito por Inna Belaya

Gracias, Siguiente (.js)

Una vez que haya dominado suficientemente estos temas, no se preocupe, todavía hay mucho que aprender. Algunas sugerencias:

1. Programación funcional y orientada a objetos
   Lo mencionamos ligeramente, pero hay mucho más que aprender más allá de CSS.
2. Lenguajes y frameworks de alto nivel
   Typescript, Ruby, React, Vue son las siguientes cosas que abordará una vez que tenga un conocimiento sólido de HTML y CSS.
3. Consulta de idiomas y uso de datos
   Aprender sobre GraphQL, MySQL, REST API llevará su capacidad de codificación al siguiente nivel.

Conclusión: ¡Diseñadores que programan! = Ingenieros de software

Con suerte, este artículo te ha mostrado que aprender a codificar no es tan difícil como pensabas anteriormente. Puede llevar mucho tiempo, pero la cantidad de recursos disponibles en Internet es asombrosa y no está disminuyendo, ¡sino todo lo contrario!

Un punto importante que quiero enfatizar es que "codificar" no es lo mismo que "ingeniería de software": poder bifurcar un repositorio y copiar/pegar código desde Stack Overflow puede ayudarlo mucho, y aunque la mayoría, si no todos, los ingenieros de software que conozco han hecho eso: debe usar sus nuevas habilidades con sabiduría y humildad. Para todo lo que ahora puede acceder con cierta destreza de ingeniería, hay mucho más que no sabe. Si bien puede pensar que una característica o estilo es fácil de lograr porque: "¡Oye, lo tengo funcionando en devtools!" o “Lo hice funcionar en Codepen”. — hay muchos procesos de ingeniería, dependencias y métodos que probablemente no sepa que no conoce.

Todo eso es para decir, no olvides que todavía somos diseñadores. Nuestra función principal es agregar valor comercial a través de la comprensión de los problemas de los clientes o usuarios y sintetizarlos con nuestro conocimiento de patrones, métodos y procesos de diseño. Sí, ser un "diseñador que escribe código" puede ser muy útil y ampliará su capacidad para agregar este valor, pero aún debemos dejar que los ingenieros tomen las decisiones de ingeniería.

¿Algo anda mal?

Hay una buena posibilidad de que algo en esta publicación sea oscuro, obtuso y/u obsoleto y me encantaría tener la oportunidad de mejorarlo. Deja un comentario a continuación, envíame un mensaje privado o @mencióname en Twitter para que pueda mejorar.

Otras lecturas

1. Bootcamps de codificación frente a títulos en informática: lo que quieren los empleadores y otras perspectivas (Kyle Thayer)
2. Cómo empezar a usar Sketch y Framer X (por Martina Perez, Smashing Magazine )
3. Introducción a los comandos de Linux (por Paul Tero, Smashing Magazine )
4. Conviértase en un usuario avanzado de la línea de comandos con Oh My ZSH y Z (por Wes Bos, Smashing Magazine )
5. Una lista de los comandos comunes cmd.exe y Unix que puede usar en PowerShell ( Microsoft Docs )
6. expresiones-regulares.info (por Jan Goyvaerts)
7. regexone.com (aprende expresiones regulares con ejercicios interactivos simples)
8. Redimensionamiento por lotes mediante la línea de comandos e ImageMagick (por Vlad Gerasimov, Smashing Magazine )
9. Accesos directos y consejos para mejorar su productividad con Sublime Text (por Jai Pandya, Smashing Magazine )
10. ¿El código de Visual Studio puede hacer eso? (por Burke Holanda, Revista Smashing )
11. Por qué el historial de versiones no es un control de versiones (por Josh Brewer)
12. Control de versiones modernas con Git (por Tobias Gunther, Smashing Magazine )
13. “Hello World” (una guía paso a paso de GitHub)
14. Cómo instalar Node.js y NPM en una Mac (por Dave McFarland)
15. Cómo instalar Node.js y NPM en Windows (por Dejan Tucakov)
16. Por qué creo compromisos atómicos en Git (por Clarice Bouwer)
17. Cómo escribir un mensaje de Git Commit (por Chris Breams)
18. Código semántico: ¿Qué? ¿Por qué? ¿Cómo? (por Paul Boag)
19. Semántica estructural: la importancia de los elementos de sección de HTML5 (por Heydon Pickering, Smashing Magazine )
20. Diseño para el rendimiento: Capítulo 4. Optimización de marcas y estilos (por Lara C. Hogan, O'Reilly Media )
21. El objeto multimedia guarda cientos de líneas de código (por Nicole Sullivan)
22. Definamos exactamente qué es Atomic CSS (por John Polacek, CSS Tricks )
23. BEM para principiantes: por qué necesita BEM (por Inna Belaya, Smashing Magazine )
24. Javascript para gatos: una introducción para nuevos programadores
25. Roadmap.sh: desarrollador front-end
26. Programación funcional vs OOPS: explica como si tuviera cinco
27. Por qué, cómo y cuándo usar HTML semántico y ARIA (por Adam Silver, CSS Tricks )
28. HTML Semantics (un libro electrónico de Smashing Magazine )
29. Los fundamentos: HTML + CSS (en Syntax.fm )
30. Cascada y herencia ( westciv.com )
31. Trucos CSS (por Chris Coyier)
32. Primeros pasos con el diseño CSS (por Rachel Andrew, Smashing Magazine )
33. Introducción a HTML (documentos web de MDN)
34. Primeros pasos de CSS (documentos web de MDN)
35. Primeros pasos de JavaScript (documentos web de MDN)
36. 24 maneras (por Drew McLellan)