Hey! Free yourself to discover the 'magic' trick that will propel your business on the Web

Visual Coding: A New Eldorado for Graphic Designers and Creatives

Web Design,Webflow
Visual Coding: A New Eldorado for Graphic Designers and Creatives
Visual Coding: A New Eldorado for Graphic Designers and Creatives

Codes and visuals, these are 2 contradictory terms. Yet, I will frequently use them in the same sentence in this article: coding visually to design a website. Is it really possible? I bring you the answer in this guide.


Do you believe in it? Coding visually to create a website, a mobile application, a software...?

No, that's impossible!
Yes, everything becomes possible when you believe!
Frankly, I don't know. That's what I want to know from your article


Visual coding, meaning

You can code visually when you don't need to write lines of code to develop a website, mobile app or software. This is what we also call no code. Instead of manually written codes, all you need is a visual interface with drag and drop functionality.

The no code allows any type of person, whether a programmer, a web designer or an entrepreneur, to easily access the technology.

How to code visually

Use of no code tools

There are obviously specific tools in no code. I talked about them in one of my guides on the main no code tools I know. What we are particularly interested in here is the one that can help us to create a web site: Webflow.

Coding visually with Webflow

I had the opportunity to test different website creation tools in the past, like Wix, Shopify, Wordpress, etc. But Webflow is one of the easiest to handle once you get the hang of it. Because to be honest, there is a "small" learning curve that you have to go through.

To create one, you just have to use a template and then modify it. This is usually done by beginners.

The more experience you gain, the more you are able to create a fully customized website, based on no pre-existing template. In this case, the website templates will serve as sources of inspiration. You then proceed as follows for the creation of sites.

  • You create a new project
  • You drag and drop all the functions you want to display on the page (hero, buttons, texts, images, videos... in short, standard design elements)

At the same time, a whole range of advanced features is still present:

  • animations
  • effects
  • parallax scrolling
  • etc.

Anything that can help you create an interactive website (a blog, an online store, and many others).

Of course, everything is easier if you are guided step by step, so don't hesitate to register for the free training!

Webflow Training

Learning to code visually on Webflow

Code visualization

The first time I logged on to Webflow, on its dashboard, I was a bit puzzled. I was told that it was easy to use, but that was not the image that was reflected in its interface. A lot of people feel that way. That's what I see on many reviews posted on the internet anyway.

In fact, learning to code visually can be done easily in Webflow. As you drag and drop functions on a page, lines of code are automatically generated in the background. So, if you want to take advantage of it to learn how to code (HTML, CSS and JavaScript), Webflow allows you to do it entirely.

Indeed, you have access to these codes. You can even export them to import them elsewhere. Each time you change the codes, they are modified instantly. Thus, you will have a better understanding of their meaning.

Please note that once exported, you will not be able to import it back into Webflow.

Community support

Webflow is much more than a no code tool. It is a great community, which I have experienced myself. I saw that all those who share the same passion for creativity, driven by a spirit of mutual help and exchange, are gathered in this community. Here, I am not only talking about the feeling of accomplishment that one can have by knowing that one is part of such a community, but also, the benefits that one can get.

Here's an example: when I get stuck on something, I know where to turn. Of course, to the community. The best part is that there are experienced members on the forum who are willing to help you!

As everything is in English, I have created a private group on Facebook and the community on Circle (accessible through the free training only).

Inspiration models

One of the best ways to learn is also to be inspired by the work of others. It pushes you to try your best, to push yourself and to stay motivated. But what work should you be inspired by? How do you know if a site has been designed on Webflow or not?

I talked to you about community earlier. You should know that the members of this community regularly send their websites to the Webflow site. You are welcome too! Why not post your recent work, the ones you are the most proud of? You will then have feedback that will help you to progress, but also, you will be a source of inspiration for others. Discover the Webflow showcase for this purpose

Webflow University

Finally, Webflow University, the platform that gathers all the information you need to excel on the platform: tutorial videos, tutorial articles, etc. They are detailed, exactly adapted for beginners.

The benefits of coding visually

Webflow is easy and simple to use

Even if you are new to Webflow, you can be sure to master it quickly. It's true that I often say that Webflow is meant for web designers, but in reality, once the learning curve is over, no matter what your job is, you can do it on a simple project.

Webflow is fast

The time between prototyping and building the website doesn't take much longer. You can turn weeks into days!

Besides, as you don't write any code, you save a lot of time in web design. I explained it in the previous part: you just have to drag and drop the elements that make up your future web page. The creation of forms for example does not require any additional action such as: the creation of databases, the connection of this database to the form, etc.

All this is done automatically. All you have to do is focus on research, analysis, surveys... and design accordingly. As for all other elements, there is no technical configuration to be done.

So use this time saving in the best way possible, that is, focus on more important things. For example, you can use it to expand your knowledge of code by viewing automatically generated code in the background, fine-tune your business, learn other skills, etc.

Webflow for a creative site

Webdesigners will find their happiness in Webflow, that's for sure! Instead of focusing on the codes and the technical side of the site, we have a lot of time to think about the design of the site. Especially since the inspiration is huge. We never run out of it!

