How amazing would it be if you could build on top of your existing product using no-code?

Or what if you have a product whose UI you love and want to take inspiration from?

Well, you can!

‍

Chrome Browser Tools

You wouldn't believe how much is exposed in browser tools. It's one of the fundamental reasons you have be so vigilant of what you are exposing on the front-end/client-side, as it can have massive security implications.

One of the amazing things you can do with the Chrome browser tools is see exactly how a website's front end has been created. (It's how we re-created the Twitter dashboard)

‍

Element Inspector

To use the element inspector tool, you'll first need to inspect the webpage.

To do so, right click on the web page and press 'inspect':

‍

With the Chrome dev tools now open, press the icon in the top left hand corner:

‍

With the element inspector now selected you can click on any element and see it's CSS styling:

‍

Building the design in a no-code builder (WeWeb)

To build responsive web designs, you'll first need to know the basics.

Understanding how to use rows and columns is fundamental for responsive web design.

To give an example of how you can replicate the designs in WeWeb, let's re-create the Twitter side navigation.

‍

‍

We'll start by breaking it down into rows and columns:
At an outer level - we're going to need a column to vertically stack the menu items.
At an inner level - we're going to need a row for each menu item, so we can horizontally stack the icon beside the text.

‍

‍

Now. let's build a basic replica without spacing in WeWeb:

‍
‍
Time to introduce the magic of the inspector tools!

‍

We need to add the appropriate spacing to all the navigation items. Using the inspector tools we can see what padding and margin is used.
‍

Let's first see what spacing is used between each menu item:

‍

We can see the padding for each menu items is 12px on all side. Let's add this to our designs in WeWeb:

‍

The final thing that needs to be added is the spacing between each menu icon and it's pairing text. Let's use the inspector to see what it is:

‍

The inspector tools showed us that each text item has a left margin of 20px and right margin of 16px. Let's add this final piece to our designs in WeWeb:

‍

And there you have it!

It's that simple to create 1:1 replicas of existing web designs in no-code.