Skip to content
OverviewSolutions
3
Comments
5
MH-Rashid
@MH-Rashid

All comments

  • Alex•3,130
    @Alex-Archer-ISubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I did it. And I'm cool. But. I tried use an OOCSS naming convention and I'm not quite happy with the result. Maybe it's because I didn't catch the main idea, or maybe because this approach doesn't really fit there. Guess I should look for more examples.

    I still leave the tag for people, who familiar with this convention, could come here and yell to me about what I did wrong.

    What challenges did you encounter, and how did you overcome them?

    I tried to animate progress bars for summary content and had to use pseudo-elements for this. This in turn required add more custom css properties to manipulate those pseudo-elements via JS. But I'm glad with the result.

    What specific areas of your project would you like help with?

    Open for any suggestions =)

    Result summary page

    1
    MH-Rashid•50
    @MH-RashidPosted 6 months ago

    Wow, this is amazing. I love that you really made this project your own with the animations and JS. The animations and gradients are spot on. Great responsive design for the viewport width, though I would suggest also adding a min-height condition so that you switch to back to mobile view once the window shrinks to the height of the card. The attention to detail is exemplary. Keep it up, brother!

    Marked as helpful
    1
  • MH-Rashid•50
    @MH-RashidPosted 6 months ago

    Great work, buddy. Colours are matching closely to the design and you've made good use of flexbox.

    Suggestions

    • Responsive design (1) Transition to mobile view sooner, ideally once the window reaches the vertical edges of the card in desktop view. The 375px they mention is just the viewport width at which they made the design screenshots, and it serves as a guide for design at that width not necessarily for responsive styling (2) Incorporate min-height condition so that you transition to mobile view once the window height shrinks to the height of the card in desktop view
    • "of 100" is not using the correct font style
    • Make use of transparency to fade out the score bubble towards its bottom
    • Centre the card on the page. Set the height of html to 100%. Convert "body" to a CSS grid or flexbox and make use of the respective positioning properties to centre the card vertically and horizontally. Alternatively, define specific width and height of the card and set its margins to auto and inset to 0 and position to absolute
    • There are some redundant margin 0 and padding 0 since you already set these properties at the start when resetting your css
    • You don’t need another flexbox for .item-container. Just set a margin for either the icon or text to create the gap

    Please mark this comment as helpful if it helped you out 👍 😄

    0
  • MH-Rashid•50
    @MH-RashidPosted 6 months ago

    Suggestions

    • Change to mobile view only once the window has been narrowed down to the width of the card
    • Add a min-height condition to your query to activate for window sizes which are less than the height of the card
    • Not emboldening where required by design
    • Incorporate active/focus state for button click, not just hover. Maybe choose a darker colour than for the hover state
    • Keep css file where it's easy to find, preferably on same level as index.html

    Overall, great work! The relative dimensions for the card, results and summary section, text, boxes as well as the colours -- are very accurate across desktop and mobile

    0
  • MH-Rashid•50
    @MH-RashidPosted 6 months ago

    Hi, the attribution should be at the bottom of the page. The image has the correct gap with the border of the card, but the header and text do not -- they need to be wider.

    Overall, great work.

    0
  • Martins•60
    @MartinsonsSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I started to learn all this and build again.

    What challenges did you encounter, and how did you overcome them?

    For this card only challenge was to remember again how to write CSS. Started to read again basics and slowly it came back. Going forward there will be more challenging tasks to overcome.

    What specific areas of your project would you like help with?

    At this project there isn't any specific area I need help with.

    QR Code component solution

    2
    MH-Rashid•50
    @MH-RashidPosted 6 months ago

    Nice work. I see you've also added a box shadow effect. One way to improve is to have your attribution element at the bottom of the page like a footer.

    0