Aprende como utilizar el plugin Emmet y como escribir código HTML y CSS mas rápido y sencillo con este grandioso plugin.

Share on Pinterest
Comparte con tus amigos










Enviar

Cuando ya se tiene algo de experiencia dentro del diseño web las cosas comienzan a parecer tediosas, el repetir una y otra vez lo mismo para llegar a una simple estructura html puede ser aburrido y desesperante en ocasiones, es por eso que como buenos profesionales y amantes del buen front-end debemos reducir el tiempo que tardamos durante el desarrollo de un proyecto, esto incluye reducir el tiempo que usamos a la hora de escribir código.

Así que por eso hoy te comparto una herramienta que te permitirá hacer cosas geniales como escribir código HTML y CSS mas rápido de lo que lo has hecho antes. No se trata de un secreto ni mucho menos, es de hecho una herramienta súper famosa y utilizada por todo el mundo, pero si estas leyendo este post seguramente no la conozcas.

Se trata de Emmet, anteriormente conocido como Zed Coding, no es nada mas que un simple pero fantástico plugin para nuestros editores de código que nos permitirá escribir código html y css mediante abreviaturas y con solo presionar una tecla se convertirán en nuestro código, listo para editar.

Si no lo entiendes aun, aquí que te pongo este ejemplo de nuestra estructura básica de HTML.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

Para poder agregar la anterior estructura gracias a emmet lo único que tendríamos que hacer es escribir html:5 presionar la tecla TAB y automáticamente tendrás la estructura básica de un documento html5 tal como te la mostré en el fragmento de código anterior..

Y prácticamente es la base de todo lo que se puede hacer, puedes hacer muchas estructuras desde lo mas básico hasta lo mas avanzado, puedes desde agregar un link hasta agregar un div con varios elementos dentro, todo con un simple atajo de 1 sola linea.

Emmet funciona tanto para HTML como para CSS y lo mejor de todo es que es un plugin disponible para la mayoría de los editores de código por lo cual es 100% recomendado que lo tengas si eres un diseñador web.

Videotutorial como escribir código HTML y CSS mas rápido

Aquí mismo te dejo los links a su pagina en donde en puedes descargar el plugin y ver la documentación para obtener todas las abreviaturas posibles.

Sitio web de Emmet: http://emmet.io/

Documentación de Emmet: http://docs.emmet.io/

Link de Cheat Sheet: http://docs.emmet.io/cheat-sheet/

Tutorial como instalar Emmet en Sublime Text: https://www.falconmasters.com/tutoriales/como-instalar-emmet-zen-coding-sublime-text/

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

