Cómo prototipar una página web

Una mirada rápida a un flujo de trabajo simple que utilizo para crear un prototipo de una página web.

A veces trabajo en páginas web individuales para mis proyectos.

Quizás quiera rediseñar el blog. Quizás sea una página de destino para un nuevo proyecto.

Este es el proceso que utilizo.

Me gusta usar Tailwind para construir prototipos.

Primero configuraré todo el pipeline para Tailwind y PostCSS:

Crear postcss.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')const cssnano = require('cssnano')module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), cssnano({ preset: 'default' }), purgecss({ content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'], defaultExtractor: content = content.match(/[w-/:]+(?!:)/g) || [] }) ]}

Crear tailwind.config.js:

module.exports = { theme: {}, variants: {}, plugins: [],}

Crea un tailwind.cssarchivo:

@tailwind base;@tailwind components;@tailwind utilities;

Crear un package.jsonarchivo:

{ "main": "index.js", "scripts": { "build:css": "postcss tailwind.css -o output.css", "watch": "watch 'npm run build:css' ./layouts" }, "dependencies": { "@fullhuman/postcss-purgecss": "^1.3.0", "autoprefixer": "^9.7.1", "cssnano": "^4.1.10", "postcss": "^7.0.21", "tailwindcss": "^1.1.3", "watch": "^1.0.2" }}

Crea una layouts/index.htmlpágina y agrega tu HTML.Te recomendamos Mejores Alfombras de Hidromasajes

Inicie una terminal, vaya a la carpeta del proyecto y ejecute:

npm run watch

Luego hago que el navegador sincronice automáticamente los cambios cada vez que guardo la página o se regenera el CSS, usando browser-sync, una gran utilidad que puedes instalar usando npm install -g browser-sync:

browser-sync start --server --files "."

Esto inicia un servidor y también abre automáticamente el navegador y apunta al servidor web local recién creado.

¡Ahora abro VS Code y el navegador uno al lado del otro y comienzo a crear prototipos!

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cómo prototipar una página web

Una mirada rápida a un flujo de trabajo simple que utilizo para crear un prototipo de una página web.

programar

es

2025-01-02

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente