Andro87

Latest comments

• 

  JUNED•110

  @7juned7Submitted 9 months ago

  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

  30
  

  Andro87•1,460

  @Andro87Posted 7 months ago

  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!

  0
• 

  P

  Srijan Manandhar•470

  @srijanssSubmitted 8 months ago

  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

  31
  

  Andro87•1,460

  @Andro87Posted 7 months ago

  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

  0
• 

  AnaCarolina•240

  @AnaCarol2001Submitted 7 months ago

  

  FAQ Accordion | HTML | CSS | JS | Accessibility

  #accessibility

  1

  30
  

  Andro87•1,460

  @Andro87Posted 7 months ago

  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!!!

  0
• 

  Yago Thyerrir•180

  @Yago14Submitted about 2 years ago

  

  Solução com jsvaScript DOM, CSS flexbox

  #accessibility#cube-css

  1

  20
  

  Andro87•1,460

  @Andro87Posted 8 months ago

  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

  1
• 

  Joseph Wangai•200

  @Joseph5404Submitted over 1 year ago

  

  testimonials-grid-section-main using grid

  1

  50
  

  Andro87•1,460

  @Andro87Posted over 1 year ago

  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

  0
• 

  NIKHILKUSHWAHA9877•20

  @NIKHILKUSHWAHA9877Submitted about 2 years ago

  

  Preview-card-for-website

  1

  10
  

  Andro87•1,460

  @Andro87Posted about 2 years ago

  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

  0