Webflow the "no-code" HTML and CSS code editor?

Yes, there is a link between no-code tools, such as Webflow, and HTML and CSS code.

No, you don't need to know how to code to develop on Webflow.

But, YES, to use Webflow well, it is better to understand the basics of the code.

In this article I share with you a quick introduction to the benefit of understanding the connection between Webflow and code.

Introduction to HTML and CSS

In general, it is useful to understand the relationship between HTML and CSS when designing for the web. A website (Wordpress, CMS, no-code, etc...) necessarily uses HTML code.

What is HTML (HyperText Markup Language)?

HTML is the structure of a website element by element: title, paragraph, font, etc. .

With HTML code, content had to be marked up line by line. For example, to change the font, colour or size of the text, you had to update each line of code. One by one. Can you imagine? Updating element by element was extremely repetitive, making it difficult to dynamically update a single style such as a paragraph family or a uniform font style across your entire website.

Then... a revolutionary feature arrived.

Extract of HTML code — Extract from an HTML code

What is CSS(Cascading Style Sheets)?

The acronym CSS comes from the English word "Cascaded Style Sheet".

CSS takes all the style information that was previously written inline, and transfers it to a "style database". Each combination of style data becomes a class. Each class has a name and in this way any of the HTML elements can be given a class name to adopt the styles associated with that class.

⚠️ A style change made to this class in the CSS file affects all elements that use this class.

In summary, the HTML code constitutes the structure - element - and content of a website: Heading, Paragraph, Block, etc.. While the CSS code gives a style dynamically (Colour, size, etc...) to the content.

CSS - The perfect mix — CSS: the All-in-One

The advantages of using a tool like Webflow to create

Webflow is actually an interface that edits code for you. This allows you to create faster and especially to reduce the risk of errors. Webflow generates the HTML and CSS code automatically while you design your website on a visual interface.

The advantages of no-code tools

Create faster
Reduce the risk of errors in the (tedious) writing of lines of code
To give the client the possibility to modify their websites themselves. Without any dependence on a developer

How can I find out the details of the code of my Webflow site?

2 methods to open the code inspector of a website?

Right-click and choose Inspect from the context menu
Press Control + Shift + I (Windows) or Command + Option + I (Mac).

Webflow and code: conclusion

HTML and CSS are the basis for creating websites. They provide both the structure and style of your site. It's useful to understand these concepts, but in 2022 we don't need to code HTML or CSS by hand - thanks to no-code tools like Webflow.

Want to know more? Discover how I learned HTML and CSS thanks to Webflow in this blog post!