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.

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: http://www.falconmasters.com/tutoriales/como-instalar-emmet-zen-coding-sublime-text/

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Snoopy diaz

    Excelente. :D

  • Yvan Salcedo

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

  • David García

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

    • Se puede, pero tienes que cambiar la sintaxis del documento a HTML, abajo a la derecha

  • Dymar Zambrano

    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.

      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.

        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!

  • Esteban Masias

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

  • Nahuel Pefu

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

  • Alberto Mendoza

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

  • Mirianna

    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

      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

        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

  • Guadalupe

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

    • Guadalupe

      Acabo de ver que efectivamente está el plugin para Brackets en la página! :P Gracias de todos modos!

  • Freddy De Abreu

    Excelente… toooodoooo videos tutos tooodoooo

  • Paramjeed Yush

    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/

  • Paramjeed Yush

    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/

  • Danny Mathews D Griss

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

    • GouH LiH

      en la esquina inferior derecha dice “Plain Text” da click sobre ese texto y busca html despues de que lo selecciones, ahora si intentas

      • Danny Mathews D Griss

        Gracias! lo intentare

        • Albertus B.

          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.

        • Juanito Ayala

          ctrl + e

          a mi me funciono asi

      • Danny Mathews D Griss

        Pues ya lo hice, cambie de Plain Text a html, y tamoco funcinó

    • Si el archivo no esta guardado como html emmet no funciona con TAB,

  • Benjamin Tracy

    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

  • ¿Qué Tema estas usando en Brackets?

  • ana belen

    ¡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.

    • En sublime text, selecciono el código que quiero encerrar y presiono Ctrl + Shift + G

  • Norman Jaimes M

    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?

    • Samuel Campos

      prueba con ul>li*5>strong+em y presionas TAB

  • Samuel Campos

    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

  • Daisy George

    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.

  • Holber Rivera Quiroz

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

  • muchas gracias por este aporte.

  • jazhael

    como saco con emmet la sintaxis de script?

  • Ronald

    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.

  • Pawan Ethan

    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..

  • gouproductions

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


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso