Skip to content
OverviewSolutions
53
Comments
30
P

Krishna Vishwakarma

@KrishnaVishwakarma1595India1,390 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Typescript, React.JS, Next.JS, Vue.JS,

Latest solutions

View more solutions

Latest comments

  • P
    Krishna Vishwakarma•1,390
    @KrishnaVishwakarma1595

    Hi Sva

    I have a few points to mention -

    • As I saw on the code, you've given a common id="socials" to all the a links. This should not be a common ID of an element that can be unique. Instead, you should use class="socials"
    • Also, I don't know why clicking on the buttons doesn't redirect me to the given link. It doesn't act at all. It is just changing the class active to clicked button.
  • P
    Krishna Vishwakarma•1,390
    @KrishnaVishwakarma1595

    Hi, @Alessandro-jpg

    I've some points to mention that can help you to improve your solutions.

    • For the main logo image <img src="assets/images/logo.svg"> you should provide alt="Logo". Keep alt="" empty for images for icons.

    • You missed the hover state for the top navbar menu, the side container beside the main content where other news blogs are listed and the bottom three articles.

    • You provided overflow: hidden in the body tag, which prevents the user to scroll vertically. Either remove it or provide overflow-y: auto.

    • You need to work on spacing between content.

    • Use Modern CSS Reset

    • For the mobile menu background black overlay navigation you checkout this Responsive full screen menu or checkout my solution.

    I hope these points will help you to improve your solutions.

    Happy Coding

  • P
    Krishna Vishwakarma•1,390
    @KrishnaVishwakarma1595

    Hi, @Afrid-Ahamed

    I've got a few recommendations for you to improve -

    • Start using Modern CSS Reset rules so you don't need manual reset. Just take the code from there.

    • Start using HTML5 Semantic Elements like <header>, <main>, <section>, etc. with HTML Accessibility rules.

    • For the pattern divider image you can provide alt="" empty. alt="pattern-divider-desktop" doesn't imply anything to screen readers. Provide alt="" with some values for main content-related images. For icons, we can keep it empty.

    However, the solution looks great. Good job! Hope this help you to improve.

    Happy Coding

  • P
    Krishna Vishwakarma•1,390
    @KrishnaVishwakarma1595

    Hey, @RedMwp

    I have got a few recommendations to improve -

    • You should use <form> tag instead of <div>.

    • When we work with forms it should be mandatory for us to implement the error handling too. Like right now, it doesn't show any error message or something when we either submit and empty form or form with any wrong values for email field. I think you should work on error handling. Show the appropriate message for the empty field or field with wrong value. That's a good practice when working with the forms.

    • When focusing on the input, you can keep the outline border transparent or none. outline: none

    • Instead of giving width: 90% to the button you can keep it 100% & provide the padding like this padding: 1em 2rem for your .form class. So it will look nice.

    Hope this will help you to improve. Keep Mentoring!

    Happy Coding

    Marked as helpful
  • P
    Krishna Vishwakarma•1,390
    @KrishnaVishwakarma1595

    Hi, @Gilocah28

    Nice solution. Good job. However, I have got a few recommendations that can help you to improve.

    • We can enter the text also. However, you have an error message for this. Instead of input type"text" you should use input type="number". So, your extra step to checking whether the input is text or number will reduce. You can keep it like this -

    <input type="number" id="day" min="1" max="31" /> Min and max attribute prevent user to enter a negative value using keyboard's arrow down/up key. And it keeps the input value range between 1-31 for the day field.

    • I noticed when we fill in the input with any value and we focus the input again, it automatically clears the input.

    Happy Mentoring

    Marked as helpful
  • P
    Krishna Vishwakarma•1,390
    @KrishnaVishwakarma1595

    Hi, @Demils13

    Your QR code image is not loading. For that, you can provide the src like this <img src="./images/image-qr-code.png" alt="QR Scan Code" />.

    ./ locates the current directory you are working on. Like @DundeeA said in his comment he misses the .. If you provide like that <img src='/images/image-qr-code.png' /> then also it won't load the image, cause it doesn't understands the path of file to locate.

    • We must always provide the alt="" attribute to the <img> tag. If it used for icons or non-describing images the we can keep the alt="" tag empty.

    • You should start using HTML Semantic Elements like <header>, <main>, <section>,<footer> etc. With these you'll understand the HTML Accessibility rules to keep.

    I hope this will help you. Nice solutions. Good job. Congratulations on completing this challenge.

    Happy Mentoring

    Marked as helpful
View more comments