Sometimes I work on single web pages for my projects.
Maybe I want to redesign the blog. Maybe it’s a landing page for a new project.
This is the process I use.
I like to use Tailwind to build prototypes.
I set up all the pipeline for Tailwind and PostCSS first:
Create 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) || []
})
]
}
Create tailwind.config.js:
module.exports = {
theme: {},
variants: {},
plugins: [],
}
Craete a tailwind.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Create a package.json file:
{
"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"
}
}
Create a layouts/index.html page, and add your HTML.
Start a terminal shell, go to the project folder and run:
npm run watch
Then I make the browser automatically sync the changes every time I save the page or the CSS is regenerated, using browser-sync, a great utility you can install using npm install -g browser-sync:
browser-sync start --server --files "."
This starts a server and also automatically opens the browser and points at the newly created local web server.
Now I open VS Code and the browser side by side, and I start prototyping!
One more thing! ⚠️ ✋
It's a 10-weeks long cohort online course where I will guide you to becoming a Web Developer.
It's not "just a course". It's a big event I organize once a year.
We'll start from zero, learn the fundamentals of Web Development, HTML CSS, JavaScript, Tailwind, Git, using the command line, VS Code, GitHub, Node.js, we'll then learn React, JSX, how to use PostgreSQL, Astro, Next.js, Prisma, deploying on Netlify/DigitalOcean/Fly/Vercel and much more!
At the end of the first 10 weeks you'll know how to create web sites and web applications and I'll unlock you the 2nd phase of the Bootcamp: you will get access to a large number of projects exclusive to the Bootcamp graduates, so you can follow my instructions to build things like private areas with authentication, clones of popular sites like Twitter YouTube Reddit, create e-commerce sites, and much much more.
Because once you got the fundamentals, you only learn by working on real, exciting projects.
To find out more, visit bootcamp.dev