Submitted over 2 years ago

HTML, CSS

nirbhay• 70

@nirbhay12345

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Give me your best shot at what went wrong

Community feedback

Katrien S• 1,070

@graficdoctor

Posted over 2 years ago

Change all the id's into class. id's are mostly being used when you either need to give an element a higher specificity, or when working with javaScript. “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.

HTML id Attribute: The id attribute is a unique identifier which is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element.

HTML class Attribute: The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.

Same for the camelCasing you do in your id's. camelCasing is usually also limited to javaScript, in order to have a visual difference in the code.

As far as your code go, I like it. Though, I see that you set the min-width to 375px as is being suggested in the task, but there is still many phones which work on smaller screens, like the iPhone SE. So, maybe set your min-width a bit smaller.

Marked as helpful

nirbhay• 70

@nirbhay12345

Posted over 2 years ago

@graficdoctor yes I get what you are saying here and will definitely look in to suggested changes.

Juveria Dalvi• 1,375

@JuveriaD

Posted over 2 years ago

Use semantic tags like main,footer also use h1 for heading

<body>
<main>
  <div id="mainDiv">

    <div id="image">
      <img 
        id="pattern"
        src="./images/illustration-hero.svg"
        width="200"
        height="200"
        alt=""
      />
    </div>
    <div id="content">
      <h1 id="title">Order Summary</h1>
      <div id="para">
        You can now listen to millions of songs, audiobooks, and podcasts on any 
        device anywhere you like!
      </div>
    </div>
    <div id="subDiv">
      <img id="musicSVG" src="./images/icon-music.svg" alt="">
      <div id="AnnualPlan">
        <span>Annual Plan</span>
        <span id="price">$59.99/year</span>
      </div>
      <a href="#" id="changeLink">Change</a>  
    </div>
    <button id="button">Proceed to Payment</button> 
    <div id="cancel">
      Cancel Order
    </div>
  </div>
</main>
<footer>
    <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">Your Name Here</a>.
    </div> 
</footer>
</body>```

Marked as helpful

nirbhay• 70

@nirbhay12345

Posted over 2 years ago

@JuveriaD Yes, I will make those changes it seems good to have your html semantic

Please log in to post a comment

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