Skip to content
OverviewSolutions
17
Comments
70
Muhammadh
@Mr-jaw

All comments

  • Petra Zemanová•20
    @Terra42Submitted over 1 year ago

    What tools do you use to make sure your code solution is "pixel-perfect" when you don't have access to the measurements in design files?

    Single price grid component

    2
    Muhammadh•1,140
    @Mr-jawPosted over 1 year ago

    Hello,

    I'm not sure about Mac, but in Windows, there is a software that I personally use and find extremely helpful. It is called "PowerToys," developed by Microsoft Corporation. You can install it through the Microsoft Store. There is an option called "Screen Ruler" which will help you get more accurate measurements. It also has many other useful functionalities that you may find interesting.

    Marked as helpful
    0
  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulations on completing the challenge

    here is a quick fix to center the component at the center of the screen

    1. in the body element remove margin-top: 10rem;

    2. In the body element add the following lines of codes.

    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
}

    This will make the component position at the center of the screen 👍

    I hope this was useful 😊

    HAPPY CODING

    1
  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello

    Here are some tips that could improve the code

    HTML 📄

    • Since the rating buttons are a kind of input. rather using a link (<a> tag) you can use <input type="radio">. This will help screen readers identify this as input.

    CSS 🎨

    • give your .rating-container a width of 34em to make it look close to the desing provided.

    Oher than that Your solution looks perfect

    I hope this was useful 😊

    KEEP GRINDING

    Marked as helpful
    0
  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulations on completing the challenge

    HTML 📰

    • replace <div class="card"> with <main> tag, and replace <div class="attribution"> with <footer> tag to fix accessibility issues.

    • avoid using hyphens or underscores in the alt attribute of the <img> tag. Since it should be humanly readable text.

    • replace the <h3> tag in <h3>Equilibrium #3429</h3> with the <h1> tag since the project should have a top-level heading. and in <h4>0.041 ETH</h4> and <h4>3 days left</h4> replace the <h4> tag with <h2> tag. Also, replace the <h5> tag in <h5> Creation of <span id="name">ayush namdev</span></h5> with the <h3>. So the headings come in an order. This will improve accessibility.

    CSS 🎨

    • Use relative units such as em or rem for margin, padding, width, and height. most preferably rem for font size. avoid using px since it is an absolute unit.

    • It is a good practice to use CSS custom properties. learn more about it here

    Also here is a quick fix to center the card to the middle of the page

    1. Inside the .card selector, remove margin: auto;

    2. and add the following lines of codes to the body element

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0;
}

    This should fix it 👍

    I hope this was useful 😊

    HAPPY CODING

    Marked as helpful
    0
  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulations on completing the challenge

    *here is a quick fix to center the number in the middle of the circle

    ⫸ In your style.css inside .rtng-btn element selector

    • remove padding-top: 0.2rem;

    • add width: 3em;

    now it should fix the centering issue and create a perfect circle 🔥👍

    Here is something I noticed in your project that needs a fix

    • The user shouldn't be able to submit a rating without selecting any. But, if you notice in your implementation when you click the submit button. It just displays You selected out of 5. But we don't want that to happen. Users shouldn't be able to submit without selecting a rating.

    Follow this quick fix to overcome the issue 👇

    • In the index.js file in line 7 we have the event listener on submit button

    replace

    sbmtBtn.addEventListener("click", function () {
        thankYou.classList.remove("hide");
        mainBox.classList.add("hide");
    });

    with this

    sbmtBtn.addEventListener("click", function () {
    if (rating.innerText === ''){
        
    } else {
        thankYou.classList.remove("hide");
        mainBox.classList.add("hide");
    }
        
    });

    We are basically telling if the actual rating is empty then do nothing, if it has a value selected display the thank you page.

    Now it should have fixed the issue 🔥👍

    I hope this was useful 😊

    HAPPY CODING

    Marked as helpful
    0
  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulations on completing the challenge

    HTML 📰

    • avoid using the <div> tag to display text alone. Since the <div> tag is mostly used to group elements. You can rather use <p> long descriptive text and <em>, <strong> or <small> to display short texts (i.e <div class="plan">Annual Plan</div> and <div class="value">$59.99/year</div>)

    CSS 🌈

    Nothing to say about your CSS much. You have done a great job on following conventions of CSS custom variables and relative units

    Overall your solution looks great 👍

    I hope this was useful 😊

    HAPPY CODING

    0
  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulations on completing the challenge

    HTML

    • Normally <div> tag is not used to display text, it is used to group some elements. Rather than using a <div> tag you could use a <p> tag. which will improve accessibility as well.

    • Use relative units such as em or rem for margin, padding, width, and height. avoid using px since it is an absolute unit.

    -It is a good practice to use CSS custom properties. learn more about it here

    • It will be more interactive if you made your cursor a pointer when hovering over the arrow icon. add these lines of code in your *style.css to achieve that
    .arrow:hover {
    cursor: pointer;
}

    Other than that your solution is looking great 👍

    I hope this was useful 😊

    HAPPY CODING

    0
  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulations on completing the challenge

    I have some tips for you on improving accessibility and semantic coding.

    HTML 📰

    • avoid using the <span> tag element to display text since it is used mostly to group inline elements. You can replace the <span> tag in <span id="span-title">PERFUME</span> with the <h1> tag, and replace the <h1> in <h1>Gabrielle Essence Eau De Parfum</h1> with and <h2> tag. so you will be having a top-level heading which is <h1> and a second-level heading which is <h2>. which will improve accessibility as well

    • Avoid using hyphens or underscores in the alt attribute of the <img> tag. Since it should be humanly readable text. You are most welcome to use space

    • use <em>, <strong> or <small> tag dispplay short texts. rather that using <span> tag. i.e <span id="price-1">$149.99</span> and <span id="price-2">$169.99</span>

    Learn more about Semantic HTML here

    Learn more about Accessibility here

    CSS 🌈

    • I think you forgot to make it for mobile version. Maybe try doing that with media queries

    Nothing to say about your CSS. You have done a great job on utilizing CSS custom variables and relative units 🔥👍

    I hope this was useful 😊

    HAPPY CODING

    1
  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulations on completing the challenge

    HTML 📰

    • avoid using <p> tag to display short texts(i.e <p>Annual Plan</p> and <p>$59.99/year</p>). Since the <p> tag is used to display descriptive text. Rather use <em>, <strong> or <small> tags. This will also improve accessibility.

    CSS 🌈

    • It is a good practice to use CSS custom properties. learn more about it here

    Also, you have done a great job on following relative units convention

    Overall the solution you submitted looks great🔥👍

    I hope this was useful 😊

    HAPPY CODING

    Marked as helpful
    0
  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulations on completing the challenge

    For responsiveness, If you notice on the provided image folder, there are two pictures. One for desktop and one for mobile view. you have to use both.

    Follow the methods below to get a quick fix

    • In the HTML fileat the place of <img class="image" src="images/image-product-desktop.jpg" alt="Product desktop resolution"> remove it and add these both lines of code
    <img class="image-desktop" src="images/image-product-desktop.jpg" alt="Gabrielle Perfume bottle with greenary">
