@Peacefsps
Latest solutions
Latest comments
- @Oluwalolope
Great work! However i suggest you add an attribute of " step='0.01' " to the number input field, this will allow the user to input decimal values as well. Also can you make it such that the results only show when the user puts correct values. If I click the submit button without putting correct values, it shows NaN.
Marked as helpful - @Maha-Mustafa@Oluwalolope
Hey👋. Congratulations on completing the challenge. Here are a few suggestions for you😄
-
Use Semantic HTML tags instead of assigning classes to divs: I noticed that in your solution. You had a lot of divs that were not semantic. It is considered best practice to use semantic html as much as possible becomes it is more accessible than non-semantic html. For more insights on this kindly click this Semantic Tags
-
Put meaningful descriptions in your alt text: In your code I discovered you wrote this
<img class="qr-img" src="images/image-qr-code.png" alt="QR code image">and it is good but the problem with the alt text is that it is too vague. It can be interpreted in various ways. Is it a QR for E-Payment? Is it a QR for a file? What does the QR do exactly? These are questions that people may ask when seeing the alt description. I advice you use something like this instead<img class="qr-img" src="images/image-qr-code.png" alt="QR code image that takes you to frontend mentor.io">. It may not look much of a difference but it will improve your ARIA (Accessible Rich Internet Application) which is basically how well your website helps those with disabilities. -
Use rems and ems for sizing and not pixels: While there is no syntactic problem with using Pixels. Pixels are too static, they don't change. If your user tries to increase the text size from the browser settings, it won't increase since px are absolute values. Instead use rems which are Relative units to improve user experience. By default 1px = 0.0625rem. So instead of using 15px use
15*0.0625 = 0.9375rems
Once again I want to congratulate🎊 you on completing your first frontend mentor challenge. Looking forward to see your next challenge submission 😄.
I really hope I was able to help you. Feel free to ask any questions for further clarification. This community is designed to help.
Happy Coding 👨💻👋
Marked as helpful -
- @RKanna@Oluwalolope
Hey 👋,
Great work with your challenge it looks really good. I have a few suggestions for you.
-
Don't leave the <alt> text-empty: It is highly recommended not to leave the alt text blank because it isn't considered best practice. If a person with visual impairments is going through your site, such person will need assistance like a screen reader. The screen reader reads out the alt text of the image. It is basically a description of your image and It is very important. Your alt descriptions were to vague.
-
Use Media Queries to make your website responsive: Your site looks amazing on desktop or screens with larger displays. But it doesn't really look great on phones. That is where media queries come in🦸♂️🦸♂️🦸♂️. It is used as a tool to make sites responsive. Right now your site has a fixed dimensioning irrespective of the screen size but with a media query it will be more interested in the screen size. Kindly check here for further clarification Media Queries. Your site is a bit narrow on phone view
Once again Congratulations 🎊 on completing your first frontend mentor challenge. I really look forward to see your next challenge submission 🔥. I hope you found this helpful😄. Goodluck👍
Marked as helpful -
- @metallicatzach@Oluwalolope
Hey 👋,
Great work with your challenge it looks really good. I have a few suggestions for you.
-
Don't leave the <alt> text-empty: It is highly recommended not to leave the alt text blank because it isn't considered best practice. If a person with visual impairments is going through your site, such person will need assistance like a screen reader. The screen reader reads out the alt text of the image. It is basically a description of your image and It is very important.
-
Use Media Queries to make your website responsive: Your site looks amazing on desktop or screens with larger displays. But it doesn't really look great on phones. That is where media queries come in🦸♂️🦸♂️🦸♂️. It is used as a tool to make sites responsive. Right now your site has a fixed dimensioning irrespective of the screen size but with a media query it will be more interested in the screen size. Kindly check here for further clarification Media Queries.
Once again Congratulations 🎊 on completing your first frontend mentor challenge. I really look forward to see your next challenge submission 🔥. I hope you found this helpful😄. Goodluck👍
-
- @oliviaphyu@Oluwalolope
Hey👋. Congratulations on completing the challenge. Here are a few suggestions for you😄
-
Use Semantic HTML tags instead of assigning classes to divs: I noticed that in your solution. You had a lot of divs that were not semantic. It is considered best practice to use semantic html as much as possible becomes it is more accessible than non-semantic html. For example you used
<div class="attribution">for the ending of your page. It would have been better to use the Footer tag instead. For more insights on this kindly click this Semantic Tags -
Put meaningful descriptions in your alt text: In your code I discovered you wrote this
<img class="qr-img" src="images/image-qr-code.png" alt="QR code image">and it is good but the problem with the alt text is that it is too vague. It can be interpreted in various ways. Is it a QR for E-Payment? Is it a QR for a file? What does the QR do exactly? These are questions that people may ask when seeing the alt description. I advice you use something like this instead<img class="qr-img" src="images/image-qr-code.png" alt="QR code image that takes you to frontend mentor.io">. It may not look much of a difference but it will improve your ARIA (Accessible Rich Internet Application) which is basically how well your website helps those with disabilities. -
Use rems and ems for sizing and not pixels: While there is no syntactic problem with using Pixels. Pixels are too static, they don't change. If your user tries to increase the text size from the browser settings, it won't increase since px are absolute values. Instead use rems which are Relative units to improve user experience. By default 1px = 0.0625rem. So instead of using 15px use
15*0.0625 = 0.9375rems
Once again I want to congratulate🎊 you on completing your first frontend mentor challenge. Looking forward to see your next challenge submission 😄.
I really hope I was able to help you. Feel free to ask any questions for further clarification. This community is designed to help.
Happy Coding 👨💻👋
Marked as helpful -
- @itsW0LFIX@Oluwalolope
Hello 👋. Really nice work you did there.
I found a little bug in your code. You didn't declare the DOCTYPE of your code. For example
<!DOCTYPE html>- Then the qr image is not a decoration: The alt should inform the user of why it is there.
Try using something like this:
<img src="image/image-qr-code.png" alt="QR code to frontend mentor .io">
Once again Congratulations 🎊 on completing the challenge. I really hope you found this feedback helpful 😄
Happy Coding 👨💻
- Then the qr image is not a decoration: The alt should inform the user of why it is there.
Try using something like this:
