Badge Webflow Award Winner 2023

Webflow, HTML et CSS.

Pour créer un site web il faut à minima du code HTML. Avec les outils no-codes (Wordpress, Webflow), pas forcément besoin de savoir codé mais... on vous explique quand même les bases de ces langages.

Publié le 
5/4/2022
Modifié le 
23/3/2023
5 min
Inspection du code HTML et CSS du site Webflow de Digidop

Oui, il y a un lien entre les outils no-code, comme Webflow, et le code HTML et CSS.

Non, vous n'avez pas besoin de savoir coder pour développer sur Webflow.

Mais, OUI pour bien utiliser Webflow, il est préférable de comprendre les bases du code.

Dans cet article  je vous  partage une rapide introduction au bénéfice de comprendre la liaison entre Webflow et le code.

Introduction sur le code HTML et CSS

D'une façon générale, il est utile de comprendre la relation entre le code HTML et CSS lorsque vous créez pour le web.  Un site web (Wordpress, CMS, no-code, etc...) utilise forcément du code HTML.

Qu'est-ce que HTML (HyperText Markup Language) ?

HTML constitue la structure d'un site web élément par élément : titre, paragraphe, police, etc. ..

Avec le code HTML, le contenu devait être balisé ligne par ligne. Par exemple, pour modifier la police, la couleur ou la taille du texte, il fallait mettre à jour chaque ligne de code. Une par une. Vous imaginez ? La mise à jour élément par élément était extrêmement répétitive, ce qui rendait difficile la mise à jour dynamique d'un style unique tel qu'une famille de paragraphes ou un style de police uniforme pour l'ensemble de votre site Web.

Puis... une fonctionnalité révolutionnaire est arrivée..

Extrait de code HTML
Extrait d'un code HTML

Qu'est-ce que CSS (Cascading Style Sheets) ?

L'acronyme CSS provient du mot anglais "Cascaded Style Sheet".

Le CSS reprend toutes les informations de style qui étaient auparavant écrites en ligne, et les transfère dans une "base de donnée de style". Chaque combinaison de style de données, devient une classe. Chaque classe à un nom et de cette façon, n'importe lequel des éléments HTML peut recevoir un nom de classe pour adopter les styles associés à cette classe.

⚠️ Une modification de style apportée à cette classe dans le fichier CSS affecte tous les éléments qui utilisent cette classe.

En résumé, le code HTML constitue la structure - élément -  et le contenu d'un site Web : Heading, Paragraphe, Block, etc.. Tandis que le code CSS donne un style dynamiquement (Couleur, taille, etc...) au contenu.

CSS - Le mix parfait
CSS : le Tout-en-un

Les avantages d'utiliser un outil comme Webflow pour créer

Webflow est en réalité, une interface qui édite du code pour vous. Cela vous permet de créer plus rapidement et surtout de réduire le risque d'erreur.  Webflow génère le code HTML et CSS automatiquement pendant que vous concevez votre site web sur une interface visuelle.

Les avantages des outils no-codes

  • Créer plus rapidement
  • Réduire le risque d'erreurs dans la rédaction (fastidieuse) des lignes de codes
  • Donner la possibilité au client de modifier leurs sites web, eux-mêmes. Sans aucune dépendance à un développeur

Comment découvrir le détail du code de mon site Webflow ?

2 méthodes pour ouvrir l'inspecteur de code d'un site web ?

  1. Cliquez avec le bouton droit de la souris et choisissez Inspecter dans le menu contextuel
  2. Appuyez sur Control + Shift + I (sous Windows) ou Command + Option + I (sous Mac).

Webflow et le code : conclusion

Les langages HTML et CSS sont à la base de la création de sites Web. Ils fournissent à la fois la structure et le style de votre site. Il est utile de comprendre ces concepts, mais en 2022, nous n'avons plus besoin de coder HTML ou CSS à la main - grâce à des outils d'aide à la création (dit no-code) comme Webflow.

Envie d'en savoir plus ? Découvrez comment j'ai appris HTML et CSS grâce à Webflow dans cet article de blog !

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !