@ning-sy210
Posted
Hi Inna, good job for completing the challenge and I see you have managed to get it very close to the design!
To answer your question of whether having more <div>s is better, the general answer is no. Ideally, you want to not clutter your HTML structure with <div>s that are unnecessary. There are two reasons for this I can think of:
- It adds more layers to your DOM tree, which makes things harder to read due to higher levels of indentation, and
- Debugging also becomes harder, as more layers of
<div>s would mean that there is an increased tendency for styles to be applied on each of those<div>s. And when things start to break in the UI, it is hard to identify which style is causing the issue and sometimes it could be a combination of both the CSS styles and the HTML structure that you have! You won't notice it in this project because there are hardly any elements to consider, but in a much larger project, this will be more pronounced, and things can spiral very quickly out of hand.
With the above said, here's how I would change the structure of the <body> for this project:
<body>
<div class="root">
<main>
<img />
<h1></h1>
<p></p>
</main>
</div>
</body>
And for the CSS:
.root {
display: flex;
justify-content: center;
align-items: center;
// other styles
}
main {
text-align: center;
// other styles
}
img {
margin-bottom: some value;
// other styles
}
h1 {
margin-bottom: 20px;
// other styles
}
p {
margin-bottom: 30px;
// other styles
}
h1, p {
padding: 0 12px;
}
There are a couple of differences here:
- The
<main>shouldn't be a page-wide element, it should only contain the main content of your web page, as the name implies. - I have also removed a number of
<div>s that I thought was unnecessary. Most of them were added because you were trying to add some paddings or margins, but why not just add them directly to the elements themselves instead of creating a<div>and applying margins to that?
I think a rule to keep in mind when you are programming in general, not just for web dev is to keep things simple, because the best code is the code that is not written :)
Hope my comment is useful, and happy coding!
Marked as helpful
@KozhInna
Posted
@ning-sy210 Hi Scott, thank you for stopping and leaving your clear and in detail feedback. I will take those into account.
