Tech
Studio
Ok so where to start. Very simply, Webflow is one of the leading no-code website builders available, but it comes with a catch. Said catch, is the steepest of learning curves! The difference between Webflow and other visual designers is it makes you learn the building blocks that prop up the web. And that takes time.
In the days of instant scroll based gratification, it's very easy to come across some awesome looking design concepts. And they do look very nice. But in order to turn them in to a live website, you have to know how the boxes fit together. With a vast range of devices and screen sizes, the concepts need to be more than just visuals.
As mentioned, Webflow is teaching you the concepts of how a website is put together. Other builders can be a drag and drop exercise which has it's place, but doesn't give you anywhere near enough control. And most importantly, you don't really know how it works. With Webflow you need to learn the concepts of layout, positioning, padding, margin and much more in order to make the boxes fit.
As you can see from the image above, Webflow presents you with a lot of customisation options. The steep learning curve we keep referring to means, without the proper instruction and knowledge it can be both daunting, and fairly easy to get wrong. So you think you have something in the correct position by using 278 pixels of padding, only to find out it heads off the canvas when you start to go down the device sizes.
What they do provide is an excellent university to get started. It lists countless short videos to get you going and understand that a div block can be a straight line, a placeholder, a link, an outer box you can't see and so much more.
So once the concept of the box model is in place and the designer is happy with the site structure, you can go start to design really solid websites that just won't fail across device sizes.
A flex child by the way, is what happens to some content inside some other boxes. The parent/child model that is used means that whatever you do to the parent element affects what is inside it, and is one of the main points that needs learning before you get going.
Well that depends on how much time you want to put in before it blows your mind and you need to take a break to think over what Absolute positioning means for the 4th time. As a guide we got our first site up and running after about 3 months of tutorials, messing things up, going back to the same videos, making the same mistakes and then finally getting that lightbulb moment!
It does happen.
After plenty of experimenting it just clicks. You work out why the two images you have inside a box aren't lined up, fix the problem and therefore have full understanding of what the problem was in the first place. We believe this is the key element as to why Webflow works better than any other site builder.
You can, but you don't know how it works. So when AI makes a mistake, what do you do? Ask AI to fix the mistake? It did it in the first place and you have zero knowledge of what to do. Templates are fine but have the same outcome. You don't know how its put together, so what happens when you want three images next to each other instead of two but its JUST NOT PLAYING BALL!!
If you understand the concept that they were set to 50% width and to wrap down their parent element (which is one possible outcome of many!), you can easily rectify the problem and off you go with the rest of the design.
Just to clear up, this isn't any sort of paid promotion by Webflow (would be nice), it's just our opinion of what web design has become in this fast moving day and age.
You'd start by signing up and getting stuck in to the university. Layout and positioning are the key aspects. They take time but underpin everything you'd ever do in Webflow. We often get asked to convert Figma concepts in to real sites, but occasionally they just don't work. They are so flashy and designy, people are taken away from why a website exists in the first place.
Good luck to anyone that gets started. Stick with it.
