Featured

¡Escribe código estilo FLASH!

By Ana Ramirez - Ilana Milkes | 6 de febrero de 2018
  • #World Tech Makers
  • #cursos de programación
  • #coding bootcamps
  • #Código
  • #consejos para programar
  • #FLASH

Como desarrolladores a veces nos ha pasado que nos piden realizar una maquetación de un sitio o aplicación web menos del tiempo que nos cuesta realizarlo, y necesitamos una herramienta que nos permite agilizar en la escritura del código. Hoy te voy a presentar a Emmet, una genial herramienta que te ayuda a mejorar tu flujo de trabajo al escribir código HTML, CSS. Haber veamos ¿Qué es Emmet?

Emmet es un plugin que te permite mejorar tu flujo de trabajo escribiendo código HTML,CSS, una forma rápida por medio de abreviaturas, y lo estupendo de este plugin que funciona en la mayoría de los IDES o Editores que se usan actualmente y que a continuación te lo presento para no te desanimes y uses esta excelente herramienta.

Si eres de las personas que te gusta usar editores online, ¿y quieres usar Emmet?, no te desanimes te comento que Emmet funciona en estos editores.

Pues manos al código, comencemos con algo básico, generar la estructura de HTML5, también escribimos la siguiente abreviatura

Con presiona la tecla TAB al final de la abreviatura, nos generaría la estructura básica de HTML5,

Imagina que dentro una etiqueta <article>, debes tener la etiqueta <h2> y <p>, para solucionar este caso, realizaremos lo siguiente.

Ahora el símbolo >, quiere decir dentro de esta etiqueta y el símbolo + es una separación, entonces el siguiente resultado

Como todo proyecto web siempre encontramos un menú de navegación, a continuación te enseño de realizar de una forma sencilla y rápida, dentro una etiqueta <nav>, vamos a colocar 6 etiquetas <a>

Como veras hemos obtenido un menú con 6 elementos, escribiendo un poco de código

Ahora veremos algunas abreviaturas de Emmet para CSS

Resultado de las abreviaturas de Emmet para CSS

Recuerda que luego escribir tu abreviatura, debes presionar la tecla TAB, para que te salga el resultado. Y si deseas saber más sobre Emmet, te invito a que ingreses a la página oficial de Emmet, también revisar el cheat-sheet, para que aprendas más abreviaturas de esta genial herramienta!

Default author

Ana Ramirez - Ilana Milkes

VP