As I told you earlier, your sites are not limited to simple static sites. To make it easier for people to navigate, take advantage of the fact that you can easily create animations on the page.

In code, you would have used JavaScript, but here you just move, drag and configure each element.

Webflow and the CMS

Managing the contents of a website is not easy. However, it is possible with Webflow. Before, Worpdress was the CMS par excellence. Today, I would say that Webflow is about to surpass it. By the way, I recently wrote a guide on the main differences between Wordpress and Webflow, if you are interested.

More freedom

Webflow also offers great possibilities, for example: with it, the use of third-party extensions is possible. On the marketing side, there is Mailchimp (for integrating forms and sending emails to your subscribers). Then, let's not forget the Elfsight widget (if you want to display the instagram feed of your account on your website). And many more extensions to come.

More autonomy

Let's take a concrete case of risk-taking: landing page design.

I wrote a guide on landing page creation in case you're interested. In it, I mentioned that in order to make a landing page successful, you need to perform different tests (obviously based on the data you have).

During these tests, feel free to test different hypotheses, no matter how big the risks are.

What allows you to take these risks? Well, you have more time (I'll come back to this later) thanks to the ease of use of Webflow. So you can optimize your time.

Webflow Training

Serene teamwork

For large projects, you will most likely work with a team:

  • editors, copywriters, translators... for all the text content of the site
  • other web designers to help you with design ideas
  • developers to help you with the technical part (development)
  • graphic designers for image content
  • marketers
  • etc.

Collaboration becomes even easier with Webflow, because you can share access to the project. This way, your tasks will be lightened. It is no longer up to you to manually complete the site creation steps. Each participant fulfills his role, directly on Webflow, a true collaborative tool.

For developers in particular, neither you nor they will have any trouble, thanks to the codes automatically generated by Webflow. All you have to do is export them and then communicate them to the people who need them.

Less expenses

Time is money. With all the simplicity that Webflow offers, you can be sure to save time. Then you'll quickly get your money's worth!

Indeed, learning Webflow (whether free or paid) is worth the investment of effort and time.

A personalized website

You can create an extremely personalized website. Today, thanks to Webflow, you will be able to realize 99.99% of your ideas.


The fact that Webflow is relatively easy to use does not mean that it is devoid of powerful features. On the contrary, this simplicity makes all the difference. It is the one that allows us to code visually, to create a website easily. And for those who are looking for technique, complexity, etc., they will always be served!

Indeed, Webflow has other more sophisticated facets of course.

Make the counter explode to reach 1M subscribers together (Pssst...it's in real time)
Together it's more fun

1 Million with you.

It's really amazing how our YouTube community can be a true source of inspiration for all of us. So if you're looking for a community that will give you a boost to reach your personal and business goals, you've come to the right place!
Certified 100%
ULTRA enriching and hair-raising!
Receive a mountain of gifts


We all keep our childish soul, so we like to receive lots of gifts, a montaaaagne of gifts, a galaxiiiiiie of gifts, a.... YOUHOU, are you still with us? Since you also love gifts, receive in your mailbox energy, strategies and tools (each one more grandiose than the other) that will generate results in your business.


Clearsome time for Thursday because an intergalactic surprise awaits you.
Propel your life & your business in 30 days!


The only one, the only one, the real one where all ideas can germinate, develop and succeed. Each phase of business development is thought out down to the smallest detail (even the smallest) to accompany you in your project.

Foundations, development, support, mutual aid, coaching, website, web tools and even cookies. Joining the Happy.webacademy is to be part of this ecosystem without risk, just jump in and let yourself be guided.
AI enabled to accelerate your transformation 🤖
12 Up-to-date modules
We give you crazy training with action plans, regular updates, access for life, and 24/7 support, 365 days a year. Everything you need (and more) to make your life, your business and your skills shine.
Your thruster
We make sure that you are always on top of your questions and that you can grow with a community that has the same dreams as you, and that you can meet super inspiring people.
Never again alone
Your Website!
Who better than Web experts to create a turnkey Website and sell your offers quickly without having to break your head with the technique. No more sleepless nights tearing your hair out, we've got you covered to accelerate your online growth!
We will create you
an Asteroid
12 months Free
We answer all your business, mindset and nugget questions. It's also the best way to get your daily dose of motivation, anything is possible!
Don't forget to bring
Strategy 3.0
The Web and e-commerce are evolving at an incredible speed, and if you don't keep up, you'll lose money. That's why we're going to share with you all our latest tips, discoveries and innovations (automation, artificial intelligence,...) so that you and your business stay on top!
2 Business Coaches
Kevin & Sophie, 2 coaches in the field for 10 years who will be there to motivate you, boost your mindset, and much more! Throughout your entrepreneurial adventure on the Web & in e-commerce, we will support you to validate opportunities or help you optimize your performance. You will NEVER be alone again!
Continuous monitoring
It's sometimes hard to take a step back from your work when you're just starting out (even after), which is why we'll always be there to review your work privately BEFORE you spend any money on advertising or influencers.
Creating a profitable business requires financial optimization. That's why we'll give you the tips we use so you can learn how to invest the money you'll earn in the long run to create wealth.