@Maha-Mustafa
Submitted
@Oluwalolope
@Maha-Mustafa
Submitted
@Oluwalolope
Posted
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
Submitted
please give me a Suggestion.
Thank you.
@Oluwalolope
Posted
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
Submitted
first one. feedback needed please. thank you.
@Oluwalolope
Posted
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
Submitted
This is my first challenge from a Frontend mentor. I did my best to imply HTML and CSS. I'm willing to receive any feedback from this community.
@Oluwalolope
Posted
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
@maroiane2
Submitted
@Oluwalolope
Posted
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>
<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 👨💻
@gabepalomin
Submitted
@Oluwalolope
Posted
Hello 👋. My name is Monkey D. Luffy, the man who will become the future king of the pirates🤠
I wanted to congratulate you on completing the challenge. You did a great job! I just have a few suggestions for you.
This is my css reset
<link rel = "stylesheet" href = "css-reset.css">
This is my own stylesheet
<link rel = "stylesheet" href = "style.css">
Please the order is very important. The css reset MUST be linked before your own personal stylesheet
Instead of:
Padding-top: 20px; Padding-right: 10px; Padding-bottom: 20px; Padding-left: 20px;
You can simply right it in shorthand as:
Padding: 20px 10px 20px 20px;
so the first value you put is the top , right, bottom, left. Basically it starts at the top then moves clockwise. The same applies for margin as well. This method will make your code shorter and make you faster.
Once again Congratulations 🎊 on completing the challenge. I really hope you found this helpful 🤝
The One Piece is Real!!!
Happy Coding 👨💻😄
@CodageWithRahul
Submitted
@Oluwalolope
Posted
Hello 👋, Great attempt at the challenge. I know you didn't ask for feedback but nevertheless I have some suggestions for you😄.
It is not advisable to leave the "alt" empty: The "alt" helps to give the search engine a description about what the image is all about. It should describe what the image is about. In your code I noticed you wrote this <img src="/images/image-qr-code.png" alt="">
but I suggest you write something like this instead <img src="/images/image-qr-code.png" alt="QR Code that takes you to frontend mentor.io when scanned">
Use Header tags instead of assigning a class to a paragraph tag: I noticed that in your code you used <p class="p"> Improve your front-end skills by building projects</p>
. Instead use a h1 tag like this: <h1> Improve your front-end skills by building projects</h1>
. This is considered best practice because the header tags are specifically used for headings. We mainly assign a class to a p-tag when we have multiple paragraphs in a website and we want to specifically style a paragraph.
Using rems for font-sizing: A major drawback of using pixels for fonts is that it is too static. If a visually impaired person is trying to read your website they need to increase the font size in the browser's setting but that is where the problem is. That is where rems
come in. rems
give the user power to control the font sizing and gives better user experience. By default 1px = 0.0625rem so you can do the calculations and input the rem value.
Once again Congratulations 🎊 on the challenge. I hope you found this helpful 😊🤝
Happy Coding👨💻😄
@arekuxander
Submitted
I would like your comments to continue learning
@Oluwalolope
Posted
Hey👋, Great work! Really like your solution😊. I just have few suggestions for you:
<div class="container">|
. If you write it this way instead <div class="container">
the bug will be fixed.Once again Congratulations 🎊 on completing the challenge. I really hope you found this helpful 🤝.
Happy Coding 👨💻
Marked as helpful
@mirshod455
Submitted
Could you recommend me the right way of structurize my css code.
@Oluwalolope
Posted
Hey, Great work completing the challenge😊. I have a few suggestions
Don't use Pixels for Font-Sizing: Pixels are absolute values. They do not vary, if a visually impaired person is trying to go through your site they may need to increase the font size in their browser settings, but that is where the problem comes in. The reader won't be able to increase the font size of the text if it is in pixel. That will affect the user experience. It is best to use rem
instead of px
for fonts. With rem you give the power over to the user to adjust the sizing of texts to make it readable. By default 1px = 0.0625rem
. In your code I noticed you used 15px for the paragraph. Instead use 15 * 0.0625= 0.9375rem
Your CSS Code is clean but I'll advise you to add comments to your code to make it easier to understand what each code is for
Then it is often considered best practice to use BEM notation for CSS sheets : To find out more on BEM check this site BEM 101
Once again Congratulations on completing the challenge. I hope you found this helpful 😄
Happy coding👨💻
@CGM-ThanHtike
Submitted
Thanks for checking this out
@Oluwalolope
Posted
Hello👋
Your solution was top notch😄!!! It looks so smooth on mobile😊. I have just one suggestion you may find helpful.
Your code commenting in your HTML: Although this doesn't affect the outcome of the code. I found understanding your code comments in your HTML file a little hard. Simply because you put the comments after the lines of codes. I feel it Is best to put your code comments above the component you are working on. Think of it this way: Your comment is like the chapter title of a novel, most reader are used to title then content not content then title. This way other people trying to review your code can easily understand it.
I hope you found this feedback helpful😄
Once again, Congratulations 🎊 on completing the challenge
Happy Coding 👨💻🤝
Marked as helpful
@ChayneW
Submitted
Hello Everyone!! as my first frontend design, I would be very grateful on any tips or suggestions for any improvements and concepts that I should hone in to make my design better!!
@Oluwalolope
Posted
Hey! Congratulations on completing the challenge 😄 I have a few suggestions that you may find helpful.
<p> Scan the QR code to visit Frontend mentor and take your coding skills to the next level </p>
In your CSS
p { Padding-left: 20px; Padding-right: 20px; Color: Gray; }
Please feel free to adjust the px values until it looks desirable to you
2.Change the font color of the p-tag to match the design: In the CSS above I added Color: Gray;
.
It will help change the color of the text from black to a lighter Gray color.
I hope you found this information helpful! Once again Congratulations on completing the challenge 😄
Happy Coding 😄👨💻
Marked as helpful