Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summery 1.0

@Shatango

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Its my first project. Even tho i posted one before this... i wanted to rewrite it all but decided to keep it as it is!

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. Layout looks good in general.

Marlon already suggested some great feedbacks, just going to add some in here as well:

  • Always have a main element that will wrap the whole main content of your webpage. main element helps users to properly navigate your website. On this one, the section could be replaced with main.
  • The alt for the vector image of the card should have used alt="" on it. If an image only acts as a decoration, use alt="" on it, but if the image adds content, then use a meaningful alt value.
  • If you use a heading tag, make sure that the lower level heading tag is present. In your case, you use h4, but there are no h2, h3 present before it, this creates an issue, so when using heading tag, make sure to use it incrementally by one, start from h1 to h2 to h3.
  • The other 3 interactive elements on this one could have used a tag since this component is not really a form where button are used.
  • The proceed to payment, there is no need to use p tag inside it, just use the p tags text as the text of the element itself.

Aside from that, really great job on this.

Marked as helpful

1

@MarlonPassos-git

Posted

some suggestions to improve your project:

  • In the background add this code to make it the same as the summer received
    background-size: cover; // remove this property from your code
    background-repeat: repeat-x; // Here it will repeat only horizontally
    background-color: #e0e8ff;

  • In the original design, there was no border on the card

  • Add a background color to the plan element

  • Add font-weight: 900; to the title

  • Add cursor:pointer to hover of buttons, to change the mouse when over the buttons

  • Define a width for the paragraph so that it is not too spaced

  • From a survey about responsive units, your project doesn't do well on mobile screens, if you used things like max-width / min-width and other tags it would make your site more responsive

  • Take a look at your accessibility and html bugs report, there are very interesting things there that you can use to improve

-I saw that in some elements you used id, try to avoid using ids to style elements always in preference to classes

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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