5 Tips y herramientas de programación web

Algunos tips de programación web para vuestras aplicaciones. Twitter, entre insulto e insulto, te proporcionar información interesante.

html, php y css
html5, php y css

Vamos con algunos enlaces a herramientas o ejemplos de código en HTML y CSS para desarrollar diferentes elementos web.

De captura de pantalla a código

Esta sencilla aplicación convierte una captura de pantalla en código (HTML/Tailwind CSS, React, Vue o Bootstrap). Utiliza GPT-4 Vision para generar el código y DALL-E 3 para generar imágenes de apariencia similar. ¡Ahora también puedes ingresar una URL para clonar un sitio web activo!

El código: https://github.com/abi/screenshot-to-code#examples

Eliminar saltos BR desde CSS

Cómo podemos eliminar los saltos en HTML creados con la etiqueta BR, pero sin tocar el código. Lo haremos asignándole un estilo CSS al BR:

Código y ejemplo: https://codepen.io/trescomatres/pen/BaMPMod

Menú de navegación superior HTML y CSS

https://twitter.com/i/status/1730533321526976701

El código: https://github.com/atherosai/ui/tree/main/toolbar-01

Menú lateral de navegació HTML y CSS

https://twitter.com/i/status/1728361480888938888

El código: https://github.com/atherosai/ui/tree/main/sidebar-06

Cómo poner iconos en los botones HTML

Mostramos en código cómo poner los iconos en la parte izquierda o derecha dentro de los botones. Un ejemplo de cómo colocar con CSS unas flechas, aunque podría ser cualquier icono, al final o inicio de un botón.

Código y ejemplo: https://codepen.io/trescomatres/pen/VwVgPVM

Espero que os sean de utilidad estos tips de programación web que os muestran cómo crear elementos mas atractivos en vuestras aplicaciones o páginas web.

Más información