@Amira-Elsayed-Abdelaziz
Latest solutions
Chat app CSS illustration with React and Sass
#react#sass/scssSubmitted 7 months agoI’d like help specifically with positioning elements more effectively, especially when combining different
positionproperties likerelative,absolute, andfixed. Guidance on best practices for achieving consistent and responsive layouts would be really valuable.Bento grid by React and CSS
#sass/scss#reactSubmitted 7 months agoI would like help understanding why the screenshot I submitted after finalizing the project looks different from the actual webpage. Specifically, the background at the bottom part appears different in the screenshot compared to the real page.
Responsive social proof section page with React and Sass
#accessibility#react#sass/scssSubmitted 7 months agoI would like help with optimizing performance, particularly with lazy loading images and improving the responsiveness of the design for larger screens. Additionally, guidance on enhancing the visual appeal through advanced animations or transitions and ensuring the best accessibility practices would be beneficial.
Huddle landing page with single introductory section with React
#react#sass/scssSubmitted 7 months agoI would appreciate help with improving the responsiveness of the page, especially for smaller screens. While I've made it work, I feel there’s room for better optimization, particularly with the layout and font sizes. Additionally, I’d like advice on how to make the React components even more efficient and how to best manage state across different components in a larger project.
Four card feature section page with React, Sass and Grid component
#react#sass/scssSubmitted 7 months agoI’ve used ARIA for accessibility in past projects, but I didn’t implement it in this one because I’m not entirely sure how to use it effectively, especially when working with React. I would appreciate guidance on how to properly integrate ARIA attributes in React components to improve accessibility.
Recipe page Responsive Design by HTML5 and Sassy CSS (Sass)
#accessibility#sass/scssSubmitted 7 months agoI’d like help refining the accessibility of my project, particularly with ARIA attributes, to ensure it meets best practices for all users. Additionally, feedback on improving the responsiveness of the layout, especially for larger screens, would be valuable. Any suggestions for enhancing the overall interactivity and user experience would also be greatly appreciated.
Latest comments
- @VangmanawKairung
I would suggest replacing non-semantic <div> elements with more meaningful tags, such as using <header> for the card's header section and <nav> for the social links to better convey the structure of the content.
For accessibility improvements, adding aria-labels to the links in the card-links section would help screen readers understand their purpose, and providing more descriptive alt text for the avatar image would enhance usability for visually impaired users.
Structurally, wrapping the entire card in a <section> element with a clear aria-labelledby referencing the name or title would improve the hierarchy and ensure better support for assistive technologies.
Thank for sharing!
- @jyeharryWhat are you most proud of, and what would you do differently next time?
Using
clamp()for responsive typography without media queries so that the text wasn't squished on mobile screens.I also gave more thought to accessibility.
What challenges did you encounter, and how did you overcome them?N/A
What specific areas of your project would you like help with?To come up with the dynamic value for
clamp()(the second value), I divided the mobile font size by the mobile screen width. So for example, the body text had to be 14px on mobile and the mobile screen size is 375px. So 14 / 375 = 0.0373. So the dynamic value I used inclamp()was 3.75vw. I'm not sure if this is the best way to come up with the value but it worked well enough for all the different text presets in this challenge. However I'd like to know if there are better practices for determining the dynamic clamp value.I'd also like my BEM class names to be reviewed.
@VangmanawKairungThis work is incredibly close to the design, and your code is well-structured, demonstrating a strong adherence to semantic principles and accessibility standards. The use of proper tags and attributes enhances both readability and usability, making it an excellent example of thoughtful coding. I’m particularly impressed with your reset CSS—it effectively ensures consistency across different browsers and creates a solid foundation for styling. Thank you for sharing such an excellent and inspiring piece of work!
- P@mykola-pyroh@VangmanawKairung
The project turned out well, with the card layout closely matching the design specifications. The additional footer, while not part of the original design, complements the overall structure and adds a personal touch. Although the result may differ slightly due to this addition, the card itself is an accurate representation of the design and effectively showcases the intended visual and functional elements. Thank you for sharing this excellent work!
Marked as helpful
