Skip to content
Submitted 12 months ago

First project with CSS and HTML

Inna Kozhina•10
@KozhInna
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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.

Community feedback

  • Scott Ning•170
    @ning-sy210Posted 12 months ago

    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:

    1. It adds more layers to your DOM tree, which makes things harder to read due to higher levels of indentation, and
    2. 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:

    1. The <main> shouldn't be a page-wide element, it should only contain the main content of your web page, as the name implies.
    2. 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
    3
    Inna Kozhina•10
    @KozhInnaPosted 12 months ago

    @ning-sy210 Hi Scott, thank you for stopping and leaving your clear and in detail feedback. I will take those into account.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord