HTML son las siglas de HyperText Markup Language (lenguaje de marcas de hipertexto), y es el lenguaje principal que compone una página web. Por ello, sea cual se tu perfil entre desarrollador, maquetador o diseñador web, es fundamental conocer como se estructura una web en HTML correctamente, el uso de sus tags y atributos. Para todos ellos, en esta sección recopilamos artículos, trucos y tutoriales relacionados con el uso de HTML en el diseño web.
En este artículo vamos a experimentar con un nuevo valor para la propiedad position de CSS para crear una barra de progreso de lectura de los artículos sin necesidad de PHP ni JavaScript. Solo HTML y CSS.
En los últimos meses, Visual Code Studio se ha convertido en uno de los editores de código favoritos por muchos programadores y diseñadores web. Te mostramos a que se debe esto, y algunas de sus claves que lo convierten en una herramienta tan atractiva.
En esta demo vamos a ver como crear una barra social horizontal para compartir nuestros artículos. La maquetaremos para que se mantenga fija y flotante en la parte inferior de la pantalla. Todo con HTML y CSS3.
Las páginas de error 404 son una de las secciones más descuidadas en el diseño web. Con estos diseños y animaciones CSS ya no hay escusas para no tener un diseño creativo y divertido.
Una muestra de diseños en CSS y HTML de formularios de suscripción de boletines de correo y newsletter, perfectos para encontrar un poco de inspiración. Son fácilmente aplicables a cualquier formulario, especialmente al widget de suscripción de WordPress
Los banners tienen que adaptarse al diseño web responsive, ya que las imágenes con unas dimensiones fijas ya no tienen sentido en las estructuras fluidas actuales. Repasamos las alternativas y diseñamos varios banners responsive con HTML y CSS.
Una nueva demo para solucionar un problema sencillo, conseguir un zoom de una imagen al pasar el cursor por encima (hover) solo con CSS. No necesitaremos JS ni librerías externas para poder ampliar una imagen y verla con mas detalle, solo HTML y CSS.
Animamos el icono hamburguesa, que da acceso al menú responsive utilizando transformaciones y pseudoelementos CSS junto con HTML, convirtiendo el elemento en un nuevo icono de cierre del menú, mejorando así la UX del usuario en caso de querer volver a la vista anterior.
Tras la reciente compatibilidad de CSS Grid con las últimas versiones de los navegadores más usados, se alza como una alternativa a Flexbox. Por ello, vamos a ver algunos detalles que diferencian uno de otro mediante un pequeño ejemplo, para poder comprobar que las diferencian, y como pueden encajar mejor en nuestras necesidades.
Pug es un motor de plantilla de Node.js, con el que podremos optimizar y ser más veloces cuando escribamos en HTML. Os explicamos como podemos empezar a usarlo en Windows, usando el editor de código Atom, y los primeros pasos para entender el funcionamiento de su sintaxis.
Atom es un editor de código abierto desarrollado por el mismo equipo de GitHub, siendo una de sus características más notables su alta personalización. Aquí os dejamos nuestras 9 extensiones imprescindibles para trabajar con él y con las que podremos mejorar nuestro flujo de trabajo.