Webflow, HTML et CSS.

Documentation
5/4/2022
3 min
Inspection du code HTML et CSS du site Webflow de Digidop
Key points

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 !

Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

Webflow Localization, cas d'utilisation de Credial
Documentation
Webflow

Webflow Localization : guide et cas pratique de Credial

Webflow Localization : guide et cas pratique de Credial
Visuel illustrant le passage de digidop.fr à digidop.com
News
Digidop

Digidop.fr devient Digidop.com

Digidop.fr devient Digidop.com
Photo de l'équipe Digidop avec Logo Digidop 2024
News
Digidop

Rétrospective d’une année 2024 exceptionnelle et cap sur 2025

Rétrospective d’une année 2024 exceptionnelle et cap sur 2025

Transformez votre site web en un moteur de croissance.

Nous contacter