@ralphvirtucio
Latest solutions
News homepage
#accessibility#sass/scss#gulpSubmitted 8 months agoCSS Grid Layout and creative for a tablet version
Latest comments
- @salomasik
great solution. I can't view the Preview site
- P@DevHussein@salomasik
One in one with the design is great!!!!!!!!!!!!!!)👍 See how it is displayed on mobile devices and it will be a plus if when you enlarge the screen on the desktop, everything will be the same as at 1400px. You can also add opacity to the photo on the left, I tried setting it to 0.85, you can experiment with these values. I would also add cursor: pointer and hover on the button for social networks and other links. Glad if I could help.
- P@NikitaVologdinWhat are you most proud of, and what would you do differently next time?
–tabbing works great for the menu in the small screen version. –smooth transitions for the menu and backdrop.
What challenges did you encounter, and how did you overcome them?One challenge was hiding the visually hidden menu for the tab button. If the menu is behind the viewport and there is set overflow:hidden on the parent with the pressing tab button next tab element will be visually focused and the visually hidden menu exposed. That was solved by dynamically controlling tabIndexes according isMenuOpen state and focusing the first element in the menu by the native focus method which was triggered by ref. Also controlled dynamically aria-hidden attribute for the open and closed menu.
What specific areas of your project would you like help with?If anyone has any ideas for closed menu implementation please be my guest.
@salomasikCool and very design-conscious. Some links do not respond to mouse hover. Cool animation on the mobile version!!!!!!
- P@nataliesmythWhat are you most proud of, and what would you do differently next time?
I'm proud of the way my solution turned out, and prioritizing accessibility from the start made it easier to maintain and check accessibility throughout building the form. Next time I would take more time to understand how the error messages work before starting in order to plan how to build the functionality more accurately.
What challenges did you encounter, and how did you overcome them?My biggest problems were aligning the error messages, which was surprising because usually I struggle more with JavaScript. I used stack overflow to help.
What specific areas of your project would you like help with?I would love feedback on my JavaScript, and how I can create cleaner, more concise code.
@salomasikCool! there is a problem when displaying a block with “Successful sending of message”, I tried giving the exact width and changing the Left and right properties
- @AymaneOnlineWhat are you most proud of, and what would you do differently next time?
Not using JavaScript for making the accordion work.
What challenges did you encounter, and how did you overcome them?I couldn't make the screen reader read the page as I wanted, it actually reads the questions but when I press "Enter" it doesn't read the answers.
What specific areas of your project would you like help with?I want some help with the accessibility. I couldn't make the screen reader (NVDA) read the answer when I press "Enter" of the corresponding question.
@salomasikCool! Close to the design. but there is a problem when the screen is larger than 1440 pixels, the top photo of the background does not expand.
- @wendyhamel@salomasik
Good job!
