Comment je prototyper une page Web

Un aperçu rapide d'un flux de travail simple que j'utilise pour prototyper une page Web

Parfois, je travaille sur des pages Web uniques pour mes projets.

Peut-être que je veux repenser le blog. C'est peut-être une page de destination pour un nouveau projet.

C'est le processus que j'utilise.

J'aime utiliserVent arrièrepour construire des prototypes.

J'ai mis en place tout le pipeline pour Tailwind etPostCSSpremière:

Créerpostcss.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) || []
})
]
}

Créertailwind.config.js:

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

Craete untailwind.cssdéposer:

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

Créer unpackage.jsondéposer:

{
  "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"
  }
}

Créer unlayouts/index.htmlpage et ajoutez votre HTML.

Démarrez un shell de terminal, accédez au dossier du projet et exécutez:

npm run watch

Ensuite, je fais que le navigateur synchronise automatiquement les modifications à chaque fois que j'enregistre la page ou que le CSS est régénéré, en utilisantbrowser-sync, un excellent utilitaire que vous pouvez installer en utilisantnpm install -g browser-sync:

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

Cela démarre un serveur et ouvre également automatiquement le navigateur et pointe vers le serveur Web local nouvellement créé.

Maintenant, j'ouvre VS Code et le navigateur côte à côte, et je commence le prototypage!

Comment je prototyper une page Web

Un aperçu rapide d'un flux de travail simple que j'utilise pour prototyper une page Web

Plus de tutoriels de laboratoire: