Skip to content
OverviewSolutions
23
Comments
6

beniusis

@beniusis400 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • beniusis•400
    @beniusisPosted over 1 year ago

    Hey 👋 Congratulations on completing the challenge!

    The text overflows because you have set the card's height as 34rem. To fix that, you can set height: fit-content.

    1
  • beniusis•400
    @beniusisPosted over 1 year ago

    Hey 👋 Good job on completing the challenge!

    A few things worth mentioning:

    • You should use only one <h1> tag per page. You can read more about the accessible heading structure here.
    • You should not leave empty alt attributes for images. It is read by screen readers for people with visual impairments and is better for SEO. You can read more about it here.
    • You could use semantic elements like <main>, <footer>, <header> to improve accessibility and achieve better organization. For example, switch <div class="containt"> to <main class="containt">.

    I hope the feedback was helpful. Happy coding! 😀

    Marked as helpful
    0
  • beniusis•400
    @beniusisPosted over 1 year ago

    Hey 👋 Good job on finishing the challenge! To answer your question, you can switch body property height: 100% to min-height: 100vh to center the component.

    Marked as helpful
    0
  • beniusis•400
    @beniusisPosted over 1 year ago

    Hey 👋 Good job on finishing the challenge! I know there are stuff to be corrected, so here's a few things worth mentioning:

    • You can set letter-spacing property in CSS instead of using non-breaking space entities here: <p class="perfume"> P&nbsp; e&nbsp; r&nbsp; f&nbsp; u&nbsp; m&nbsp; e</p>.
    • <strike> tag is not supported anymore in HTML5. Instead use <del> tag for the previous price of the product.
    • You should not use <br> tags just for the sake of leaving gaps between the different elements. Read more about its purpose here.
    • You should use semantic elements like <main>, <header>, <footer> to improve accessibility and achieve better organization.
    • To vertically align current price and old price elements, you could wrap them both in one <div> and use flexbox property align-items: center. You can read more about the usage of flexbox here. While reviewing your code, I noticed that you overuse position: absolute property. Personally, I would rather learn flexbox and implement its usage for better experience.
    • To create a responsive web page, you can use media queries and set different properties to different elements. Here's an article with basics of responsive web design.

    Happy coding! 😀

    Marked as helpful
    4
  • beniusis•400
    @beniusisPosted over 1 year ago

    Hey 👋 Good job on completing the challenge! A few things that caught my eye:

    • Why is there two min-height properties for body? I think you forgot to delete one.
    • After 1440px (at 1441px and up) the layout is shown as for mobile one.
    Marked as helpful
    0
  • beniusis•400
    @beniusisPosted over 1 year ago

    Hey. Great job on completing the challenge! I did not look through the technicalities but judging from the site preview, calculation of the age is wrong. For example, if you put the date as January 5th of 2024, the result you get is as follows: -1 years -4 months -22 days. The inputs for day and month are switched.

    Marked as helpful
    1