Escribe de forma rápida código HTML, CSS usando EMMET

24.08.2018 a las 12:07 hs 0 181 0

Escribe de forma rápida código HTML, CSS usando EMMET

Si eres de las personas que ya tiene tiempo codificando HTML & CSS, maquetando alguna aplicación o pagina web o estas empezando, pero ya te manejas al reves y derecho, de estos dos elementos.

El día de hoy te voy a presentar a Emmet, una genial herramienta que nos facilita agilizar el procedimiento de escribir código HTML, CSS.

Emmet es un plugin que te permite escribir código HTML, CSS por medio de abreviaturas, haciendo que podamos maquetar de forma rápida cualquier pagina o sitio web que estemos por realizar.

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.

Sublime text
Brackets
Notepad++
Atom
TextMate
Adobe Dreamweaver
Eclipse/Aptana
Netbeans
Komodo Edit
Chocolat
Expresso
Coda
CodeMirror

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.

CodePen
Js Bin
JSFiddle
Codio
Codeanywhere
ICEcoder

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

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

Ahora imagina que dentro una etiqueta < article >, debes tener la etiqueta < h2 > y < p >, para realizar esta maquetación realizaremos lo siguiente.

El símbolo >, quiere decir dentro de esta etiqueta y el símbolo + es una separación.

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.

Ahora veremos algunas abreviaturas de Emmet para CSS.

Resultado es el siguiente, como verás es bien sencillo usarlo.

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.

interblink

Posteado por:

interblink

Administrador

0 Comentarios

Cargando comentarios espera un momento...

No tienes permisos para comentar.

Para comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!

Ir al cielo

Tags:

escribe forma rpida cdigo html usando emmet

Posts Relacionados: