After reading this article, you will know better how to design a website. 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 to structure a web page in a correct way ?
I suggest you go to a site of your choice. If you've been following me for a while 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 top of the latest news.
There is a YouTube video in which I describe this at the bottom of the article. Support me by subscribing to the YouTube channel "Happy Desk Design".
Their interlocking pattern is certainly correct. But how to check it?
In my video, I explain it more clearly. Do you know the Chrome tool "inspect"? When you are on the site in question, right click with the mouse, and inspect. A bar appears on the right side. A whole set of codes is displayed. Each element selected on the screen corresponds to a set of codes in the right part(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 have a problem (and for those who work on Safari), why not install Chrome (if only for this time)?
Your goal should be to understand how nesting happens on a web page. As you will 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 figured it out (or almost), it's time to see how these nests work on Webflow.
Have you seen the number of codes in a web page? There is really a lot of it! Fortunately for us,nesting on Webflow spares us all that. Even when designing the nesting on this platform, we don't need to understand the codes.
Let's get back to our main topic:
I started from a blank page before to explain you the nesting on Webflow. I used the block div. As time goes by, you will understand better when to use the different tags. But today, I suggest that you stick to this tag. It's like a 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 like titles, images, paragraphs... By the way, this 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, you just have to use CSS. I show you in another of my videos how to learn CSS with Webflow.
From now on, when you design a web page, I advise you to use nesting. This will give you a cleaner and more correct structure. As you probably know, Google loves well designed sites :) That's why it's important not to break the nesting rule on Webflow.
Come back to this page whenever you want. Did you find any ideas that I forgot? If so, what are they? Leave a comment below or send an email to firstname.lastname@example.org