Quel outil simple et gratuit pour modifier un site web one page en html avec un css ?
Voici quatre solutions gratuites et très largement utilisées pour retoucher une simple page HTML/CSS ; elles sont classées du plus complet au plus léger, avec un mode d’emploi pas-à-pas afin que vous puissiez démarrer tout de suite.
index.html et style.css.Ctrl+Shift+X), cherchez Live Server puis cliquez sur Install. citeturn2search0Ctrl+S) et observez le résultat instantané.Pourquoi le choisir ?
index.html, cliquez sur l’icône ⚡ Live Preview.⚠️ Adobe n’assure plus le support officiel depuis 2021, mais l’éditeur reste maintenu par la communauté ; si vous préférez un projet très actif, tournez-vous vers VS Code. citeturn1search3
*.html / *.css.F5).Atouts : ultra-léger, démarrage instantané, coloration syntaxique et plugins (indentation auto, beautify, comparaison de fichiers…). citeturn3news10
| Plateforme | Comment faire | Points forts | Limites |
|---|---|---|---|
| CodePen | Allez sur codepen.io ▸ Create ▸ Pen ; collez votre HTML et CSS. | Aperçu en direct dans l’onglet de droite. | Certaines fonctions (Live View multi-écran) sont PRO mais le mode aperçu basique est gratuit. citeturn4search0 |
| PlayCode | Sur playcode.io ▸ Start Coding ▸ fichiers index.html / style.css pré-créés. |
Rafraîchissement instantané, partage d’URL, prise en charge NPM. citeturn5search2 | Connexion Internet nécessaire. |
| Si vous voulez… | Prenez… |
|---|---|
| Un environnement robuste, évolutif et multiplateforme | VS Code + Live Server |
| Un éditeur dédié au front-end avec prévisualisation intégrée, sans extensions | Brackets / Phoenix Code |
| Le minimum vital, ultra-réactif, sur Windows | Notepad++ |
| Modifier ou tester vite fait dans le navigateur, sans rien installer | CodePen ou PlayCode |
index.html et style.css dans le même dossier pour éviter les chemins compliqués.<link rel="stylesheet" href="style.css">
git init) dans le dossier, même si vous travaillez seul.Avec l’un ou l’autre de ces outils, vous pourrez ouvrir, modifier et prévisualiser votre page HTML/CSS en quelques minutes – sans débourser un centime. Bon code !
Je vais choisir vscode, y a t il d autres extensions optionnelle a installer en olus de Live Server ?
Installation éclair :
- Dans VS Code : Ctrl + P (ou ⌘ + P sur Mac)
- Collez la commande
ext install …et faites Entrée- Redémarrez l’éditeur si on vous le propose.
| Extension | Commande d’installation | À quoi ça sert ? |
|---|---|---|
| Prettier – Code formatter | ext install esbenp.prettier-vscode |
Formate automatiquement HTML, CSS, JS ; finit les indentations irrégulières. Activez le formatage à l’enregistrement : "editor.formatOnSave": true dans settings.json. citeturn0search1 |
| Auto Rename Tag | ext install formulahendry.auto-rename-tag |
Quand vous changez <div> en <section>, la balise fermante se renomme d’elle-même. citeturn3search0 |
| IntelliSense for CSS class names in HTML | ext install Zignd.html-css-class-completion |
Autocomplète les classes définies dans vos feuilles CSS directement dans l’attribut class="". citeturn4search0 |
| CSS Peek | ext install pranaygp.vscode-css-peek |
Ctrl+clic sur un sélecteur dans l’HTML → aperçu ou saut vers la règle CSS correspondante. citeturn1search0 |
| Path IntelliSense | ext install christian-kohler.path-intellisense |
Suggère les chemins vers images, feuilles CSS ou scripts dès que vous tapez src=" ou href=". citeturn2search0 |
| Color Highlight | ext install naumovs.color-highlight |
Affiche un pastille de couleur sous chaque #hex, rgb( ), hsl( ) etc.—pratique pour ajuster une palette. citeturn3search1 |
| Option framework : Tailwind CSS | ext install bradlc.vscode-tailwindcss |
Autocomplétion + surlignage pour les classes Tailwind. Installez-la uniquement si vous utilisez Tailwind. citeturn1search1 |
| Option workflow : GitLens | ext install eamodio.gitlens |
Affiche qui a modifié chaque ligne, facilite l’historique & les commits. Utile dès que vous versionnez sur Git. citeturn5search0 |
| Option pré-processeur : Live Sass Compiler | ext install ritwickdey.live-sass |
Compile vos fichiers .scss en .css et recharge la page—idéal si vous passez à Sass. citeturn7search0 |
// .vscode/settings.json (dossier du projet)
{
"editor.formatOnSave": true, // lance Prettier à chaque Ctrl+S
"files.autoSave": "off", // évite les reload intempestifs
"liveServer.settings.port": 5500 // port fixe pour éviter les conflits
}
Vous êtes prêt à :
git init puis profiter de GitLens pour voir vos changements dans le temps.Besoin d’aide supplémentaire ?
Souhaitez-vous un pas-à-pas pour activer le formatage « on save » ou pour configurer Tailwind / Bootstrap ? Faites-le moi savoir !
Je veux tout ca
(Windows / macOS / Linux, juin 2025)
| Outil | Pourquoi | Où le prendre |
|---|---|---|
| VS Code | Éditeur principal | https://code.visualstudio.com/ |
| Node .js LTS | Nécessaire à Tailwind & aux outils front modernes | https://nodejs.org/ |
| Git | Suivi de versions + GitLens | https://git-scm.com/ |
Installez-les dans cet ordre, en laissant toutes les options par défaut. Vérifiez en terminal :
node -v # doit répondre v20.x ou v21.x
git --version
code --version
mon-site/ contenant index.html et style.css.code mon-site (ou Fichier ▸ Ouvrir un dossier).Ctrl + Shift + X) → cherchez Live Server (auteur : Ritwick Dey).Méthode rapide : frappez
Ctrl + P, collez la ligneext install …puis Entrée.
| Extension | Commande | Utilité |
|---|---|---|
| Prettier – Code formatter | ext install esbenp.prettier-vscode |
Formate HTML, CSS, JS à l’enregistrement. citeturn0search0 |
| Auto Rename Tag | ext install formulahendry.auto-rename-tag |
Renomme la balise fermante quand vous changez la balise ouvrante. citeturn0search1 |
| IntelliSense for CSS class names | ext install Zignd.html-css-class-completion |
Auto-complète les classes définies dans vos CSS. citeturn0search3 |
| CSS Peek | ext install pranaygp.vscode-css-peek |
Ctrl + clic pour sauter vers la règle CSS. citeturn0search2 |
| Path IntelliSense | ext install christian-kohler.path-intellisense |
Suggère les chemins d’images, CSS, JS. citeturn0search4 |
| Color Highlight | ext install naumovs.color-highlight |
Affiche un pastille de couleur sous chaque #hex, rgb(), etc. citeturn0search4 |
| Tailwind CSS IntelliSense* | ext install bradlc.vscode-tailwindcss |
Autocomplétion et surlignage Tailwind. citeturn0search6 |
| GitLens* | ext install eamodio.gitlens |
Historique Git, blame, graph interactif. citeturn0search7 |
| Live Sass Compiler* | ext install ritwickdey.live-sass |
Compile vos .scss en .css + rafraîchit le navigateur. citeturn1search0 |
*Optionnel : installez-les seulement si vous utilisez Tailwind, Git ou Sass.
Dans votre dossier, ajoutez .vscode/settings.json :
{
// Formatage & rechargement
"editor.formatOnSave": true,
"files.autoSave": "off",
"liveServer.settings.port": 5500,
// Prettier : largeur max et guillemets simples optionnels
"prettier.printWidth": 100,
"prettier.singleQuote": true,
// Sass : dossier de sortie (si vous compilez)
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
]
}
VS Code créera automatiquement le dossier
.vscode/si nécessaire.
git init
git add .
git commit -m "Premier commit"
Rechargez VS Code : GitLens affiche désormais l’auteur et la date sur chaque ligne.
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js :module.exports = {
content: ["./*.html"],
theme: { extend: {} },
plugins: [],
};
./src/input.css :@tailwind base;
@tailwind components;
@tailwind utilities;
package.json :"scripts": {
"build:css": "tailwindcss -i ./src/input.css -o ./css/style.css --watch"
}
npm run build:css – Tailwind génère /css/style.css et se met à jour à chaque sauvegarde..scss, cliquez Watch Sass (barre d’état)./css/ selon le chemin défini plus haut, et Live Server recharge la page.index.html ou style.css → Ctrl + S →
Vous disposez maintenant d’un environnement complet, prêt pour tout projet HTML/CSS/Tailwind/Sass, sans dépenser un centime. Bon développement !
Est ce applicable a Cursor ?
Les menus, les raccourcis, la structure du dossier .vscode/ et même la quasi-totalité des extensions sont donc reconnus.
| Extension | Où la trouver | Méthode rapide |
|---|---|---|
| Live Server | Open VSX Registry citeturn4search0 | ⌃/⌘ P → ext install ritwickdey.LiveServer |
| Prettier – Code formatter | Open VSX Registry citeturn4search1 | ext install esbenp.prettier-vscode |
| Auto Rename Tag | Cursor Marketplace (Open VSX miroir) | ext install formulahendry.auto-rename-tag |
| CSS Peek | idem | ext install pranaygp.vscode-css-peek |
| IntelliSense for CSS class names | idem | ext install Zignd.html-css-class-completion |
| Path IntelliSense | idem | ext install christian-kohler.path-intellisense |
| Color Highlight | idem | ext install naumovs.color-highlight |
| Tailwind CSS IntelliSense* | idem | ext install bradlc.vscode-tailwindcss |
| GitLens* | idem | ext install eamodio.gitlens |
| Live Sass Compiler* | idem | ext install ritwickdey.live-sass |
*Installez ces trois-là seulement si vous utilisez Tailwind, Git ou Sass.
Astuce CLI Après avoir activé l’option “Install code/cursor shell command” (menu
Palette → Shell Command: Install code command), vous pouvez aussi taper :cursor --install-extension ritwickdey.LiveServerLa syntaxe est la même que sous VS Code citeturn8view0.
| Point | Détail |
|---|---|
| Marketplace | Cursor interroge par défaut Open VSX (libre) ; c’est transparent pour les extensions open-source comme Live Server ou Prettier. |
| Extensions Microsoft propriétaires | Depuis avril 2025, certaines (C / C++, C# DevKit, Remote SSH…) n’acceptent plus d’être exécutées hors de VS Code et affichent des erreurs citeturn3view0. Pour du pur HTML/CSS/JS, vous n’êtes pas concerné. |
| Mises à jour d’extensions | La plupart se mettent à jour normalement via Open VSX. Si l’update tarde, vous pouvez toujours télécharger un fichier .vsix et l’installer via cursor --install-extension chemin.vsix. |
| Paramètres & dossiers | Le fichier .vscode/settings.json que je vous ai proposé reste inchangé ; Cursor le lit directement. |
Ctrl + Shift + X → installez la liste ci-dessus.index.html, style.css (ou css/) et .vscode/ sont en place.Ctrl + S."editor.formatOnSave": true dans .vscode/settings.json, ou utilisez le bouton Format Document pour tester.npm données précédemment ; le watch Tailwind + Live Server fonctionne pareil.cursor --install-extension ; toutes les extensions open-source du front sont disponibles.Bon hacking !
Merci, maintenant je souhaite un canevas détaillé avec un tuto sur toutes les sections a modifier (html et css) pour pouvoir modifier ou ajouter:
Ce document sert de gabarit : copiez‑collez les fichiers dans votre dossier de projet puis remplacez ou complétez les sections marquées TODO.
mon-site/
│
├── index.html
├── css/
│ └── style.css
├── js/
│ └── main.js (optionnel – animations/navigation)
└── .vscode/
└── settings.json (pré‑configurations VS Code/Cursor)
index.html – structure de la page<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mon One‑Page</title>
<!-- 4. POLICES – Google Fonts (ex.) -->
<!-- TODO : changez Inter pour une police de votre choix -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet" />
<!-- Feuille de styles principale -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 8. NAVIGATION -->
<header id="top">
<nav class="nav" aria-label="Navigation principale">
<button class="nav__toggle" aria-expanded="false" aria-controls="navMenu">☰</button>
<ul id="navMenu" class="nav__list">
<li><a href="#hero">Accueil</a></li>
<li><a href="#about">À‑propos</a></li>
<li><a href="#features">Fonctionnalités</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- HERO + ANIMATION -->
<section id="hero" class="hero animate-fade-in">
<h1 class="hero__title">Titre principal</h1>
<p class="hero__lead">Texte d'accroche…</p>
<a href="#features" class="btn btn--primary">Découvrir</a>
</section>
<!-- SECTION À‑PROPOS -->
<section id="about" class="section">
<h2>À propos</h2>
<p>…</p>
</section>
<!-- SECTION FONCTIONNALITÉS -->
<section id="features" class="section section--alt">
<h2>Fonctionnalités</h2>
<div class="grid">
<!-- 3. BLOCS DE TEXTE : dupliquez <article> selon vos besoins -->
<article class="card">
<h3>Bloc 1</h3>
<p>Description…</p>
</article>
<article class="card">
<h3>Bloc 2</h3>
<p>Description…</p>
</article>
</div>
</section>
<!-- SECTION CONTACT -->
<section id="contact" class="section">
<h2>Contact</h2>
<form class="form">
<label>Votre email <input type="email" required /></label>
<button type="submit" class="btn btn--secondary">Envoyer</button>
</form>
</section>
<footer class="footer">
<small>© 2025 — Tous droits réservés</small>
<a href="#top" class="backtotop" aria-label="Revenir en haut">↑</a>
</footer>
<!-- 5. ANIMATIONS & SCROLL‑SPY (facultatif) -->
<script src="js/main.js" defer></script>
</body>
</html>
css/style.css – variables, mise en page, responsive/*************************
* 1. COULEURS
*************************/
/* TODO : ajustez la palette selon votre charte graphique */
:root {
--color-primary: #146c94;
--color-secondary: #f98e2b;
--color-bg: #ffffff;
--color-bg-alt: #f7f9fb;
--color-text: #222222;
--color-muted: #666666;
}
/*************************
* 4. POLICES & TYPO
*************************/
body {
margin: 0;
font-family: "Inter", Arial, sans-serif; /* TODO : changez ici */
font-size: 1rem; /* base : 16 px */
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg);
scroll-behavior: smooth; /* 8. NAVIGATION douce */
}
h1, h2, h3 {
font-weight: 800;
margin: 0 0 0.5em;
}
/* Responsive titres : clamp(min, vw, max) */
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
/*************************
* 2. MISE EN PAGE
*************************/
.section {
padding: 6rem 1rem;
max-width: 1200px;
margin-inline: auto;
}
.section--alt { background-color: var(--color-bg-alt); }
.grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
padding: 2rem;
border-radius: 0.75rem;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.25s ease;
}
.btn--primary {
background-color: var(--color-primary);
color: #fff;
}
.btn--primary:hover { background-color: #0e506e; }
.btn--secondary {
background-color: var(--color-secondary);
color: #fff;
}
.btn--secondary:hover { background-color: #c46e21; }
/*************************
* 5. ANIMATIONS
*************************/
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.8s ease-out both; }
/*************************
* 6. RESPONSIVE
*************************/
@media (max-width: 768px) {
.nav__toggle { display: block; }
.nav__list {
display: none;
flex-direction: column;
gap: 1rem;
}
.nav__list.is-open { display: flex; }
}
/*************************
* 7. NAVIGATION – soulignement animé
*************************/
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem clamp(1rem, 5vw, 3rem);
position: sticky;
top: 0;
background: var(--color-bg);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
z-index: 100;
}
.nav a {
position: relative;
font-weight: 600;
color: var(--color-text);
text-decoration: none;
}
.nav a::after {
content: "";
position: absolute;
left: 0; bottom: -4px;
width: 0; height: 2px;
background: var(--color-primary);
transition: width 0.3s ease;
}
.nav a:hover::after, .nav a.active::after { width: 100%; }
js/main.js – interactions et scroll‑spy (facultatif)// 5. ANIMATIONS conditionnelles : apparition au scroll
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
observer.unobserve(entry.target);
}
});
});
document.querySelectorAll('.section').forEach(section => observer.observe(section));
// 7. NAVIGATION mobile (burger) & lien actif
const toggle = document.querySelector('.nav__toggle');
const menu = document.querySelector('.nav__list');
toggle.addEventListener('click', () => {
const expanded = toggle.getAttribute('aria-expanded') === 'true' || false;
toggle.setAttribute('aria-expanded', !expanded);
menu.classList.toggle('is-open');
});
const links = document.querySelectorAll('.nav a');
const sections = [...links].map(a => document.querySelector(a.getAttribute('href')));
window.addEventListener('scroll', () => {
const pos = window.scrollY + 100; // marge supérieure
sections.forEach((sec, i) => {
if (pos >= sec.offsetTop && pos < sec.offsetTop + sec.offsetHeight) {
links.forEach(l => l.classList.remove('active'));
links[i].classList.add('active');
}
});
});
Installez PostCSS + Autoprefixer :
npm install -D postcss postcss-cli autoprefixer
Créez postcss.config.cjs :
module.exports = {
plugins: [require('autoprefixer')],
};
Ajoutez dans package.json :
"scripts": {
"build:css": "postcss css/style.css -o dist/style.css --watch"
}
Lancez : npm run build:css pour générer dist/style.css avec préfixes.
:root)viewport + tests sur écran < 768 pxaria‑* vérifiées pour l’accessibilité(Fin du canevas)
J’ai placé un canevas complet (HTML, CSS et un petit JS) dans le panneau latéral ; chaque rubrique (couleurs, mise en page, textes, polices, animations, compatibilité, responsive et navigation) est commentée et pré-remplie de TODO que vous pouvez suivre pas-à-pas.
Ouvrez-le, copiez les fichiers dans votre projet, puis :
--color-… pour votre palette.clamp().<article class="card"> pour ajuster les blocs.npm run build:css pour qu’Autoprefixer génère un CSS compatible avec les navigateurs plus anciens.N’hésitez pas à me demander si vous voulez enrichir une section, ajouter un carrousel, intégrer Bootstrap/Tailwind ou optimiser les performances !
Je souhaite tout ca et détaillé bien tout, garde ce canevas et fais en un nouveau olus sous forme de notice explicative pour le faire sur un site qui existe déjà.
Ce guide pas‑à‑pas part du principe que votre site est déjà en production : vous disposez d’un dossier racine contenant au moins un fichier
index.html(ou équivalent) et une ou plusieurs feuilles de style. Nous allons greffer les bonnes pratiques du canevas précédent sans tout réécrire.Objectif : moderniser visuellement (palette, polices, blocs), rendre le site responsive, ajouter navigation fluide & animations, assurer la compatibilité navigateurs.
Clonez (ou copiez) le site existant dans un nouveau dossier :mon‑site‑refonte/.
Initialisez Git (si absent) :
git init && git add . && git commit -m "Backup avant refonte"
Ouvrez le dossier avec VS Code ou Cursor :
code mon‑site‑refonte
Vous disposez ainsi d’une branche de travail isolée ; retour en arrière possible à tout moment.
Installez les extensions Live Server, Prettier, Auto Rename Tag, CSS Peek, Path IntelliSense, Color Highlight. (GitLens, Tailwind / Live Sass uniquement si utiles).
Ajoutez/éditez .vscode/settings.json :
{
"editor.formatOnSave": true,
"liveServer.settings.port": 5500,
"files.autoSave": "off"
}
Lancez Go Live pour un rechargement instantané pendant toute la refonte.
css/variables.css:root {
--color-primary: #146c94; /* TODO remplacez */
--color-secondary: #f98e2b;/* TODO par vos couleurs */
--color-bg: #ffffff;
--color-bg-alt: #f7f9fb;
--color-text: #222;
--color-muted: #666;
}
<link rel="stylesheet" href="css/variables.css" />
<link rel="stylesheet" href="css/style.css" />
#rrggbb, rgb(…), etc. → variables correspondantes.color: #146c94; ⇒ color: var(--color-primary);Astuce : dans VS Code : Ctrl + F → .(#146c94). → Replace All.
Choisissez (ou gardez) une police Google Fonts. Ex. :
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
Dans votre sélecteur body, remplacez :
body {
font-family: "Inter", sans-serif; /* TODO personnalisez */
}
Mettez à jour les titres si besoin :
h1, h2, h3 {
font-weight: 800; /* ou 700/600 selon le design */
}
.section.section {
padding-block: 6rem;
max-width: 1200px;
margin-inline: auto;
}
Encapsulez vos sections existantes :
<section id="about" class="section">
…
</section>
Si votre site n’a pas encore de grille récente :
.grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
<div class="grid">.Déclarez une keyframe générique (fade‑in, slide‑up, etc.) dans style.css :
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.8s ease-out both; }
Ciblez les éléments à animer (titres, images, cards) avec class="animate-fade-in".
Optionnel : activez l’apparition uniquement quand l’élément entre dans le viewport via IntersectionObserver (exemple complet dans canevas original – fichier js/main.js).
Ajoutez dans votre <header> existant (ou simplifiez-le) :
<button class="nav__toggle" aria-expanded="false" aria-controls="navMenu">☰</button>
<ul id="navMenu" class="nav__list">
<!-- <li><a href="#hero">Accueil</a></li> etc. -->
</ul>
.nav__toggle { display: none; background: none; border: none; font-size: 2rem; }
@media (max-width: 768px) {
.nav__toggle { display: block; }
.nav__list { display: none; flex-direction: column; gap: 1rem; }
.nav__list.is-open { display: flex; }
}
Copiez le snippet suivant dans js/main.js (ou équivalent) :
const toggle = document.querySelector('.nav__toggle');
const menu = document.getElementById('navMenu');
toggle.addEventListener('click', () => {
const expanded = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', !expanded);
menu.classList.toggle('is-open');
});
Ajoutez, plus bas dans le même fichier :
const links = document.querySelectorAll('.nav a');
const sections = [...links].map(a => document.querySelector(a.hash));
window.addEventListener('scroll', () => {
const pos = window.scrollY + 100;
sections.forEach((sec, i) => {
if (pos >= sec.offsetTop && pos < sec.offsetTop + sec.offsetHeight) {
links.forEach(l => l.classList.remove('active'));
links[i].classList.add('active');
}
});
});
Vérifiez la présence de <meta name="viewport" content="width=device-width, initial-scale=1.0">.
Utilisez des unités relatives : rem, vw, vh, % plutôt que px fixes.
Titres fluides :
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
Media‑queries principaux :
@media (max-width: 1024px) { /* tablette */ }
@media (max-width: 768px) { /* mobile */ }
Testez avec les outils dev du navigateur (mode Responsive Design).
Installez :
npm install -D postcss postcss-cli autoprefixer
postcss.config.cjs :
module.exports = { plugins: [require('autoprefixer')] };
Ajoutez le script dans package.json :
"build:css": "postcss css/style.css -o dist/style.css --watch"
Lancez : npm run build:css
⇒ dist/style.css reçoit automatiquement les préfixes (-webkit-, -ms-, …).
Lorsque tout est vert :
git add -A
git commit -m "Refonte : palette, polices, responsive, nav, anim"
Déployez (FTP, Netlify, Vercel, ou votre méthode habituelle).
<head> et appliquée au body.grid ou Flexbox mise en placenpm run build:css terminé sans erreurFélicitations ! Votre site existant bénéficie désormais d’une base moderne, modulable, et facile à maintenir grâce aux variables CSS, à l’organisation en sections et à un workflow outillé (Live Server, Prettier, GitLens).
(Fin de la notice)
Un second document (« Notice-integration-canevas-existant ») vient d’être ajouté dans le panneau latéral : il détaille, étape par étape, comment injecter le canevas dans un site déjà en production sans tout reconstruire.
Besoin d’un zoom sur une étape (ex. : migration Tailwind, configuration PostCSS, audit accessibilité) ? Dites-le-moi et on approfondit !
Merci, sachant que je suis sur un héberger ou je peux déployer des sites Web (hostinger) et que je peux déposer des fichiers et naviguer dans l arborescence du site mais je ne suis pas sur d avoir accès au terminal pour installer des commandes de type npm etc, c est quand meme réalisable ?
Un site One-Page reste un site statique : tout ce qui doit être « compilé » (Tailwind, Sass, Autoprefixer…) peut l’être sur votre propre ordinateur ; le serveur, lui, ne fait que livrer les fichiers déjà prêts.
Voici les trois scénarios possibles ; choisissez celui qui correspond le mieux à vos contraintes.
| Scénario | Où se fait la compilation ? | Accès serveur nécessaire | Quand l’utiliser |
|---|---|---|---|
| A. Local « tout-en-un » | Sur votre PC (VS Code, Node, npm) | Aucun (simple FTP / gestionnaire de fichiers) | Vous pouvez installer Node localement ; c’est le plus simple et le plus rapide. |
| B. CI/CD GitHub Actions | Sur GitHub, à chaque push | Accès Git (ou upload ZIP) | Vous voulez éviter d’installer Node, ou travailler en équipe. |
| C. 100 % sans compilation | Aucune (CDN + CSS natif) | Aucun | Projet ultra-léger : pas de Sass, pas de Tailwind, juste du CSS vanilla. |
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
"build:css" dans le package.json (cf. canevas) et lancez :npm run build:css # le fichier dist/style.css est généré ou mis à jour
index.html, dist/style.css, images, JS minifiés…) via :
Mise à jour ? Re-compilez localement → uploadez les fichiers modifiés, c’est tout.
git remote add origin https://github.com/votre-compte/mon-site.git
git push -u origin main
.github/workflows/build.yml :name: Build CSS
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: lts/*
- run: npm ci
- run: npm run build:css
- uses: actions/upload-artifact@v4
with:
name: dist
path: dist
dist/.Si vous préférez éviter totalement Node/npm :
<script src=\"https://cdn.tailwindcss.com?plugins=typography\"></script>
.css déjà compilé depuis un convertisseur en ligne.Ce scénario est acceptable pour un petit site, mais :
ssh utilisateur@nom-de-domaine
node -v # vérifier la version
| Étape | Fait ? |
|---|---|
| Compilation locale ou GitHub Actions opérationnelle | ☐ |
Fichiers compilés placés dans dist/ ou css/ |
☐ |
| Upload via FTP ou gestionnaire Hostinger | ☐ |
| Page testée en ligne (URL provisoire) | ☐ |
| Lighthouse mobile ≥ 90 | ☐ |
| Sauvegarde Git avant déploiement | ☐ |
npm et livrer un ZIP prêt à déposer.Vous pouvez donc appliquer le canevas et la notice sans changer d’offre chez Hostinger.
Besoin d’un exemple de workflow GitHub complet ou d’un pas-à-pas FileZilla ? Je suis là !
Merci, ces tutos semblent parfait je vais les essayer rapidement.
Autre question s'il te plaît, existe-t-il un moyen de le faire sur VS Code ou autre via des outils WYSIWYG avec des selections a la.souris pour travailler le contenu (texte, images, menus, ...)?
Voici un tour d’horizon 100 % “à la souris” des solutions que vous pouvez brancher sur votre dossier HTML/CSS, classées par niveau d’intégration avec VS Code et par budget.
| Outil | Points clés | Prix |
|---|---|---|
| Pinegrow Live Sync (extension + appli Pinegrow) | – Ouvre votre projet dans Pinegrow (éditeur visuel drag-and-drop) – Toute modification (texte, images, CSS, grilles…) est diffusée en temps réel dans VS Code, et inversement. – Gestion native de Bootstrap, Tailwind, WordPress, CSS Grid. |
Extension gratuite ; appli Pinegrow payante (essai 7 j). citeturn2view0 |
| HTML WYSIWYG Designer Addon (node-projects) | – Affiche un panneau Designer dans VS Code : sélection à la souris, propriétés dans une sidebar, glisser-déposer d’éléments. – Projet open-source, fonctionne aussi dans VS Code Web. |
Gratuit. citeturn6view0 |
Ctrl + P → ext install pinegrow-vscode.Ctrl + P → ext install node-projects.vscode-designer-addon.index.html ▸ Open With → Designer.| Outil | Avantages | Limites |
|---|---|---|
| BlueGriffon 3.1 | Open-source, multiplateforme, moteur Gecko (rendu Firefox), support HTML5/CSS3 et responsive. citeturn3view0 | Interface un peu datée ; pas d’intégration directe VS Code. |
| Pinegrow Web Editor | Drag-and-drop puissant, édite plusieurs pages à la fois, composants Bootstrap/Tailwind, version d’essai 7 j. | Licence payante (à partir de 149 €) après essai. |
| Adobe Dreamweaver | Design view + code view, inspection CSS visuelle. citeturn7search0 | Abonnement Creative Cloud ; l’aspect WYSIWYG est réduit depuis 2021. |
| Plateforme | Comment ça marche | Pour qui ? |
|---|---|---|
| Webflow | Édition visuelle dans le navigateur → Menu ▸ Code export ▸ Prepare ZIP pour récupérer HTML/CSS/JS. citeturn0search3 | Idéal si vous acceptez un abonnement (export dispo à partir du plan “Lite”). |
| Quarkly | Builder React low-code, synchro GitHub, export complet du projet. citeturn1search6 | Nécessite des bases React si vous souhaitez continuer le dev à la main. |
Une fois le ZIP exporté, ouvrez-le dans VS Code ou uploadez-le directement sur Hostinger.
| Cas d’usage | Recommandation |
|---|---|
| Vous voulez rester dans VS Code et cliquer pour éditer | Pinegrow Live Sync (flux pro) ou HTML WYSIWYG Designer Addon (100 % gratuit). |
| Vous préférez une appli dédiée hors VS Code | BlueGriffon (gratuit) ou Pinegrow Web Editor (plus complet, payant). |
| Vous souhaitez tout faire dans le navigateur et télécharger le code fini | Webflow (HTML/CSS), Quarkly (React). |
alt, aria-*, contrastes… ils ne sont pas toujours gérés automatiquement.Vous pouvez donc tester gratuitement le plugin Designer ou BlueGriffon, puis passer à Pinegrow ou Webflow si vous avez besoin de fonctionnalités avancées (grilles CSS visuelles, interactions complexes, CMS interne). Bonne expérimentation !
Pinegrow me semble très interressant, as tu d'autrs alternatives gratuites aux meme fonctionnalités ? (J aime bien le principe de fonctionnement de Pinegriw)
(ouvrir un dossier local, éditer visuellement, retoucher le code si besoin, puis exporter le HTML/CSS prêt à déposer sur Hostinger)
| Catégorie | Outil | Ce qu’il fait de proche de Pinegrow | Particularités / limites |
|---|---|---|---|
| Open-source auto-hébergeable | GrapesJS | Éditeur glisser-déposer dans le navigateur ; ouvre vos fichiers locaux, style-manager complet, export HTML/CSS/JS en un clic. | Tourne dans Chrome/Firefox sans installation (ou embarqué dans Electron) ; plugin Tailwind dispo. citeturn0search0turn0search8 |
| Silex | Builder drag-and-drop en ligne ou hors-ligne (Docker/AppImage). Synchronise avec GitHub, exporte un ZIP statique. | Interface simple ; extensions limités par rapport à Pinegrow (pas de composants WordPress). citeturn0search1turn0search9 | |
| Intégrés à VS Code | HTML Wysiwyg Designer Addon | Ouvre index.html dans un panneau Designer ; sélection à la souris, propriétés dans une sidebar ; sauvegarde directe dans vos fichiers. | Pas de gestion avancée Tailwind/Bootstrap, mais suffisant pour textes, images, flex, grid. citeturn1search0 |
| wai-VSCode | Extension VS Code ajoutant un canvas interactif (drag & drop, web-components) sans quitter l’éditeur. | Projet encore jeune ; fonctionne mieux sur des pages simples. citeturn1search3 | |
| Applications desktop gratuites | BlueGriffon | Vrai WYSIWYG multi-plateforme (Gecko, comme Pinegrow) : inspecteur CSS, insertion de composants HTML5, vue responsive. | UI vieillissante ; pas de prise en charge Tailwind ; toujours gratuit. citeturn0search2turn0search10 |
| openElement (Windows) | Drag-and-drop, gestion des styles centralisée, export HTML/CSS propre, éditeur de code intégré. | Projet uniquement Windows ; pas de mises à jour très fréquentes. citeturn0search3turn0search11 | |
| Mobirise | Constructeur offline “blocks”. Export de code et publication locale sans abonnement. | Écosystème d’extensions payantes (formulaires, code editor avancé) ; nombreux fichiers CSS à nettoyer. citeturn0search4turn0search12 | |
| Nicepage (Free Edition) | Drag-and-drop moderne, export HTML/CSS via l’appli de bureau. | Limité à 5 pages par projet et watermark « Made with Nicepage » dans la version gratuite. citeturn0search5turn0search13 | |
| Cloud builders avec export de code gratuit | TeleportHQ | Canvas visuel + panneau code live ; export propre vers HTML/CSS ou frameworks JS (React, Vue, Svelte). | Fonctionne dans le navigateur ; plan gratuit généreux, pas de limite d’export. citeturn0search6turn0search14 |
| Quarkly | Studio React visuel ; créer des pages, pousser sur GitHub, publier sur Netlify ; export Gatsby/Next. | Pensé pour React (JSX) : idéal si vous acceptez ce stack. citeturn0search7 |
index.html de la démo, remplacer son contenu par votre propre page (GrapesJS importe le DOM existant).export.zip et copier ses fichiers dans votre site Hostinger.TL;DR
Pour une alternative gratuite la plus proche de Pinegrow : GrapesJS (open-source, plugins Tailwind, export direct) ou HTML Wysiwyg Designer Addon si vous voulez rester 100 % dans VS Code. Testez-les, comparez le code exporté, et gardez celui qui s’intègre le mieux à votre workflow Hostinger !
Ils s interfacent aussi avec VSCode ?
| Extension / Outil | Type d’intégration VS Code | Fonctionnalités clés | Licence / coût |
|---|---|---|---|
| vscode-grapesjs | Panneau latéral embarquant tout GrapesJS ; un clic Toggle Grapesjs panel sur n’importe quel fichier .html. |
Drag-and-drop complet, style-manager, composants Bootstrap/Tailwind si vous ajoutez leurs plugins. | 100 % gratuit & open-source citeturn2search5 |
| HTML WYSIWYG Designer Addon | Ouvre le fichier en mode Designer dans un onglet VS Code (version Desktop et Web). | Sélection à la souris, palette CSS, propriétés, insertion d’éléments standards. | Gratuit citeturn0search1 |
| wai-VSCode | Onglet Wai Designer interne ; propose un canevas interactif + insertion de Web Components. | Drag-and-drop, édition en direct, génération de balises personnalisées. | Gratuit (MIT) citeturn5search0 |
| Pinegrow Live Sync (rappel) | Extension VS Code qui se connecte à l’application Pinegrow Desktop ; double synchro code ↔ visuel. | Re-chargement temps réel, panneau « Tree & CSS Rules » complet. | Extension gratuite ; appli Pinegrow payante après essai. |
| GrapesJS standalone, Silex, BlueGriffon, TeleportHQ | Pas (ou très peu) d’intégration VS Code — on travaille dans une appli ou un navigateur distinct, puis on ré-importe le code. | Vous devrez passer par un export ZIP ou un dossier partagé, puis rouvrir dans VS Code pour l’affinage. | Silex & GrapesJS = libres ; BlueGriffon = libre mais hors VS Code ; TeleportHQ = SaaS gratuit (plan Free). citeturn0search2turn4search0 |
Tout gratuit + intégré
Workflow “pro” Pinegrow-like sans payer
Vous préférez un outil externe gratuit et garder VS Code pour la retouche
# installation rapide
Ctrl+P → ext install olivmonnier.vscode-grapesjs
# ou en CLI
code --install-extension olivmonnier.vscode-grapesjs
index.html, puis Ctrl + Shift + P → Toggle Grapesjs panel.Ctrl + S).npm run build:css en local avant d’exporter.En résumé :
Testez les deux premières extensions : si elles couvrent vos besoins de drag-and-drop et de modification visuelle, vous resterez dans VS Code sans dépenser un euro !
Je vais aussi essayer Pinegrow pendant les 7 jours gratuits, tu peux me faire un petit guide aussi stp ?
(Windows, macOS, Linux – juin 2025)
Ce pas‑à‑pas couvre l’installation, la prise en main, la synchronisation VS Code, et le déploiement sur votre hébergement statique (Hostinger).
| Étape | Action |
|---|---|
| 1.1 Télécharger | Rendez‑vous sur https://pinegrow.com/download. Choisissez l’installateur pour votre OS (±200 Mo). |
| 1.2 Installer | Double‑cliquez, laissez les options par défaut. Aucune inscription requise pour l’essai. |
| 1.3 Lancer | Au premier démarrage, sélectionnez Start Free Trial → Pinegrow est pleinement fonctionnel 7 jours. |
Astuce : la période d’essai court dès la première ouverture, pas à l’installation.
Open Project ↗ (coin supérieur gauche) → pointez Pinegrow sur le dossier de votre site (mon-site/).
.pgconfig (fichier JSON de réglages).Si vous repartez de zéro : New Page → choisissez Blank – HTML5 ou un Starter Bootstrap/Tailwind.
| Panneau | Rôle | Raccourci |
|---|---|---|
| Page View | Aperçu en temps réel éditable (double‑clic sur texte, drag‑drop éléments). | Alt + clic pour sélectionner l’élément parent |
| Tree | Structure DOM hiérarchique ; glisser‑déposer pour réordonner. | F2 bascule Tree plein écran |
| Properties | Ajuster attributs, classes, images, liens. | |
| Style | Éditeur CSS visuel (couleurs, marges, flex, grid) ou code pur. | |
| Master Pages | Gabarits réutilisables pour entête / footer. | |
| Libraries | Composants Bootstrap 5, Tailwind UI, Blocks, SmartHTML. | |
| Device Toolbar | Aperçu responsive (320 px → 1920 px) + breakpoints personnalisés. | Ctrl/Cmd + [ ou ] pour passer d’un device à l’autre |
Ctrl/Cmd + P → ext install pinegrow‑vscode.Live Server : lancez‑le dans VS Code pour avoir un troisième affichage dans votre navigateur, utile pour tester JS et formulaires.
<img> → panneau Properties → Image → choisissez un fichier local.<main> dans Tree.@media pour ajouter des règles spécifiques au breakpoint courant.pg‑ia.js).Ctrl/Cmd + S).index.html, css/theme.css, éventuels fichiers pg‑ia.js.npm run build:css avant d’envoyer.Rappel : Pinegrow se désactive après 7 jours. Les fichiers déjà enregistrés restent utilisables ; seul l’éditeur visuel se ferme.
Trois options :
| ✔ | Action |
|---|---|
| ☐ | Ouvrir le dossier projet dans Pinegrow & VS Code |
| ☐ | Activer Live Sync (copier l’API URL) |
| ☐ | Drag‑drop / éditer visuellement |
| ☐ | Tester breakpoints (Device Toolbar) |
| ☐ | Cliquer Save All |
| ☐ | Compiler Tailwind / Autoprefixer (npm run build:css) |
| ☐ | Commit Git + push (optionnel) |
| ☐ | Upload sur Hostinger |
| Action | Windows/Linux | macOS |
|---|---|---|
| Basculer code / visuel | Ctrl + E |
Cmd + E |
| Inspecter élément (Tooltip) | Ctrl survol |
Cmd survol |
| Dupliquer élément | Ctrl + D |
Cmd + D |
| Aperçu plein écran | F11 |
F11 |
(Fin du guide rapide)
Le guide d’initiation à Pinegrow (7 jours gratuits) vient d’être ajouté dans le panneau latéral ; vous y trouverez :
Feuilletez-le, lancez Pinegrow et suivez la checklist : vous devriez voir vos changements reflétés en temps réel dans VS Code et dans le navigateur.
Si vous butez sur une option (ex. Interactions, Master Pages, purge du CSS), dites-le-moi : on approfondira !