@tulsirajput
Submitted
@amar215
@tulsirajput
Submitted
@amar215
Posted
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
@Marvel08-tech
Submitted
Open for corrections
@amar215
Posted
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.
@Krishna4563
Submitted
@amar215
Posted
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
@SebastianFoder
Submitted
@amar215
Posted
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!
@poohmipun
Submitted
After about 4 hours of doing the wrong thing and asking ChatGPT for help, I finally finished the project. π This project really made me realize that "this is 100% not the right way to do it." π© I'm exhausted, and I believe I need to learn more principles to continue.
@amar215
Posted
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!
@iJoel23
Submitted
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.
@amar215
Posted
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
@amar215
Submitted
Tried my best to make it exactly as it was.
A little challenge I faced was when I was positioning the prices.
@amar215
Posted
Thanks foe the suggestion
@apy1412
Submitted
@amar215
Posted
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!
@OmarHashemHegazy
Submitted
Please tell me how I can improve and how to get better
@amar215
Posted
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