Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

Order summary component

Herson•220
@Hersonmei
A solution to the Order summary component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hi,

This is my first challenge that it took me a while to build and get to finish.

I'm a beginner and I don't have much knowledge about good practices. If you can evaluate my code and give you some initial good practice tips I would be very grateful.

I also had difficulty in the font-weight of the title that didn't match the model despite having bold. How can I fix this?

Thank you very much!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Remus D. Buhaianu•3,125
    @remusbuhaianu
    Posted over 3 years ago

    Good job on completing your first challenge, Herson!

    I know it can be really intimidating at first, but with each challenge you complete, you become more confident in your coding skills. So, well done on completing this Frontend Mentor challenge!

    I had a look at your live solution and I also looked through your code and I have a few suggestions / observations I'd like to share with you.

    In no particular order, here they are:

    1. As @Drougnov pointed out, when you imported the font from Google Font, you only selected the 300 weight and that's why you can't use the bold weight in your design. Add the 600 or 700 weight to your import and it should work just fine after that.

    2. A best practice for CSS is to reset the margin and padding of all elements using the * selector. You can also add the border-box property which will make sure that the padding and margin are added to the element's total width and height. You can see an example here: https://stackoverflow.com/questions/46923610/css-resetting-margin-and-padding/46923672

    3. You might want to look into BEM methodology for a neat way to structure your HTML classes. If not, just try to keep in mind that your code should read like prose. Always use classes that can be understood by other developers, if they were to read through your code.

    4. Instead of using absolute values like px, try to implement relative units like rem. I saw you've used vh on the body element, but there was no reason to set a 100vh height on the body in that case.

    5. As @skyv26 pointed out, you don't have any media queries which means your project won't be responsive. You need media queries to make your project look good and structured no matter the device you use to see the website.

    All in all, you've done a great job for your first project. I also suggest you have a look through https://www.frontendmentor.io/resources and use those resources to improve your skills as a developer.

    Keep up the good work and looking forward to seeing more of your projects here on Frontend Mentor!

    Marked as helpful
  • ROCKY BARUA•1,090
    @Drougnov
    Posted over 3 years ago

    Hello, @Hersonmei Good job with the layout.

    I think you selected only 'font-weight=300' from the google font. I'm not sure though. You may check that out.

    Marked as helpful
  • Aakash Verma•9,500
    @skyv26
    Posted over 3 years ago

    Hi! Herson, I just checked your work. You made it, it a really good initiate towards your progress.

    I noticed some issues.

    1. You Annual plan font size is too bigger than normal, either change your price h2 size or instead of h2 you can simply use p tag and adjust size with font-size property.

    2. You have not implemented media queries. Always keep in mind that more than half of the world try to open any website on their phone first. If your mobile response is not good then nobody will open that website on their laptop too.

    I hope you understand. Soon I will see your next solution.

    Good Luck

    Marked as helpful
  • Leonard Appelgryn•320
    @KaptainCS3
    Posted over 3 years ago

    Good job bro Concerning the bold issues you had with your code, also go through the sample style guide it help me alot. I go suck figuring out color just by look at the design, but when I discovered the style guide it became more easier.

    Marked as helpful
  • Renato Gonçalves•30
    @renatoknot
    Posted over 3 years ago

    @Hersonmei Great job! The only thing I noticed was missing was the button hovers. Detailed colors to use on Hover are in Design folder, file "active-states.jpg"

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub