Skip to content
OverviewSolutions
14
Comments
15
Abdulgafar-Riro
@Abdulgafar-Riro

All solutions

  • Minimal & Accessible Rating Component | Built with HTML, SCSS & JavaSc

    #accessibility#sass/scss#van-js
    Abdulgafar-Riro•220
    Submitted 6 days ago

    None, But seeking someone who will help me with react.

    1 comment

  • Fully Responsive Tip Calculator Using Vanilla JS & SCSS

    #sass/scss#van-js#accessibility
    Abdulgafar-Riro•220
    Submitted 21 days ago

    I'd appreciate feedback on the following areas:

    1. Error Handling Logic – Is there a cleaner or more efficient way to handle input validation, especially for zero or invalid values?
    2. SCSS Structure – Are there improvements I can make to make the SCSS more modular or DRY?
    3. Accessibility – What ARIA roles or enhancements would make the UI more accessible?
    4. JavaScript Readability – Is the current structure of the DOMContentLoaded function and event handling clear and maintainable?
    5. Responsive Layout – Are there any improvements for better responsiveness on very small or very large screens?

    Your suggestions on any of these areas would be very valuable!

    1 comment

  • Time Tracking Dashboard – Vanilla JS, SCSS, Responsive

    #bem#sass/scss#van-js#accessibility
    Abdulgafar-Riro•220
    Submitted about 1 month ago

    Areas I’d appreciate feedback on:

    Responsive Layout Tweaks: While the project is responsive, I’d like expert insights on better handling height alignment issues between dashboard-container and activities-container, especially on medium-sized screens.

    Code Optimization: I’m interested in any suggestions to improve the JavaScript logic used for switching between timeframes (daily, weekly, monthly) — particularly on making the code more modular or efficient.

    SCSS Structure: Feedback on how I’ve structured and nested SCSS would be appreciated. I'm curious if there's a cleaner way to organize variables, mixins, or responsive styles.

    1 comment

  • Responsive Newsletter Sign-Up Form with Success Modal Using HTML, CSS

    #accessibility#sass/scss#van-js
    Abdulgafar-Riro•220
    Submitted about 2 months ago

    How to implement react and CSS frameworks into my projects

    1 comment

  • Responsive Newsletter Sign-Up Form with Success Modal Using HTML, CSS

    #sass/scss#van-js#accessibility
    Abdulgafar-Riro•220
    Submitted about 2 months ago

    How to implement react to my projects and use CSS frameworks

    0 comments

  • Responsive Newsletter Sign-Up Form with Success Modal Using HTML, CSS

    Abdulgafar-Riro•220
    Submitted about 2 months ago
    0 comments

  • Article preview component

    #accessibility#sass/scss#van-js
    Abdulgafar-Riro•220
    Submitted 2 months ago

    Specific Areas I’d Like Help With

    1. Accessibility (a11y) Enhancements I'd like to ensure the component is fully accessible — for example, proper ARIA roles, focus management when toggling the share panel, and keyboard navigation support. 👉 Could you advise on best practices or things I might’ve missed?

    2. Semantic HTML Structure While the component is visually sound, I want to confirm that I'm using the most semantic and meaningful tags (e.g., main, footer, button, section, etc.) for screen readers and SEO.

    3. Optimizing SCSS Structure I used BEM naming with nested SCSS. 👉 Can this structure be improved for better scalability and maintainability in larger projects?

    4. Improved JavaScript Logic The share toggle is functional but basic. 👉 Would a more scalable approach like event delegation or data attributes make sense here?

    1 comment

  • Responsive Testimonials Grid Section Solution

    #sass/scss#webflow
    Abdulgafar-Riro•220
    Submitted 4 months ago

    1. Improving CSS Grid Layout:

      • Are there better ways to structure the grid while ensuring flexibility for different screen sizes?
      • How can I make the layout more fluid without relying heavily on fixed pixel values?

    2. Optimizing SASS Usage:

      • Are my mixins and variables used effectively, or is there a more efficient way to manage styling in SASS?
      • What SASS best practices could I adopt to make my code even more scalable?
    2 comments

  • A responsive four card section using flexbox

    #accessibility#sass/scss#webflow
    Abdulgafar-Riro•220
    Submitted 4 months ago
    1 comment

  • Product Preview Card Component – Responsive Layout with Flexbox

    #accessibility
    Abdulgafar-Riro•220
    Submitted 5 months ago

    I would appreciate feedback on improving code efficiency, particularly in CSS structuring. Most especially, sass.

    1 comment

  • Responsive Recipe Page with Semantic HTML and Custom CSS Variables

    #accessibility
    Abdulgafar-Riro•220
    Submitted 6 months ago

    Areas I Would Like Help With:

    1. Accessibility Improvements:

    Suggestions for further enhancing accessibility, particularly for users relying on assistive technologies.

    1. Responsive Design Optimization:

    Feedback on ensuring a flawless layout on larger screens and more complex resolutions.

    1. Code Optimization:

    Recommendations for making the code more concise, reusable, and scalable.

    1. Typography and Styling:

    Advice on improving the visual hierarchy and overall aesthetic appeal of the project.

    1. Performance Optimization:

    Techniques to improve load times, especially for assets like custom fonts and images.

    Your insights would help refine the project further and ensure it meets best practices.

    1 comment

  • Social Links Profile

    #accessibility#bem
    Abdulgafar-Riro•220
    Submitted 6 months ago

    Areas Where Help Is Needed

    1. Accessibility Enhancements:

    Suggestions for improving accessibility, especially for users relying on screen readers or keyboard navigation.

    1. Font Loading Optimization:

    Feedback on improving the implementation of @font-face to ensure faster loading and better browser compatibility.

    1. Cross-Browser Compatibility:

    Advice on testing and refining the design for consistent rendering across all major browsers.

    1. Design Improvements:

    Recommendations for improving the visual appeal and user experience, especially in terms of spacing, typography, or hover states.

    1. Performance Optimization:

    Guidance on optimizing the CSS and assets (like fonts and images) to reduce the project's overall load time.

    1. Scalability:

    Insights on making the project more modular and maintainable for future updates or feature additions.

    1. Best Practices:

    General feedback on coding practices, structure, and methodology to ensure the project adheres to modern standards.

    2 comments

  • Blog preview card

    #accessibility
    Abdulgafar-Riro•220
    Submitted 6 months ago

    Specific Areas I'd Like Help With

    1. Responsiveness:

    While the blog preview card is responsive across mobile and desktop, I would appreciate feedback on how to optimize the layout for tablet devices (e.g., 768px - 1024px).

    Are there better ways to manage spacing and scaling for intermediate screen sizes?

    1. Typography Scaling:

    I used fixed font sizes (rem and px) for headings and paragraphs. Would implementing clamp() or alternative methods for dynamic typography scaling improve the design?

    Feedback on best practices for responsive typography is welcome.

    1. Hover Effects:

    I added a simple hover effect to the card's title (color change). Are there suggestions for enhancing interactivity while maintaining a minimalist design?

    1. Accessibility:

    I’ve ensured proper use of alt attributes for images and chosen colors with sufficient contrast. Are there additional accessibility improvements I can make (e.g., ARIA roles, focus states)?

    1. Code Organization:

    Are there any improvements I can make to the HTML/CSS structure for better readability and maintainability?

    Suggestions for reducing repetitive styles or enhancing reusability are appreciated.

    1. Performance:

    Are there any recommendations for optimizing the CSS or HTML to improve performance, especially for users on slower devices or networks?

    By addressing these areas, I hope to make the project more polished, efficient, and accessible. Any insights or tips would be greatly appreciated!

    1 comment

  • QR Code Component - Frontend Mentor Challenge

    #accessibility#semantic-ui
    Abdulgafar-Riro•220
    Submitted 6 months ago
    1 comment