@ning-sy210
@KozhInna
Submitted
Please share your thoughts on my inner structure of divs. I always struggle how many of them I should use, is it enough or the more I have the better it is? Is there any rules what to keep in mind building components in html.
@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:
<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:
<main> shouldn't be a page-wide element, it should only contain the main content of your web page, as the name implies.<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
@NgocMinhThuNguyen
Submitted
Hi there,
This is an updated solution for this challenge.
I'd really appreciate it if you could give me some feedback on my work.
Thank you 🌻
@ning-sy210
Posted
Hey there, great job on completing this challenge! I see that you managed to match the design very closely, so bonus points for that! If you add padding: 0 8px; to your <p> element, you can match the design even closer! :)
I've taken a look at the CSS that you have written, and I'm not too sure what the max-height: 33rem; is for on your <section> element. I think it's safe to simply remove that line, because the best code is the code you don't have to write 😏
Other than that, great job for using semantic HTML tags! The <main>, <section> and <h1> tags are not very commonly seen in most of these beginner attempts, so here's an extra cookie for you! 🍪
@PedroOliveiraRepositories
Submitted
@ning-sy210
Posted
Hi Pedro, I've gone through your solution, and it seems to me that you do not know how to center an element. I personally know of two ways to do so:
.center {
display: flex;
justify-content: center;
align-items: center;
}
.center {
display: grid;
place-items: center;
}
With these few lines of CSS, you don't have to write any media queries to try and center the element (for the purpose of this challenge). The element will even be centered for a screen that has a 4k resolution!
Also for your title, instead of giving it a <h2> tag, consider putting it into a <h1> instead. There are two reasons for this:
<h2> without a <h1><h1> tag is given to an element that describes the content of the page.For more information on heading tags, you can visit mdn web docs.
I hope you find my comment helpful, and happy coding! :)
Marked as helpful