Skip to content
OverviewSolutions
29
Comments
12
Oluwalolope Adeleye
@Oluwalolope

All comments

  • Oluwalolope Adeleye•600
    @OluwalolopePosted about 2 months ago

    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
    0
  • Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    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
    0
  • Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    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
    0
  • Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    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👍

    0
  • Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    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
    1
  • Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    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 👨‍💻

    0
  • gabepalomin•10
    @gabepalominSubmitted over 1 year ago
    1. One thing I found difficult was sort of formatting my div elements in CSS as it what somewhat of a hassle. I also needed to know how I should tackle CSS for any HTML webpage since I prefer to go in a reasonable and manageable order. One area of code I am unsure about is the padding on the text as I used very specific padding tools for them, but I may want to se a better way of doing so. One question about best practices is how should I name my classes in each HTML element? and when should I use id?

    QR code using HTML and CSS

    1
    Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    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.

    • Place your CSS resets in a separate file: I noticed when going through your code that you had a lot of codes trying to remove the default padding, font sizing, margins and etc. Which is very good but I recommend you paste all those codes into a new CSS sheets and link it to your HTML. To make your code cleaner. What I personally use a CSS reset by Eric Meyer. Then I do something like this 👇

    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

    • Use shorthand when writing padding and margin: Instead of writing padding-left, padding-top, padding-right, padding bottom. Just simply use padding. Let me give an example:

    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 👨‍💻😄

    0
  • Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    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👨‍💻😄

    0
  • Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    Hey👋, Great work! Really like your solution😊. I just have few suggestions for you:

    • I found a Bug in your code: When I previewed the site I immediately saw a " | " in the site, which shouldn't be there. So after analysing your code, I found the problem. In your code you wrote this <div class="container">|. If you write it this way instead <div class="container"> the bug will be fixed.
    • Make it a habit to leave comments in your code: It is really important because when you leave your code for a long time, you will forget what most of the code you just wrote does. So a comment Is like writing a note to your future self to make it easier for you to understand. Also if you are working in a team, it will help your team members understand what your code is all about and lead to an increase in productivity because they will spend less time reviewing your code.

    Once again Congratulations 🎊 on completing the challenge. I really hope you found this helpful 🤝.

    Happy Coding 👨‍💻

    Marked as helpful
    1
  • Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    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👨‍💻

    0
  • ThanHtike（テンタイ）•110
    @CGM-ThanHtikeSubmitted over 1 year ago

    Thanks for checking this out

    • This is my second challenge here. Implemented with pure html css.
    • I used css variables for font sizes and colors for code flexibility.
    • Grid for main layout and flex for some components.
    • This time, I'm going with mobile first approach.
    • "If you have any suggestions or feedback for my code, please feel free to comment." I would greatly appreciate all feedback.

    Product Preview Card using pure HTML CSS

    2
    Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    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
    0
  • Chayne White•70
    @ChayneWSubmitted over 1 year ago

    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!!

    QR-Component

    1
    Oluwalolope Adeleye•600
    @OluwalolopePosted over 1 year ago

    Hey! Congratulations on completing the challenge 😄 I have a few suggestions that you may find helpful.

    1. Add padding to your p-tag by doing this:
      -In your HTML <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
    1