46 respuestas a “Como escribir código HTML y CSS mas rápido con Emmet (Zen Coding)”

  1. Snoopy diaz dice:

    Excelente. :D

  2. Yvan Salcedo dice:

    Exelente !! :) me volves loco con tus tutoriales :D

  3. David García dice:

    Hey amigo, pero que pasa si estoy trabajando con php y necesito un index.php? también me sirve este plugin?

  4. Dymar Zambrano dice:

    hola! esta genial pero cuando uso el tabulador no me crea el código y me dice que está instalado, cómo puedo solucionarlo?

    • Albertus B. dice:

      Quizá el problema es que estás probando el plugin en un documento en blanco y aun no lo has guardado. Tienes que guardar primero el documento como .html para que emmet identifique en que lenguaje esta trabajando.

      • Albertus B. dice:

        Por cierto, muchas gracias a Falcon Master por este tutorial y todos los demás! Estoy empezando y me están siendo de mucha ayuda. Gracias!

  5. Esteban Masias dice:

    para Sublime Text 3 ==> html:5 => tabulador

  6. Nahuel Pefu dice:

    A mi como atajo de teclado me asigno Ctrl+E. Hay alguna manera de cambiarlo a TAB? Gracias man! Muy bueno el tutorial.

  7. Alberto Mendoza dice:

    Como haces para escribir clases en dos contenedores diferentes al mismo tiempo?

  8. Mirianna dice:

    Buenas amigo que teclas presionas para agregar un comentario html. O seleccionas una línea y toda se coloque en comentario html. O css?

    • Eduardo Luis Crespo dice:

      Ctrl+ç (esa tecla que está a la izquierda de enter, en mi caso, tanto para comentarios html como css, presionas una para comentar y otra vez para regresar) en teclado español (sublime text 3), para comentar desde cero dice la documentación de sublime text que es Ctrl+/ pero en mi caso con el pluging de emmet es colocando la letra c minúscula y luego presionando -tab-.

      • blablabli dice:

        una duda, si para el teclado español algunos atajos sin diferentes ¿donde puedo consultar los atajos de emmet para teclado español? para tenerlos todos, porque la verdad es que los que usan la tecla shift funcionan, pero los demas no todos funcionan igual, y yo tengo windows casi recien instalado, no tengo ninguna modificacion ‘rara’ en el sistema

  9. Guadalupe dice:

    Hola! Muy buen tutorial, muchas gracias!!! Alguien sabe si funciona bien con Brackets? Saludos! :)

  10. Freddy De Abreu dice:

    Excelente… toooodoooo videos tutos tooodoooo

  11. Paramjeed Yush dice:

    Hola amigos, será egoísta por mi parte no comparto mis testimonios con ustedes, que trabajó para mí, así que creo firmemente que va a trabajar para usted, por favor no ignorar o pasar sin leer esto y hacer clic en el sitio Web más abajo. Su va a ayudar simplemente haga clic en el siguiente enlace y visita la página web. Sé que nunca se arrepentirá de ver el sitio web. Sitio web: http://churchofmagicindia.simplesite.com/

  12. Paramjeed Yush dice:

    MI NOMBRE ES McCarthy De LAS VEGAS
    POR FAVOR ENCONTRAR TIEMPO PARA LEER ESTO ATENTAMENTE.
    Como todos sabemos INDIA ES EL NÚMERO UNO EN EL MUNDO EN TÉRMINOS DE
    MAGIC Así que no ignore
    ESTA….
    Tenga cuidado aquí, nadie puede ayudarte de África o incluso sugerir COMO USTED
    PUEDE CONSEGUIR SU EX O AMOR DE NUEVO, TODOS LOS TESTIMONIOS DE MÁS DE lanzador de hechizos
    AFRICA AQUÍ debe ser ignorado, porque todos ellos son SCAM QUIERO DECIR verdadera estafa
    Y DESDE ÁFRICA QUE ERA UNA VÍCTIMA y yo nos arrancó de miles de
    DÓLARES porque estaba tan ansioso por MI ESPOSA TERA DE NUEVO TRAS ELLA ME DEJÓ
    PARA MÁS 2YEARS CON MI HIJO 3YEARS VIEJO JERRY, HE SOLICITADO 7 DIFERENTE
    HECHIZO CASTER AQUÍ DE AFRICA que he encontrado en este blog y todo fue en vano TODOS ELLOS PIDEN
    LO MISMO ENVIAR SU NOMBRE SU EX DIRECCIÓN NOMBRE Y NÚMERO DE TELÉFONO DE IMAGEN ETC
    QUE HICE UNA Y OTRA VEZ Y todos ellos eran de África, ESTABA
    Tan confundida Y yo siempre estaba enfermo porque de este problema y yo estaba tan
    Desesperada por tener TERA de nuevo a mí, yo la amo tanto y podría morir por ella.
    Hasta que un amigo me habló de la IGLESIA INDIA DE LA MAGIA DEL EMBRUJO MAYOR
    TEMPLO, (church_ofmagic@outlook.com) TEMPLO DE BLANCO Y NEGRO (BIEN Y
    MAL) en la India, y me decidí a enviar un correo electrónico al templo. LA SECRETARIA
    Me dijo que TODO MI PROBLEMA SON MÁS DESDE HE DECIDIDO EN CONTACTO CON LA INDIA
    AYUDA, SE ME DIJO QUE EXPLICAR QUÉ PASÓ ENTRE YO Y MI ESPOSA EX
    TERA y lo hice, le dije a él todo lo que SUCEDIÓ DESDE EL PRINCIPIO. Y EL
    Me dijo: MI HIJO LO QUE SOLO me explicó AHORA ES UN PROBLEMA DE POCO
    MANEJAR COMPARAR CON PROBLEMAS GRAVES LOS DOCTORES DE LA IGLESIA INDIA DE MAGIC ha manejado, ya que hay más de 3000 médicos, profesores Y hechiceros TRABAJAN EN LA IGLESIA DE MAGIA, estaba tan
    Conmocionado y le dije a mi YO QUÉ PROBLEMA podría ser más grave que esto.
    ÉL ME DIJO QUE necesitaba hacer LO ANTES POSIBLE, estaba teniendo lugar a dudas debido a la experiencia del pasado, sino que
    Decidimos probar DESDE LA IGLESIA DE LA MAGIA ESTÁ SITUADO EN LA INDIA (ASIA) Y NO ÁFRICA
    (NIGERIA Y SUDÁFRICA) podrían ser REAL Y DIFERENTE. Así que le di ELLOS
    50% DE MI CONFIANZA. ESTA FUE COMO UNA MAGIA Y sueño hecho realidad para mí, después de dos
    DÍAS CUANDO EL HECHIZO HA fundido, TERA sonó mi teléfono a las 9: PM I
    No pude dormir esa noche porque me encanta TERA Y quiero que vuelva. POR
    7: am de la mañana siguiente, ella me dio OTRA LLAMADA PERDIDA decidí no
    CALL BACK COMO ESTABA TODAVÍA EN CHOQUE, alrededor de las 10: SOY EL QUE MAÑANA Llamó
    Y yo elegimos ELLA DIJO ¿Podemos ver hoy después del trabajo me dijo que sí SO Terminó
    La llamada inmediatamente me bajé TRABAJO Llamó MÍ Y ME DIJO se reunirán
    Ella, yo todavía estaba en DESCARGA: He aquí cuando llegué allí VI TERA llorando con
    LÁGRIMAS EN TODO SUS OJOS, Y ella me dijo mi esposo, lo siento
    INMEDIATAMENTE abracé y la besé QUE HE PERDIDO TODO ESTE AÑOS.
    TODO GRACIAS A LA IGLESIA INDIA DE MAGIA. SI USTED ES UN HOMBRE O UNA LECTURA DE LA MUJER
    ESTO Y usted está pasando por problemas similares como la mía O PROBLEMA totalmente diferente, no dejéis de
    CONTACTAR CON ESTE GRAN TEMPLO. ÉL ES REALMENTE EN EFECTO A lanzador de hechizos VERDADERO.
    ALGUNOS SERVICIOS PRESTADOS EN LA IGLESIA INDIA DE MAGIA
    (1) Si usted quiere que su ex atrás.
    (2) Para curar el VIH / AID o enfermedad relacionada
    (3) ¿Quieres ser promovido en su oficina.
    (4) ¿Quieres mujeres / hombres para correr tras de ti.
    (5) Si usted quiere un hijo.
    (6) ¿Es usted un contratista y quieres ganar un contrato
    (7) ¿Quieres atar su marido / esposa sea
    tuya para siempre.
    (8) Si necesita ayuda espiritualmente.
    (9) ¿Cómo te han estafado y que desea recuperar perdió dinero.
    (10) Parada de Divorcio
    (11) Invocación de Ritual Dinero
    (12) Para verificar si su amante en línea es real
    (13) Para verificar si su préstamo en línea es real
    (14) Para que sea muy brillante
    (15) Si usted está buscando un buen trabajo
    (16) Si usted es viejo y quiere parecer joven
    (17) Si quieres ser libre de amenazas de hechizo atender en África
    Y muchos más..
    Email … church_ofmagic@outlook.com
    Sitio web: http://churchofmagicindia.simplesite.com/

  13. Danny Mathews D Griss dice:

    Seguí los pasos de la instlalación de Emmet pero cuando escribo html:5 y presiono la tecla TAB no pasa nada!!!

  14. Benjamin Tracy dice:

    Curación del VIH-SIDA, mi nombre es Benjamin Tracy me dirijo sobre este

    proyecto de resolución. Aluebor que alguna vez podría conseguir mi VIH-SIDA

    curado con su hechizo de curación, he intentado casi todo, pero yo me

    cansaría encontrar ninguna solución en mi enfermedad, a pesar de todo esto

    que me pasa, siempre me dedico mucho a comprar unos medicamentos

    contra el VIH del hospital y tomando algunos varios medicamentos, pero no

    aliviar, hasta que un día me estaba navegando en el Internet cuando vengo al

    otro lado de un gran puesto de! Michelle! que verdaderamente dice que le ha

    sido diagnosticar con el VIH y se curó aquella misma semana a través de la

    ayuda de estos grandes poderosa médico hechizo de curación, en algún

    momento realmente me pregunto por qué la gente lo llamaba DR Aluebor yo

    nunca sabía que todo era debido a la gran y perfecto trabajo que él ha estado

    haciendo eso está causando todo esto. así que rápidamente en contacto con

    él, y me pregunto algunas pocas preguntas y me dijo algo que nunca olvidaré

    que cualquier persona que contactó con él siempre es conseguir su curación en

    sólo 6 horas después de hacer todo lo que te pida hacer, así que estaba

    sorprendido todo el tiempo que he oído que a partir de él, así que hice todas

    las cosas sólo para ver que en el mismo día que dijo que yo quedaré sana, toda

    la fuerza que me ha dejado antes de lanzas de nuevo y me hace muy fuerte y

    saludable, este enfermedad casi mata a mi vida todo por mí, así que me fui al

    hospital para dar la prueba final de la enfermedad y el médico dijo que soy VIH

    negativo, estoy muy sorprendido y feliz por la curación DR Aluebor dio a mí

    desde la parte antigua de áfrica, se le puede enviar por correo electrónico

    ahora para su propia curación también, y prometo que trabajar rápido

    inmediatamente como mi propia situación was.you puede enviar por correo

    electrónico aquí en:
    Alueborhomeofsolution@gmail.com
    Alueborhomeofsolution@gmail.com

  15. Rolando dice:

    ¿Qué Tema estas usando en Brackets?

  16. ana belen dice:

    ¡Genial tutorial!
    ¿Cómo haces cuando tienes creado código y lo metes dentro de otra etiqueta?
    En otros tutoriales he visto que lo seleccionas pero no se qué comando utilizas que se coloca dentro de un DIV directamente.
    Muchas gracias.

  17. Norman Jaimes M dice:

    Tengo un problema, hay muy pocas abreviaciones que me funcionan, y además cuando intento hacer como por ej esto: nav>ul>li. Solo me crea la ultima abreviación que hice, como en este caso el «li». Me podrían ayudar, por favor?

  18. Samuel Campos dice:

    Hola necesito ayuda soy nuevo programando en ATOM como hago para que me aparezca la ventana emergente de seleccion de imagen con el atributo src=»»

    Ayuda porfavor

  19. Daisy George dice:

    Hola mi nombre es Margarita george que te quiero dar un testimonio sobre mi virus de VIH que fue curado por un lanzador de gran encanto. Desde el pasado 6 años que tengo siendo un paciente de VIH. Nunca pensé que había alguien que me pudiera ayudar hasta que me encuentro con un amigo que me dijo que era un lanzador de gran encanto que puede curar mi VIRUS. Le pregunté si tenía su correo electrónico, ella me dio su correo electrónico, yo le que hablaba me enviará por correo electrónico y él realiza los rituales necesarios y me dijo que después de dos semanas debo ir para una prueba. Que, cuando el doctor me dijo que soy ahora un VIH negativo no podía creerlo fui a ver otro doctor el resultado seguía siendo el mismo, estaba tan contento por lo que le enviará por correo electrónico y le dio las gracias. Por favor si usted tiene un problema similar por favor visitarlo / en contacto con él en drahubaspelltemple@gmail.com es una persona muy agradable y cura diversas enfermedades y virus también puede ayudarle recuperar su verdadero amor. en contacto con él hoy en drahubaspelltemple@gmail.com o +2349058832053 y tener en cuenta todos sus problemas resueltos.

  20. Holber Rivera Quiroz dice:

    Hola Carlos, instale el control package pero cuando digito ctrl+shif+p y escribo emmet no me instala. Agradezco si me puedes colaborar

  21. Jordan dice:

    muchas gracias por este aporte.

  22. jazhael dice:

    como saco con emmet la sintaxis de script?

  23. Ronald dice:

    Buenas carlos soy nuevo en programacion e instale ATOM como lo sugeriste en unos de tus video con el plugin emmet, pero me funciona con ctrl+E abra una manera de cofigurar para que funcione con (tab). mi sistema operativo es windows 10.

  24. Pawan Ethan dice:

    Dios me los bendiga con un buen doctor Alabi para curar mi VIH con su hechizo de curación, no tengo mucho que decir pero con toda mi vida voy a por siempre estar agradecidos a él y Dios Todopoderoso por el uso de Dr. Alabi para llegar a mí cuando pensaba que todo había terminado, hoy estoy feliz con mis dos hijos y mi marido después de que el médico ha confirmado mi estado de VIH negativo, i nunca en mi vida cree que el VIH podía ser curada por el Dr. Alabi hechizo de curación. así que quiero utilizar este medio para llegar a otras personas que tienen esta enfermedad al testificar el poder del Dr. Alabi que la esperanza no se pierde, sin embargo, tratar de comunicarse con él por cualquier medio de cualquier tipo de enfermedad con su correo electrónico ( dralabispelltemple@gmail.com ) o ( dralabispelltemple@ hotmail. com ) o ( dralabispelltemple@yahoo. com ) o whatapp él en 2348146226679 o llame a su línea móvil 2348105074556..

  25. gouproductions dice:

    les recomiendo e-mail marketing para promocionar productos y servicios lo pueden bajar en emailmasivo.com

  26. Jhonny Cardenas dice:

    Hola carlos, excelente pagina, quería preguntarte como haces para encerrar una etiqueta en otra solo seleccionandola es algún tipo de plugin? muchas gracias

  27. David Moradel dice:

    Hola Ronald lo que tienes que hacer es esto:

    Abre el menú Atom y abre Keymap.
    En el archivo que se te abre pega al final esto: ‘atom-text-editor:not([mini])’: ‘tab’: ‘emmet:expand-abbreviation-with-tab’.
    Guarda el archivo.
    Reinicia Atom.
    Voalà! La tecla TAB vuelve a funcionar con Emmet.

  28. Jose Flores dice:

    Hola Compañeros buenas tardes, soy nuevo en esto… quería saber si es posible obtener el código html de un video tutorial

  29. Foryou Web dice:

    Hola falcón desde que encontré tu web no eh parado de realizar cada tutorial que hay aqui, sos excelente en todo tus explicaciones. Ahora estoy haciendo el formulario elegantes material desing. Saludos desde Argentina

    La empresa 4youweb.com.ar.

  30. Lipe Boutique dice:

    Nuevamente muchas gracias Carlos, siempre veia en mis clases de programación que mi profe escribia abreviado y yo pensaba wooow que groosoo!! pero no me animé jamás a preguntarle como era jajaja, muchisimas gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso