Felicitación Navideña: mini Juego con HTML, SVG y CSS
Ya llaga la Navidad! Y con ella nuestra felicitación navideña, este año en forma de juego diseñado con HTML, CSS y JS. ¿Puedes ayudar a Santa a decorar su árbol correctamente? Feliz Navidad!
Etiqueta: Html
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.
Barra de progreso de tiempo de lectura con CSS
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.
Visual Studio Code: el editor de código multiplataforma de Microsoft
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.
Cómo crear una barra social flotante con HTML y CSS3
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.
Ejemplos creativos de error 404 con CSS
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.
Formulario de suscripción a newsletter responsive con CSS
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
Diseño de Banner responsive con HTML y CSS
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.
Zoom en imágenes con CSS al hacer hover
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.
Animaciones CSS para el icono hamburguesa del menú responsive
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.
Flexbox vs CSS Grid: Un ejemplo práctico
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.
Introducción y primeros pasos con Pug
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.
Mis 9 extensiones de Atom favoritas
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.