Skip to content
OverviewSolutions
27
Comments
8
Benevolent
@bene-volent

All comments

  • Benevolent•490
    @bene-volentPosted over 1 year ago

    Hey. Good work. Seems like it working. Sorry if I am wrong but, if you are a beginner, I would suggest you to try easier ones where you will learn from basics to above.

    The Odin Project is a good curriculum. Try to follow it. 😄

    0
  • Benevolent•490
    @bene-volentPosted over 1 year ago

    Loved your code organisation. Forked it for future reference😃

    0
  • Mykyta Kavetskyi•240
    @OniOddSubmitted over 1 year ago

    Hello, everyone. I have completed this challenge. But I still have some doubts. And here they are:

    1. In this project, I built an HTML structure using the BEM methodology. Did I do everything right?
    2. Also in this project I used relative values like em, rem. Did I use them correctly in the project?

    Responsive QR code component solution

    1
    Benevolent•490
    @bene-volentPosted over 1 year ago

    As a fellow BEM enjoyer, I approve of your css solution.

    • Do take the attribution out of the card.
    • Study about semantic and everything is good.

    Seems like you are new, I would recommend taking your time on solution and not rush them. FrontendMentor has a great sorting method, so take problems which are easier one at time and take good amount of time analysing your design. In the beginning, I was rushing through them and got stuck, so take your time and enjoy the Learning journey😀😀

    Marked as helpful
    1
  • Benevolent•490
    @bene-volentPosted over 1 year ago

    Hi there, congrats on completing the solution. The first time is always hard.

    Few recommendations if you won't mind:

    1. As the following is a component (assuming a part of larger component), consider enclosing it in a div or an article in itself for increasing modularity.
    2. As you are using button[type=submit], you should consider using a form where the ratings are actually radio buttons with each one storing a rating value and using attached label to show the values instead of button as buttons are only for pressing and not having a [Pressed or Active or Checked] state. check out my solution if you need an example. I also learnt it from someone else.
    3. Try validating the form, for example, I can just press submit and it allows me to submit. Try validating whether a rating is already selected or not. If not don't show second screen and tell the user that a rating should be selected. This can be done by disabling by lightening the color of submit button or having an animation on it.

    Try them one at a time if you have time, and re evaluate your solution. Everyone learns one step at a time

    Marked as helpful
    0
  • MuhammadZaidKhan•40
    @MuhammadZaidKhanSubmitted over 1 year ago

    Suggestions and improvements are really welcomed and please let me know if media queries are working fine because on the laptop it's working fine but if there is some error then let me know, please.

    Product-Preview-Card-Component

    1
    Benevolent•490
    @bene-volentPosted over 1 year ago

    Hi there. Congrats on completing the solution.

    It seems like you have made a mistake while importing the font families. Instead of giving you some advice, which might seem complex, you should go through solutions submitted by me and others for this problem and use the devtools to inspect. It would great learning experience. Hope you have a good day.

    Marked as helpful
    1
  • Benevolent•490
    @bene-volentPosted over 1 year ago

    To get a staggered effect on cards instead of using margin and breaking some flow try using grid and its grid-row and grid-column property. I learnt it from Kevin Powell, but I can't find the video. You can check out my solution and if you are not able to understand, try looking for the solutions online.

    Other than that, awesome solution.🙂🙂

    [Edit] Looked at your previous solutions. You already know how to do that, so try to make it using grid!

    Marked as helpful
    1
  • Anthony Braund•110
    @abraundSubmitted over 1 year ago

    Deceptively tricky, the font Overpass has padding underneath its descender, so whenever you vertically center it looks off. Took a while to discover this. Had problems with the star I should investigate, it also would not center, but it harder to inspect as I made it a pseudo. My stamina to un-pseudo it and look waned as I really did spend ages puzzling over the font alignment. Anyway, padded everything to victory.

    Interactive Rating Component

    1
    Benevolent•490
    @bene-volentPosted over 1 year ago

    Hi there. Congrats on completing the challenge. Your stylesheets is very clean and concise.

    Everything looks good. So, I would advise you to explore forms. As we are rating something, it brings the opportunity to use radio input which in turn comes with form and its submit actions. Semantically, it would be better to use a form and a radio group.

    Instead of using display : none, you can use visibility : hidden which wont cause reflow of DOM. But that is not a major issue, but I prefer it that way. You can look up regarding this concern. But overall, great job!! 😊

    Marked as helpful
    1
  • Benevolent•490
    @bene-volentPosted over 1 year ago

    Congrats on completing the challenge

    There are 3 common ways to center and 1 additional way which is not advised to use anymore because some of the new properties

    1. Horizontally: You can set a max-width or a fluid width on a container thats wraps you content and setting the margin: [vertical-margin] auto or margin-inline : auto. This should center it horizontally
    <main>
<div class="container">
<div class="content-box">Content</div>
</div>
</main>

    .container{
max-width : 20rem;
margin-inline : auto;
}
    1. In a Box:
    • Grid: Making the parent grid and using place-content property to center all elements. But the parent has to have a height larger than the content
    .center-content{
display:grid;
place-content:center;
}
    • Flex : Follows the same principle as previous one but has some caveats of child becoming a flex-item;
    .center-content{
display:flex;
justify-content:center;
align-items:center;
}

    You can look up resources on MDN and W3school for easier understanding

    0