Skip to content
OverviewSolutions
6
Comments
165

Faris P

@FarisPalayiKerala, India2,810 points

Hi there 👋 I'm a physics degree student who loves everything about computers 💘. And I'm currently focused on learning full-stack web development. Feel free to take a look at my projects or to give feedback/comment on my code/projects, or to reach out to me on social media.

I’m currently learning...

Vue3 and Typescript. Also, trying out different build tools. Also, learning English 🔠.

Latest solutions

Latest comments

  • Faris P•2,810
    @FarisPalayi

    I think it might be because of browser caching (not completely sure). To disable it in Axios, disable it in the header like this

    axios.get('https://api.adviceslip.com/advice', { headers: { "Cache-Control": "no-cache" } })

    Have fun coding ✨

    Marked as helpful
  • Faris P•2,810
    @FarisPalayi

    Hey, nice job on this one 👍. Here are some of my suggestions:

    • set the image alt values to alt="" if images are only used for decorative purposes
    • I think the alt value divider is unnecessary in the divider img because it doesn't provide any useful information or extra context. i.e. since it's decorative.
    • try adding a :focus state style to the button so that people using keyboard to navigate can use the site easily
    • set an aria-label attribute to the button so that the purpose of the button is clear to assistive devices.
    • also, try using the blockquote tag instead of the p for advice, to make the html semantic

    Happy coding ✨

    Marked as helpful
  • Faris P•2,810
    @FarisPalayi

    Hey, nice job on this one 👌. Some of my suggestions are:

    • You are using div everywhere. Try using semantic HTML elements like h1, h2, p, button, main, etc. This article is a good introduction to semantic HTML and HTML accessibility in general, HTML: A good basis for accessibility - MDN. It is a long read, but, it'll be worth it. I recommend you check it out if you have the time. It is such an important topic to learn in my opinion.
    • Also, the report section in this page can help you find some of the common HTML and accessibility issues with the site.

    Happy learning and coding. Cheers!

    Marked as helpful
  • Faris P•2,810
    @FarisPalayi

    Nicely done 👌

    In addition to what @minimalsm said, my suggestion would be to make the toggle button accessible for keyboard users. Because, currently, the toggle button is not focusable.

    For that, instead of using dispaly: none; to hide the checkbox from the screen, I'd suggest using something like opacity: 0; height: 1px; width: 1px; (like an .sr-only class). So that the checkbox is still there in the DOM, but users won't be able to see it. Then you can simply add the focus styles when the checkbox is focused. For eg: .checkbox:focus ~ .toggle-btn { outline: solid 2px white; }. You might need to change your markup a bit for this to work, though.

    Hope it's all understandable :)

    Marked as helpful
  • Faris P•2,810
    @FarisPalayi

    This article might help: How to Create an Animated Countdown Timer With HTML, CSS and JavaScript - CSS Tricks

    Marked as helpful
  • Faris P•2,810
    @FarisPalayi

    Hey @erelita, good job on this one 👌. The site is responding well to different screen sizes.

    A few suggestions from me are:

    • The alt tag for the icons should be empty, since it doesn't provide any context or extra information; so that assistive technologies can ignore the image.
    • I think you've used the BEM methodology correctly. One thing I noticed is that, card-container__border border--one classes should be card-container__border card-container__border--one take a look here. But, BEM is flexible, so you can use it any way that works for you. So, it's not a hard rule.(also if it is meant to be reusable throughout the site, then it's not a problem) Here's a BEM cheat sheet website that can be used for reference. There are a bunch of good articles' link as well.
    • Apart from these two minor things, everything looks excellent.

    That's all from me. Have fun coding ✨

    Marked as helpful
View more comments