Skip to content
OverviewSolutions
9
Comments
9
Amar Kosare
@amar215

All comments

  • Amar Kosare•170
    @amar215Posted over 1 year ago

    The challenge looks as it is required by the Frontend mentor.

    I have one suggestion for you. Please change the README file. first, read the instructions in the README file.

    also, make sure to add the screenshot of the project that YOU made. This will make sure that whoever visits your GitHub profile will find that you as a developer follow all the standard procedures and best practices.

    Happy Coding!

    Marked as helpful
    1
  • Amar Kosare•170
    @amar215Posted over 1 year ago

    I think you did not host this challenge on netlify.

    please read the README file from the challenge. there you will find the steps to follow to host the challenge.

    0
  • Amar Kosare•170
    @amar215Posted over 1 year ago

    Hello Krishna,

    You forgot to add the images in your challenge.

    do use picture tag of HTML.

    <picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <source media="(min-width: 769px)" srcset="large-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>

    this was you can show 2 images whenever size changes. this makes your project mobile friendly.

    Marked as helpful
    0
  • Amar Kosare•170
    @amar215Posted over 1 year ago

    You made really nice project. Looks exactly what the frontend mentor challenge looks like.

    You just need to increase the font size of the heading. you can use the font-size property.

    also, You forgot to edit the readme file on GitHub. read the instructions from README there is written that you have to delete the README and make README-TEMPLATE your actual README file. while adding your screenshot.

    this way, whenever anyone sees your GitHub profile. It will look elegant and shows that you follow the best practices. Happy Coding!

    0
  • Amar Kosare•170
    @amar215Posted over 1 year ago

    I took a lot of time to finish this project too. ( I chose this as my first project).

    You made exactly what the front-end mentor wants you to make.

    there is only one thing that needs an update. 'the font color' of the card and the background color of the button. this will be really easy to fix. use font-color and background-color properties and you made exact replica of the challenge.

    and please don't quit. You will make a lot of progress in the future. just keep on doing challenges even if it takes weeks to finish one. you will learn a lot. Happy Coding!

    1
  • Joel Leon•100
    @iJoel23Submitted over 1 year ago
    1. Changing the image from mobile to desktop was a challenge for me, I didn't remember how to do it, but after some research, I could make it.

    Feeling very comfortable with the result and my writing code because I started using BEM to name my classes and make my code more understandable for others.

    Product preview

    2
    Amar Kosare•170
    @amar215Posted over 1 year ago

    Your Code is very well written. (for my eyes, at least 😂).

    Just learned that we can use <picture> tag in HTML to switch images. in <picture> tag we give 3 elements. 2 are sources to images giving them max-width and min-width for responsiveness. and 3rd element is <img> to view the image.

    I almost forgot that we can use flex to center the 'Price' section and 'Button' section which is that 'cart' SVG and 'add to cart' text.

    Above all, the solution was great!

    Marked as helpful
    0
  • Amar Kosare•170
    @amar215Posted over 1 year ago

    Thanks foe the suggestion

    0
  • Amar Kosare•170
    @amar215Posted over 1 year ago

    Your CSS code looks well-structured and organized.

    Good use of CSS resets- The initial code block using *, *::after, and *::before to reset box sizing and margins is a good practice to ensure consistent rendering across different browsers.

    Consistent use of units- It seems you are using a mix of absolute (px) and relative (rem) units. It's generally recommended to use relative units for better scalability across different screen sizes and devices. Consider using relative units consistently throughout your code.

    Consider adding comments- While your code is relatively easy to read and understand, adding comments can further clarify the purpose of specific sections or styles, making it easier for others and your future self to maintain the code.

    The solution you posted was accurate. Happy Coding!

    0
  • Amar Kosare•170
    @amar215Posted over 1 year ago

    The image of the QR is not uploaded. and the Heading font is very small. also, use the text-align property to align the paragraph text in the center. give padding to paragraph that way the text will keep away from the borders. add a margin-top to the heading to keep the distance from the QR image. this will make your component look like the design provided by the front-end mentor.

    Marked as helpful
    0