P
@vcollins1
Latest solutions
loopstudios-landing-page-main
#accessibility#bem#sass/scss#lighthouseSubmitted 10 days agoAny feedback would be great!
NFT preview card component
#accessibility#bem#lighthouse#sass/scssSubmitted about 2 months agoI would be happy with any feedback guys, especially the one related to BEM methodology.
ecommerce-product-page-main
#accessibility#sass/scss#lighthouseSubmitted about 2 months agoI would appreciate any feedback guys!
news-homepage-main
#accessibility#sass/scss#lighthouseSubmitted 7 months agoI need some help on how to make the mobile menu do the transition from the right of the screen instead of just pop-in out.
contact-form-main
#accessibility#sass/scss#lighthouseSubmitted 8 months agoI would like help on how to style that query box with
background-color: $green-200whenever the radio input is checked.I would appreciate any other help! 👍
faq-accordion-main
#accessibility#lighthouse#sass/scssSubmitted 8 months agoI 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.
Latest comments
- @AymaneOnline
There is some issues in the mobile screen sizes, the image for closing the navigation menu doens't appear, you get the error
icon-close.svg:1 GET https://vcollins1.github.io/assets/images/icon-close.svg 404 (Not Found)so it looks a bit ugly.To fix that I suggest you put both the close and the hamburger images on the html file, as github doesn't handle relative path from css files correctly as you can see in the error above, it was looking for the images from the root not from the project folder
frontend-mentor/loopstudios-landing-page/assets /images. - @bcasadeiWhat are you most proud of, and what would you do differently next time?
Kept it simple, tried to stick to bem methodology is CSS class names.
What challenges did you encounter, and how did you overcome them?CSS got a little verbose.
What specific areas of your project would you like help with?Had a small issue with the overlay on the image slightly expanding beyond the image size.
@AymaneOnlineGood job! Some points where you can improve:
- Update to font to "Outfit" specified in the style-guide.md in the challenge file.
- Wrap the card image inside an anchor tag
<a>with anhreflinking to the image URL. - I think it would be better to set the
min-heightof the<body>tag to100svhinstead of100%because it is best on mobile and doesn't needhtml { height: 100%; }because100%sets the minimum height to 100% of the height of the parent element.
Good luck!
- @Gbw699@AymaneOnline
Although the solution isn't pixel perfect, but everything is functional. I've noticed an error Error: <svg> attribute height: Expected length, "auto" occurring when interacting with the carousel.
- @Fixito@AymaneOnline
Add
aria-expandedto buttons that control the menu to indicate the menu’s open/closed state. - @Alexandru736What are you most proud of, and what would you do differently next time?
Being able to improve the readability of my code. Next time I would try a CSS framework, maybe.
What challenges did you encounter, and how did you overcome them?Small challenges regarding how to style and how to extract the value of the radio buttons
What specific areas of your project would you like help with?I need feedback on how accessible is my site and how readable is my project.
@AymaneOnlineHere are some feedbacks on accessibility as you asked:
- Add hover effects on the submit button and
cursor: pointerso to make it more intuitive. - The consent checkbox is not reachable from the keyboard (try pressing tab few times), remove the </input> closing tag after the checkbox.
- There some fields that are not visible on mobile devices, to fix that remove the
display: flex; justify-content: center; align-items: center;styles from the<body>. - Try using the Lighthouse Chrome Extention it could help to spot some accessibility flaws to improve (like colour contrast for your case).
- Add hover effects on the submit button and
- @Alexandru736What are you most proud of, and what would you do differently next time?
Being able to think more of accessibility
What challenges did you encounter, and how did you overcome them?I didn't know how to split the background between the background color and the background image. I thought about creating two divs that represented both but I thought I would've overcomplicated the solution. In the end, I used the
What specific areas of your project would you like help with?background-imageproperty along withbackground-size: containFeedback on the accessibility standards I applied here. Thank you!
@AymaneOnlineHere is some feedback:
Styles:
- Add
justify-content: space-between;to the<div class="question">to create that space between the question and the plus button. - Add
cursor: pointerto the<button class="btn">to change the appearance of the cursor whenever you hover the question.
- Add
