After reading this article, you will know how to design a website better. Even if our principle is to create a website without code, know that this does not allow us to depart from the rule. Indeed, it is very important in terms of HTML and CSS nesting. But what is it really about? And how do you go about structuring a web page correctly?
What's interlocking?
I suggest you go to a site of your choice. If you've been following me for some time now, you'll know that I'm going to take the Apple site again. Not only is their design well done, but their site is constantly being updated. Their team is always on the lookout for the latest news.
There is a Youtube video in which I describe this at the bottom of the article. Support me by subscting to the YouTube channel "Happy Desk Design"
Their interlocking pattern is certainly correct. But how can we verify it?
In my video, I explain it more clearly. Are you familiar with Chrome's "inspect" tool? When you are on the site in question, right click with the mouse, and inspect. A bar appears immediately on the right side. A whole set of codes is displayed. Each item selected on the screen corresponds to a set of codes on the right side (a nesting in which there may be a title, some subtitles, images or other elements).
In principle, Firefox works the same way. But in case you encounter a problem (same for those who work on Safari), why not install Chrome (just this once)?
Your goal should be to understand how the nesting happens on a web page. As you'll see in my video, in a box, you can have several other sub-boxes. And in these, sub-sub-boxes, and so on.
Once you've understood (or almost), it's time to see how these nests work on Webflow.
The principle of nesting on Webflow
Have you seen the number of codes on a web page? There are so many of them! Lucky for us, Webflow nesting saves us all that. Even when designing the nesting on this platform, we don't need to understand the codes.
But if you want to learn a bit more (HTML or Javascript), check out my other videos and articles ;)
Let's get back to our main topic:
I've gone from a blank page before to explain the Webflow nesting to you. I used the block div. As the years go by, you'll understand better when to use the different tags. But today, I suggest you settle for this one tag. It's like a kind of Swiss army knife, it can be used in any context.
Then, in this first box, you will have to add other boxes, before inserting elements such as titles, images, paragraphs... Besides, it is the very principle of nesting on Webflow (and in the design of a website in general). Everything is done in boxes; each element belongs to its own box.
If you want the boxes to take shape, just use CSS. I show you in another of my videos how to learn CSS with Webflow.
Conclusion
From now on, when you design a web page, I advise you to use interlocks. You will then have a cleaner and more correct structure. As you probably know, Google loves well-designed sites :) That's why it's important not to depart from the Webflow nesting rule.
Come back to this page whenever you want. Did you come up with any ideas I might have forgotten? If so, what are they? Leave a comment below or send an email to hello@happydesk.be.
