Skip to content
OverviewSolutions
71
Comments
7

Andro87

@Andro87Italy1,460 points

I love to learn new skills and face new challenges to improve my knowledge.

I’m currently learning...

Do you ever stop learning? 😄

Latest solutions

Latest comments

  • JUNED•110
    @7juned7
    What are you most proud of, and what would you do differently next time?

    What I am most proud of??? I don't know maybe I completed the challenge and most importantly i am submitting the Challenge.

    What challenges did you encounter, and how did you overcome them?

    Creating custom color CSS was a challenging part. I was doing a silly mistake of not putting ; at the end of code for example

    the correct way

    --Very-dark-blue-mainBG: hsl(217, 54%, 11%); --Very-dark-blue-cardBG: hsl(216, 50%, 16%);

    i was forgetting ; at the end so i was not able to use it. And there is part where when in active state NFT image had a overlay of cyan background whit an eye symbol, ion hovering my eye symbol opacity was also getting changed which i was not able to solve.

    What specific areas of your project would you like help with?

    there is part where when in active state NFT image had a overlay of cyan background whit an eye symbol, ion hovering my eye symbol opacity was also getting changed which i was not able to solve.

    NFT preview using CUBE CSS Methodologies

    #cube-css
    1
    Andro87•1,460
    @Andro87

    Hi @7juned7!

    Great job on completing this challenge!

    To know more about custom properties and their usage you can read this CSS Custom Properties Guide by Chris Coyier.

    Hope this will help you!

    Happy coding!

  • P
    Srijan Manandhar•450
    @srijanss
    What are you most proud of, and what would you do differently next time?

    I have learnt how to make accessible forms by

    • making the form accessible using keyboard
    • using autocomplete attribute and different tokens for different input types
    • use of different aria-describedby attribute to describe more on what the input field is about and how to input values
    • hiding redundant data from screen readers using aria-hidden attribute
    • use of aria-invalid attribute to announce field is invalid and the error message based on aria-describedby
    • how to make the toast message or modal accessible to the screen readers
    • the use of aria-live, role="alert" and aria-atomic attributes help annouce the success message of toast in the solution
    What challenges did you encounter, and how did you overcome them?

    I had some issues using aria-invalid attribute and removing error messages when user starts filling forms

    • I set the aria-invalid="false" on load in all the input elements, and when there is an error on submit then I changed attribute aria-invalid="true" so that screen-readers announce the input is invalid and error message is read out
    • similarly when user starts typing on the input field which has error message, then the error-message disappears
    What specific areas of your project would you like help with?

    Is my solution accessible? How can I improve the a11y of the solution.

    Accessible Contact form

    #accessibility#vite
    2
    Andro87•1,460
    @Andro87

    Hi @srijanss!

    You did a fantastic job completing this challenge!

    Just a quick note to review the use of the aria-invalid attribute on the input radio type.

    I hope this will help you improve your coding skills!

    Happy coding!

    Marked as helpful
  • Andro87•1,460
    @Andro87

    Hello @AnaCarol2001!

    Great job on finishing this challenge!

    I'd suggest including some ARIA attributes such as aria-expanded (which indicates whether the content is visible) and aria-controls (which links the element to the content).

    I hope this advice will help you improve your coding skills!

    Happy coding!!!

  • Andro87•1,460
    @Andro87

    Hello @Yago14,

    Good job on completing this challenge!

    I'd suggest including semantic HTML, like <main> instead of the <div> element and using attributes like type and title on the <button> element to improve accessibility.

    I hope this will help you improve your coding skills!

    Happy coding!!!

    Marked as helpful
  • Andro87•1,460
    @Andro87

    Hi Joseph5404!

    Great job in completing this challenge!

    To improve your solution you can:

    • Use max-width and margin: auto properties in your main container.
      For example, for the max-width property, you can write { max-width: 90% } for small devices and { max-width:52rem} for bigger ones ;

    • Use grid-template-areas and grid-area properties for placing elements using named template areas.

    Here there is a link that can help you: Css-tricks: grid-templat-area

    Hope this will help you!

    Happy coding!

    Marked as helpful
  • Andro87•1,460
    @Andro87

    Hello NIKHILKUSHWAHA9877!

    Great job in completing this challenge!

    To solve your issue you can:

    -set a background-color: hsl(277, 64%, 61%) on the parent element ;

    -use the mix-blend-mode: multiply property and an opacity of 0.5-0.7 on the child element;

    In your case it should be something like this:

    .img {
    display: flex;
    background-color:hsl(277, 64%, 61%);
}
.img  img {
        width: 100%;
        height: 100%;
        opacity: 0.7;
        mix-blend-mode: multiply;
}

    Happy coding!!!

    Marked as helpful
View more comments