<img class="image-mobile" src="images/image-product-mobile.jpg" alt="Gabrielle Perfume bottle with greenary">
    • Now in style.css remove completely the following codes
    .image {
    width: 18.75rem;
    border-radius: 1rem 0 0 1rem;
    margin-right: 1.875rem;
}
    • Now add these lines of codes at that place
     .image-mobile {
    display: none;
}

.image-desktop {
   width: 100%;
    border-radius: 1rem 0 0 1rem;
}
    • Finally add these lines of code in the same style.css file under @media only screen and (max-width: 600px)
    .image-desktop {
        display: none
    }
    
.image-mobile {
        display: block;
        border-radius: 1rem 1rem 0 0;
    }

    Also if you are wondering why your padding is not working in .Product. Because in the HTML you have specified as class="Product" and in CSS you have selected it as .product.It looks the same but the first letter is capitalized in HTML and simplified in CSS. Also here is a code with a better amount of padding.

    remove 👇

    .product {
    padding: 2.1875rem;
}

    paste these lines of code in the same place 👇

    .Product {
    padding: 1rem;
}

    Now it should look something better 😊👍

    Also here are somethings that can be fixed further in your project

    HTML 📰

    • for headings avoid using <p> tags. In <p class="type">Perfume</p> replace the <p> tag with a <h1> , and replace <h1> tag in <h1 class="name">Gabrielle Essence Eau De Parfum</h1> with a <h2> tag. So you will have a top-level heading which is <h1> and a second-level heading <h2> which will greatly improve accessibility.

    • avoid using <span> tag to display text. Since it is mostly used to group inline elements. Rather use <em>, <strong> or <small> tags. This will also improve accessibility.

    CSS 🌈

    • It is a good practice to use CSS custom properties. learn more about it here

    I hope this was useful 😊

    HAPPY CODING

    Marked as helpful
    1
  • Nann Ei Ei Win•140
    @neew18Submitted almost 2 years ago

    Hi! This is my solution for the Product preview card challenge. I am still struggling to make those card center I guess but I am working on it. And I have a problem on my code which I can't seem to pin point what it is. Because it is working on my codepen. It is like when I deployed the page the responsive apart is not working and it is still at the mobile version. Please help me find what it went wrong and any other suggestions are welcome!!

    Product landing card using CSS grid

    2
    Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello 👋

    Well done on completing it

    some tips to improve your code

    HTML 📰

    • for headings avoid using <p> tags. In <p id="heading-small">Perfume</p> replace the <p> tag with a <h1> , and replace <h1>tag in <h1>Gabrielle Essence Eau De Parfum</h1> with a <h2> tag. So you will have a top-level heading which is <h1> and a second-level heading <h2> which will greatly improve accessibility.

    • avoid using <p> tag to display short texts(i.e <p id="price1">$149.99</p> and <p id="price2">$169.99</p>). Since the <p> tag is used to display descriptive text. Rather use <em>, <strong> or <small> tags. This will also improve accessibility.

    the above-mentioned are semantic HTML and accessibility issues

    Learn more about Semantic HTML here

    Learn more about Accessibility here

    CSS 🌈

    • It is always considered good practice to use CSS custom variables. They will make life a lot easier as a web developer. learn more about it here

    Other than that all looks great 🔥, you have used relative units which is great for responsiveness, and used a better approach to change images on mobile and desktop view

    I hope you find this helpful 😄

    KEEP IT UP

    Marked as helpful
    0
  • Nann Ei Ei Win•140
    @neew18Submitted almost 2 years ago

    At first, I found it difficult to position the images. But after a few researches and readings, I solved it. Please review my code and leave some feedbacks about what I can improve more. Thank you!

    Nft preview card

    3
    Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulations on completing the challenge

    HTML 📄

    • When you are setting the alt attribute for the <img> tag, always describe the image best. for the Equilibrium image rather than saying alt="Card image cap" you could say something like this alt="A glass cube resting on its vertex in an equilibrium position". Because screen readers who can't see the image will know what it is through alt text.

    • replace <div class="attribution"> with <footer> tag to fix accessibility issues.

    CSS 🎨

    • It is a good practice to use CSS custom properties. learn more about it here

    You have done a great job by making use of relative units** 🔥👍

    I hope this was useful 😊

    HAPPY CODING

    Marked as helpful
    0