Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that

Mukesh Mahato

@iammukeshmahato
Siraha, Nepal
170Points

I am an IT student currently learning front-end web development with HTML and CSS by solving challenges from frontendmentor.io

I’m currently learning...

HTML & CSS

Latest Solutions

Latest Comments

  • Solution screenshot
    • HTML
    • CSS

    Order Summary Component

    4
    Mukesh Mahato170 | Posted 24 days agocommented on Nguyễn Huỳnh Anh's "Order summary component" solution

    Hi @anhhuynh1506,

    Congratulaton for completing your first project. You have done a great work.

    Its seems Frontend Mentor have generated some Accessibility Issues, they are:-

    1. Document should have one main landmark
    2. Page should contain a level-one heading

    You can fix this issues by using the following tips:

    1. In your index.html file, you have <section>...</section> tags, wrap the whole section element into a <main>...</main> to fix the landmark issue.

    2. Page should contain a level-one heading: You have use a h2 tag. The heading element should be in order of (h1-h6). To fix this issue simply replace h2 with h1 and use font-size property to set the size of heading.

    My suggeston

    You have used each element to reset its margin and padding, insted doing this, i would like to suggest to use css universal selector to reset. You can do this like

    *{
        margin: 0;
        padding: 0; 
    }
    

    Click Here for more information about css selector.

    If you have any doubt or query, feel free to contact me.

    Keep Coding!!!

    Keep Learnign!!!

    1
  • Solution screenshot
    • HTML
    • CSS

    QR CODE - Using HTML/CSS

    2
    Mukesh Mahato170 | Posted 30 days agocommented on Mark Angelo's "QR code component" solution

    Hi Mark!

    Your work looks good, but there is some accessibility issues report generated by Frontend Mentor.

    1. Images must have alternate text
    2. Document should have one main landmark
    3. Page should contain a level-one heading
    4. All page content should be contained by landmarks
    • add alt attribute to img tag. eg: <img class="image-qr" src="images/image-qr-code.png" alt="qr-code"/>

    • Put you <div class="qr-card"> into a <main> tag or <section> tag.

    • You have used <h2> tag, instead you can use <h1> tag and set the font-size as required.

    • You have a div of class attribution, put the div in *footer tag.

    By following the above steps you can fix the accessibility issues. You have some mis-matched in image size which can easily be fixed.

    You can have a look to my solution. click here to live preview my solution.

    If you have any doubts or questions do not hesitate to ask.

    Keep Coding! Keep Learning!

    1
  • Solution screenshot
    • HTML
    • CSS

    HTML | CSS | CSS FLEXBOX

    4
    Mukesh Mahato170 | Posted 30 days agocommented on Michael Chukwu's "QR code component" solution

    Hi Michael,

    Your work looks pretty good. There is an accessibility issues generated by Frontend Mentor. It is generated because you have used <h3> tag, Your page should contains at least a level-one heading i.e <h1> tag. And then set the font size according to the design in style.css.

    Your can fix this issue by simply replacing you <h3> tags with <h1> tag.

    Your image height is smaller than the design, it should be height: 288px;

    It would be better if you add box-shadow to the card. you can add box-shadow as box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.2);

    You can have a look to my solution. Click Here for live preview of my solution.

    If you have any doubts or questions, feel free to ask.

    Keep Coding!

    0
  • Solution screenshot
    • HTML
    • CSS

    Order summary card

    5
    Mukesh Mahato170 | Posted about 1 month agocommented on yudiz's "Order summary component" solution

    Hello Mr. Yudiz, your design is quite similar to the challenge but it seems some miss-matched. The font weight of "Order Summary" is not similar to the challenge also there is more space between the text in the "subscription" division. The height of the "Proceed to payment" bottom should be a bit greater than than what you have given. You can take reference to my design. Here is the link of my github: https://github.com/mukeshmahato843/orderSummary

    I hope this will be helpful for you!!!

    1
  • Solution screenshot
    • HTML
    • CSS

    Html CSS e Flex box.

    1
    Mukesh Mahato170 | Posted about 1 month agocommented on Gustavo's "3-column preview card component" solution

    Hello Gushigustavo, your design is good, but i think you haven't used the font given in style-guide.md file. Also the height of the div a bit mis-matched. here is my design you can check it. https://github.com/mukeshmahato843/3-column-card

    0