Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
15
Abdulgafar-Riro
@Abdulgafar-Riro

All comments

  • Tel•220
    @telsabate-hub
    Submitted 18 days ago
    What specific areas of your project would you like help with?

    I would very much appreciate any suggestions that could improve my skills.

    Thank you!

    Interactive Rating Component Using SCSS and JS

    #accessibility#sass/scss
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 7 days ago

    What a result you have there! 9/10 for me, very close to the original design

  • 6alactico•470
    @6alactico
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of making everything interactive. I also used Sass/SCSS for the first time, but next time, I think I will avoid it until I gain a better understanding of it.

    What challenges did you encounter, and how did you overcome them?

    The main challenge was putting everything together for interactivity. I overcame this by breaking the project into smaller parts to understand what I was trying to accomplish. I also referred to JavaScript resources to help me apply the necessary elements.

    What specific areas of your project would you like help with?

    Any feedback is welcome, but I am especially open to input on JavaScript, as I am still learning and find some parts challenging.

    Tip Calculator App

    #sass/scss
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 22 days ago

    Peer Review:

    This is a well-structured and readable implementation of a tip calculator with thoughtful input validation and responsive UI interactions. Event delegation is clean, and user experience is enhanced by error messaging and real-time calculations.

    Strengths:

    • Clear separation of concerns (input handling, calculations, reset).
    • Good use of trim() and parseFloat() for robustness.
    • Real-time validation and feedback improve UX.
    • Smart handling of both preset tip buttons and custom input.

    Suggestions:

    Consider debouncing input events to optimize performance on rapid typing. You could abstract calculations() parameters to avoid DOM lookups on every call. Accessibility could be improved by associating error messages with inputs via aria-describedby.

    Overall, concise and efficient—great job!

    Marked as helpful
  • P
    Kellen James•320
    @Kellenkjames
    Submitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of building a modular, MVC-structured solution with clean state management, accessibility, and subtle UX polish. Next time, I'd consider using a framework like Angular or React to explore component-based architecture at scale.

    What challenges did you encounter, and how did you overcome them?

    Handling input validation, error states, and DOM updates without a framework was tricky. I overcame this by separating concerns across model, view, and controller, which helped isolate bugs and keep logic maintainable.

    What specific areas of your project would you like help with?

    N/A

    Responsive tip calculator built with modular MVC architecture and SCSS

    #accessibility#sass/scss#bem
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 22 days ago

    Well done boss! I observe that the reset button text is not visible, probably the text color.

  • P
    uzii•240
    @Deuzi
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    well , got to learn more about asynchronous way of writing just the articles way really help, what i will do different is make my code shorter , is kinda long for the few functions in the project

    What specific areas of your project would you like help with?

    the reviewer can help me check of way i could have made the code shorter and probably more understandable

    time-tracker with vanilla js , HTML AND CSS

    #van-js
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted about 1 month ago

    What’s Good:

    • Modular structure: Reports are grouped logically into dailyReport, weeklyReport, and monthlyReport functions.
    • Reusable fetch function: fetchData accepts multiple callbacks, making it flexible.
    • Clear DOM handling: Each function targets specific elements with informative error logs.

    What Needs Improvement:

    1. Redundant code:

      • The inner functions (work, play, etc.) are repeated across daily, weekly, and monthly reports with only timeframe differences. ➤Suggestion: Create one reusable function like updateActivity(dataArray, timeframe) and pass 'daily', 'weekly', or 'monthly' as needed.
    2. Typo in error messages:

      • Repeated "onew or more elements..." instead of "one or more elements..."
    3. Wrong error label:

      • Several times "play data not found" is logged even for other activities like study, exercise, etc. ➤ Suggestion: Log the correct activity title that wasn't found.
    4. Naming improvement:

      Function names like work, play, study, etc., are generic and repeated. Consider dynamic iteration over activities instead.

    Overall Suggestion:

    Refactor all dailyReport, weeklyReport, and monthlyReport into a single report function that loops through an array of activities and updates the DOM based on a given timeframe.

    Like this: const activities = ['Work', 'Play', 'Study', 'Exercise', 'Social', 'Self Care'];

    const updateReport = (data, timeframe) => { data.forEach(activity => { const { title, timeframes } = activity; const activityName = title.toLowerCase().replace(' ', '-'); const current = timeframes[timeframe].current; const previous = timeframes[timeframe].previous;

    const currentElement = document.querySelector(`.${activityName}-current`);
    const previousElement = document.querySelector(`.${activityName}-previous`);
    
    if (!currentElement || !previousElement) {
      console.error(`One or more elements for "${title}" not found`);
      return;
    }
    
    currentElement.innerHTML = `${current}hrs`;
    previousElement.innerHTML = `Last ${timeframe.charAt(0).toUpperCase() + timeframe.slice(1)} - ${previous}hrs`;
    

    }); };

    const fetchData = async (callback) => { try { const response = await fetch('data.json'); const data = await response.json(); callback(data); } catch (error) { console.error('Error fetching data:', error); } };

    // Handlers for each timeframe const dailyReport = () => fetchData(data => updateReport(data, 'daily')); const weeklyReport = () => fetchData(data => updateReport(data, 'weekly')); const monthlyReport = () => fetchData(data => updateReport(data, 'monthly'));

  • P
    danielswaroopannu•110
    @danielswaroopannu
    Submitted about 2 months ago

    News Letter subscription

    #pure-css#van-js
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted about 2 months ago

    Overall Impression

    You’ve done an excellent job creating a clean, modern, and responsive newsletter sign-up form. It’s visually appealing, well-structured, and functionally sound. The layout is professional and aligns well with best practices for user-friendly UI/UX design.

    What You Did Well

    1. Responsive Design:

      • The use of flex-wrap: wrap-reverse and media queries is well thought-out.
      • Desktop and mobile images are conditionally rendered based on screen size.
    2. CSS Styling:

      • Clean and consistent.
      • Effective use of Google Fonts and HSL for color control.
      • Nice use of :hover, :focus, and :active states for CTA buttons.
      • Linear gradient hover effect is a great touch! 🎨
    3. JavaScript Validation:

      • Proper use of event listeners for form submission.
      • Input validation with clear error messaging.
      • UI feedback for invalid input (border color + background color) enhances accessibility.
    4. User Feedback:

      • Success message provides a good UX.
      • The .user-email span is dynamically updated (though this could be shown only if the email is valid).
    5. Code Organization:

      • HTML, CSS, and JS are modular and maintainable.
      • Semantic HTML is mostly followed (<form>, <button>, <label>, etc.).

    Suggestions for Improvement

    1. Missing Completion in JavaScript Regex:

      • Your regex for email ends at:

        /^[a-zA-Z0-9._%+-]+@[a-zA-Z...
        

        Finish the expression like so:

        /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
        

        This ensures complete email format validation.

    2. Toggle Success Message Properly:

      • The success message is statically in the DOM. It should be hidden until the form is successfully submitted.
      • Add a successMessage.style.display = "block"; and container.style.display = "none"; after validation passes.
    3. Accessibility:

      • Associate <label> explicitly with the input using for="email" and id="email" to improve screen reader support.
    4. ARIA Roles & Live Regions:

      • Consider adding ARIA attributes for dynamic updates (e.g., error message or success confirmation).
    5. Reusability:

      • Break up styles using BEM methodology or CSS Modules if using a component-based framework (future scalability).
    6. Dismiss Functionality:

      • You have a Dismiss button, but its click event isn’t handled in the script. Add:

        dismissBtn.addEventListener("click", () => {
          successMessage.style.display = "none";
          container.style.display = "flex";
          emailInput.value = "";
        });
        

    Final Rating: 8.5/10

    Your project is visually solid, responsive, and user-friendly. With minor tweaks — completing the regex, handling toggle visibility with JS, and improving accessibility — it can reach a professional level worthy of real-world production.

    Marked as helpful
  • P
    Kellen James•320
    @Kellenkjames
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of implementing a scalable, modular architecture using SCSS and ES6 modules, simulating a real-world MVC pattern. Next time, I’d refactor the JavaScript into TypeScript and add test coverage to simulate a production-ready codebase.

    What challenges did you encounter, and how did you overcome them?

    Positioning and transitioning the tooltip across responsive breakpoints proved surprisingly complex. I overcame this by deeply analyzing the layout behavior, refactoring the HTML structure, and applying utility-driven SCSS with breakpoint-specific logic.

    What specific areas of your project would you like help with?

    Nothing at this time.

    Article preview component with popup

    #accessibility#bem#sass/scss
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted about 2 months ago

    What could a novice like me comment about on your work than to open my mouth and say wow!

    You forgot to add border-radius to the top right of the container in mobile view.

  • Yari Morcus•500
    @YariMorcus
    Submitted over 2 years ago

    Article preview component made in HTML5, SCSS and JS (DOM API)

    #accessibility#sass/scss#gulp
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 2 months ago

    You've built a solid HTML and CSS structure — great work! Here's some Suggestions for Improvement:

    1. JavaScript Functionality Missing: Your share button (.js-article-preview__share-button) likely requires JavaScript to toggle share options. Be sure to include that script or note it’s under development.

    2. Accessibility:

    The <img> tag for the author’s avatar is missing meaningful alt text. Even if decorative, alt="" should be justified (or ideally include a descriptor).

    Consider role="img" and aria-hidden="true" for decorative icons.

    1. Class Naming Consistency: You're using js-article-preview__footer but there's no corresponding JavaScript in this snippet. Clean this up if JS won't be used, or include the script.

    2. Performance:

    Consider using loading="lazy" on the avatar image to optimize performance.

    Minified CSS is great, but it would help to break large chunks into separate CSS files for readability during development.

    1. No fallback for .webp images: Not all browsers (especially older ones) support .webp. You might consider using the <picture> tag to provide a fallback like .jpg or .png.

    2. Missing Closing </footer> & JS: Your code is cut off after <footer class="footer.... Ensure you properly close your document and include any missing parts (likely JS interactivity).

    Registering Event Listeners issue

    You mentioned event listener conflicts and difficulty debugging them. Here are some suggestions:

    1. Avoid redundant listeners: Ensure you’re not attaching multiple listeners to the same element unnecessarily—especially within functions that can be called multiple times (like dynamically rendering DOM elements).

    2. Use event delegation when possible: Instead of attaching listeners to multiple individual elements, attach a single listener to a parent and use event.target to handle events based on child classes/IDs.

    container.addEventListener('click', function (e) { if (e.target.matches('.share-button')) { toggleShareOptions(); } });

    1. Debugging tip: Use console.log() statements generously when you’re tracing events or conditions. Or use debugger; to pause execution in the browser's DevTools.
  • Claire Karsenti•130
    @ClaireKarsenti
    Submitted over 2 years ago

    Testimonials grid section using SASS

    #accessibility#sass/scss
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 3 months ago

    I cannot access your GitHub repository, make sure its properly linked.

  • Jason Burke•170
    @JasonPBurke
    Submitted 4 months ago

    Using grid template areas and sass

    #sass/scss
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 4 months ago

    Feedback on Your Four Card Feature Section Solution

    Your solution is well-structured, clean, and effectively implements CSS Grid for layout. Below is an evaluation based on semantic HTML, accessibility, responsiveness, and code quality.

    Strengths:

    1. Good Use of Semantic HTML

    Proper use of <header>, <main>, <h1>, <h2>, and <p> improves readability and SEO.

    Suggestion: Instead of using <div class="card">, consider using <article class="card"> for better semantic meaning.

    1. Grid-Based Layout for Better Control

    grid-template-areas helps maintain a structured, responsive design for different screen sizes.

    The display: grid layout ensures cards are positioned correctly.

    1. Typography Consistency

    The Poppins font is well-integrated.

    Class-based font weights (poppins-extralight, poppins-semibold) improve readability and maintain a consistent text hierarchy.

    1. Accessible and Descriptive Alt Text

    Image placeholders (::after content) are used correctly to maintain visual hierarchy without cluttering HTML.

    Improvement: Add a screen-reader-friendly alternative by using ARIA labels or visually hidden text. Areas for Improvement:

    1. Accessibility Enhancements

    Solution: Add aria-labels for better screen reader compatibility.

    <h2 class="poppins-semibold" aria-label="Supervisor - Monitors activity to identify project roadblocks">Supervisor</h2>

    Also, for <h1>, wrap each span in a <span role="text"> to improve screen reader navigation.

    1. Missing Mobile Alignment Adjustments

    The mobile layout is centered, but cards could be better spaced. Solution: Adjust the gap and margin in media queries.

    @media (max-width: 768px) { main { gap: 1.5rem; margin-block-end: 2rem; } }

    1. Improve Readability of Inline Styles in SCSS

    The grid-template-areas section is correct but could be formatted better. Solution: Organize it into a more readable structure:

    main { display: grid; gap: 2rem; grid-template-areas: ". team ." "super team calc" "super karma calc" ". karma ."; grid-template-columns: 1fr 1fr 1fr; }

    This makes it easier to debug and maintain.

    Final Thoughts

    Your solution is visually appealing and well-structured. With minor accessibility improvements, better spacing for mobile, and SCSS readability enhancements, this would be a perfect submission.

    Great job, keep up the great work!

  • Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Submitted 4 months ago

    A responsive four card section using flexbox

    #accessibility#sass/scss#webflow
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 4 months ago

    Feedback on Your Four Card Feature Section Solution

    Your solution is well-structured and visually appealing! Below is a breakdown of strengths and areas for improvement based on semantic HTML, accessibility, responsiveness, and code quality.


    ✅ Strengths:

    1. Good Use of Semantic HTML

    Proper use of <main>, <section>, <h1>, <h2>, and <p> tags enhances readability and SEO.

    Suggestion: Instead of using <div> for each card container, consider using <article> for better semantic meaning.

    1. Accessible Alt Text for Images

    Your alt attributes provide context for screen readers.

    Improvement: Instead of "a building icon", use "Team Builder icon representing team structuring" for more descriptive alt text.

    1. Responsive Layout with Flexbox

    The media query (@media (min-width: 800px)) effectively shifts from column layout (mobile) to row layout (desktop).

    The flex-direction: row helps align cards properly on larger screens.

    Possible Enhancement: Use grid-template-areas for more precise control over the desktop layout.

    1. Consistent Typography

    You effectively use Poppins for text, ensuring a clean and modern look.


    ⚠ Areas for Improvement:

    1. Missing Landmarks for Better Accessibility

    ✅ Solution: Wrap your main content in a <section role="region" aria-labelledby="main-heading"> and add a <header> tag.

    Example:

    <header> <h1 id="main-heading">Reliable, Efficient Delivery</h1> </header>
    1. Inconsistent Spacing in Cards

    The text inside .card p has width: 30ch;, which may cause awkward line breaks on different screen sizes. ✅ Solution: Use max-width: 100% or text-align: justify; for better adaptability.

    1. Flexbox Alignment Issue on Desktop

    The .cards-container layout works, but the middle column isn't perfectly centered. ✅ Solution: Instead of column-gap: 2rem;, try:

    .cards-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }

    1. Footer Readability

    The attribution text in the footer is very small (font-size: 11px). ✅ Solution: Increase to 14px and add some padding.


    💡 Final Thoughts

    Your solution is well-executed, and the use of Flexbox makes it responsive. Improving accessibility, refining spacing, and using CSS Grid for better alignment would take it to the next level.

    Great job, Abdulgafar-Riro! Keep up the good work! 🚀

  • P
    Ruben de Man•760
    @developer-ruben
    Submitted 6 months ago

    Product preview card component

    #accessibility
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 5 months ago

    Feedback on the Product Preview Card Component Solution

    1. Semantic HTML Usage

    ✅ Good Use of Semantic Elements:

    The solution correctly uses <main>, <article>, <picture>, <h1>, <p>, <button>, and <footer>, improving readability and accessibility.

    <picture> is used effectively to serve different images based on screen size.

    🔧 Possible Improvement:

    Consider using <section> instead of <div class="card__content"> for better semantic grouping of content.


    1. Accessibility Considerations

    ✅ Accessible Features Included:

    Alt Text on Images: The product image has an appropriate alt description.

    High Contrast Colors: The dark cyan price contrasts well with the background.

    Keyboard Navigability: The button uses proper :hover effects and cursor styles.

    🔧 Possible Improvements:

    The cart icon inside the button has an empty alt attribute (alt=""). While this prevents screen readers from reading an unnecessary description, you could add aria-hidden="true" to explicitly hide it.

    Consider adding aria-label="Add Gabrielle Essence Eau De Parfum to cart" to the button to make it more descriptive for screen readers.


    1. Responsiveness & Layout

    ✅ Good Mobile Optimization:

    The use of CSS Grid (grid-template-columns: 1fr 1fr) ensures a well-structured desktop layout.

    The media query (max-width: 600px) properly switches to a single-column layout for mobile users.

    The images are responsive, thanks to max-width: 100% in the img styling.

    🔧 Possible Improvements:

    The mobile card width (max-width: 343px) is quite small. Consider allowing it to stretch slightly for better usability.

    The padding (2.4rem) in .card__content may feel a bit tight on smaller screens—try reducing it slightly.


    1. Code Quality & Readability

    ✅ Strengths:

    Clear, modular CSS structure with variables (:root) for colors and text styles, making it reusable.

    Consistent use of BEM naming conventions (card__content, card__price--new), improving maintainability.

    Logical CSS resets (e.g., box-sizing: border-box; margin: 0; padding: 0;).

    🔧 Possible Improvements:

    The custom fonts should have font-display: swap; to prevent FOUT (Flash of Unstyled Text). Example:

    @font-face { font-family: "Montserrat"; src: url("./assets/fonts/Montserrat/static/Montserrat-Medium.ttf"); font-weight: 500; font-style: normal; font-display: swap; }

    The card image width is explicitly set (width="300" height="450"), which might cause scaling issues. Consider using CSS to control dimensions instead of inline attributes.


    1. Design Consistency with Frontend Mentor Challenge

    ✅ Matches the design well:

    The font styles and colors align with the challenge requirements.

    The pricing structure is clearly presented with a strikethrough for the old price, maintaining a good visual hierarchy.

    🔧 Minor UI Enhancements:

    The letter spacing (0.5rem) in .card__category might be too wide, making the text harder to read. Reducing it slightly could improve readability.


    Final Thoughts

    This is a well-executed solution with clean, maintainable code and strong responsiveness. With a few minor tweaks—like adding aria-label for accessibility, optimizing font loading, and refining mobile spacing—it can be even stronger.

    Would love to hear if there were any challenges faced while implementing this! Great job! 🚀

  • EDWINTOAPANTA02•120
    @EDWINTOAPANTA02
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have reached this point, I would investigate more about media queries

    What challenges did you encounter, and how did you overcome them?

    use the div, the flex, @media queries, the measurements like vh vw, 100% rem

    What specific areas of your project would you like help with?

    use the div, the flex, @media queries, the measurements like vh vw, 100% rem

    recipe page

    #accessibility#airtable#angular#angular-material#anime-js
    2
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 6 months ago

    Feedback on Solution:

    1. Semantic HTML Usage:

    The solution employs semantic elements like <header>, <ul>, <ol>, and <table>, which enhance readability and accessibility. However, the container <div>s for various sections (e.g., .time_container, .nutrition_container) could be replaced with more meaningful tags like <section> or <aside> to improve semantics.

    1. Accessibility Improvements:

    Ensure the image has an alt attribute that accurately describes the content for visually impaired users. While "plato" works as a placeholder, a more descriptive text like "A simple omelette served on a plate" would be better.

    Add aria-labels or aria-describedby for complex sections like the nutrition table to provide more context.

    The contrast ratio for some text colors (e.g., hsl(332, 51%, 32%) on a white background) could be improved for better readability.

    1. Responsive Design:

    The layout adapts well to smaller screens, but the absolute positioning of the .img_container in the media query could lead to overlapping content if the title length increases. Consider using flexbox or grid for a more dynamic layout.

    Ensure the font sizes scale appropriately across all screen sizes, especially for mobile devices.

    1. Code Structure and Reusability:

    The CSS is well-organized, but you could make use of utility classes for common styles (e.g., margins, padding, text alignment) to reduce redundancy.

    Consider extracting repetitive styles (like font-family for headings) into a base class or global reset.

    1. Design Consistency:

    The solution closely matches the design intent, with clear sectioning and good alignment. Adding a hover effect for links and buttons could improve interactivity.

    The text justification (text-justify: distribute;) might lead to uneven spacing, which can make reading harder. Consider using text-align: left or justify instead.

    Suggestions for Improvement:

    Add more descriptive comments in your CSS for better maintainability.

    Include a favicon in the <head> for a complete branding experience.

    Use a CSS preprocessor like SCSS to modularize styles for better scalability in larger projects.

    Overall, this is a solid solution with great attention to detail and a clear understanding of responsive design principles. Keep iterating on semantic enhancements and accessibility features to make it even better!

  • haquanq•1,635
    @haquanq
    Submitted 12 months ago

    Mobile-first responsive social link profile

    #accessibility#bem
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 6 months ago

    Feedback for Haquanq's Social Links Profile Solution

    1. Semantic HTML

    Strengths:

    The project uses semantic tags such as <main>, <section>, <nav>, and <footer> effectively.

    Proper use of heading tags (<h1>, <h2>) makes the content structure logical.

    The use of aria-label on navigation links is commendable for improving accessibility.

    Suggestions for Improvement:

    Include a <header> tag if applicable to better represent the start of the content structure.

    Add <ul> or <ol> inside the <nav> to group the links semantically, especially since it's a list of social links.

    1. Accessibility

    Strengths:

    The color contrast between text and background meets accessibility standards.

    aria-label attributes enhance screen reader compatibility.

    Hover and focus states are clear and provide good feedback for interactive elements.

    Suggestions for Improvement:

    Include alt text for images that describe their content meaningfully (e.g., the avatar image could use a description like "Jessica Randall's profile picture").

    Add a skip navigation link for better keyboard navigation.

    Use rem or em for font sizes to respect user accessibility settings.

    1. Responsiveness

    Strengths:

    The layout adapts well to different screen sizes, maintaining good readability and spacing.

    The mobile-first workflow ensures smooth scalability.

    Suggestions for Improvement:

    On larger screens, consider increasing the max-width of the card for better use of space.

    Test the design on more screen widths to ensure no content appears cramped or stretched.

    1. Code Structure

    Strengths:

    The CSS is modular with custom properties (CSS variables), making it reusable and easy to maintain.

    The project adheres to a clear and consistent naming convention for classes.

    Suggestions for Improvement:

    Consider organizing CSS into separate files if the project scales (e.g., base.css, components.css).

    Use comments in the CSS file to group styles logically (e.g., typography, layout, utilities).

    1. Design Alignment

    Strengths:

    The design closely matches the original challenge's layout and style.

    Hover states align well with the design's intent, providing a good user experience.

    Suggestions for Improvement:

    Review spacing and alignment to ensure consistent padding and margins (e.g., between the avatar and name or between the links).

    Adjust the avatar size slightly for better balance in larger viewports.

    Overall Feedback

    This is a solid solution that effectively meets the challenge requirements. The semantic HTML and accessibility considerations are commendable. With minor adjustments to responsiveness, accessibility, and code organization, this project could be even more polished. Keep up the excellent work!

    Marked as helpful
  • Codecrftr•20
    @Codecrftr
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    from scratch i knew what i had to do which earlier i could not so i am happy with my progress and now i want to work more and more to make more complex design.

    What challenges did you encounter, and how did you overcome them?

    i faced challenges like how to merge and customize the design

    What specific areas of your project would you like help with?

    with border coloring and more complexities over it along with that the responsiveness

    blog preview

    #accessibility
    1
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 6 months ago

    1.Fixing the Border Radius

    Uncomment and apply the border-radius property to both .card and .text for a consistent, modern look.

    1. Redundant Styles:

    Some CSS rules are repeated or unnecessary (e.g., padding: 18px is applied twice in .text).

    Simplify by consolidating common styles.

    Suggestion:

    .text { background-color: white; padding: 18px; margin: 0 1em; }

    1. Font Sizing for Headings:

    The font size for <h1> (22px) could be increased slightly for better visual hierarchy relative to the other text elements.

    Suggestion:

    .text h1 { font-size: 1.5rem; /* Dynamically scales better */ margin-bottom: 10px; }

    1. Footer Alignment:

    The .foot section feels disconnected. Add padding or alignment to integrate it better with the design.

    Suggestion:

    .foot { margin-top: 20px; text-align: center; font-size: 0.8rem; }

    1. Hover Effects for Interactivity:

    Adding hover effects to the <h1> or buttons/links would improve interactivity.

    Suggestion:

    .text h1:hover { color: hsl(218, 44%, 22%); cursor: pointer; transition: color 0.3s ease; }

    1. Image Sizing:

    The main image (.card img) width is set to 95%, but this could lead to slight misalignment. Use width: 100% with proper padding/margin to ensure consistent sizing.

  • P
    Bart•280
    @barterkamp
    Submitted 6 months ago

    QR component

    2
    Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Posted 6 months ago

    You've done a wonderful job, below is my commendendations and recommendations:

    1. Semantic HTML

    Strengths:

    The use of <main> and <section> elements adds semantic meaning to the layout, which is great for accessibility and structure.

    The <h1> element is correctly used for the primary heading, improving content hierarchy.

    Suggestions:

    Consider adding an <aside> or <footer> for the attribution section to give it semantic meaning and separate it from the main content.

    Add aria-label attributes where necessary, e.g., on the wrapper <div>, to clarify its purpose.


    1. Accessibility

    Strengths:

    The alt attribute on the <img> tag improves accessibility for screen readers.

    The text is legible, with sufficient color contrast between the text and background.

    Suggestions:

    Provide more descriptive alt text for the QR code image. Instead of "QR code", use something like "QR code leading to Frontend Mentor website".

    Add a lang attribute (e.g., lang="en") to the <html> tag for proper language declaration.

    Ensure focus styles are visible for interactive elements, such as links in the attribution.


    1. Responsiveness

    Strengths:

    The design is responsive and adapts well to smaller screens with the use of max-width and centered content.

    The box-sizing: border-box rule ensures consistent element sizing.

    Suggestions:

    Test the layout on a wide range of devices. While the QR component itself is responsive, the wrapper and attribution section might feel cramped on very small devices (e.g., 320px width). Consider additional spacing adjustments.


    1. Code Structure and Readability

    Strengths:

    The CSS is well-organized with a clear structure (e.g., variable declarations, resets, component styling).

    The use of custom fonts and CSS variables ensures reusability and consistent styling.

    Suggestions:

    Consider grouping component-specific styles under a .component class or namespace to avoid conflicts in larger projects.

    Use consistent units (e.g., rem instead of px) for better scalability across different devices and accessibility settings.


    1. Design Consistency

    Strengths:

    The design closely follows a typical QR code component structure, making it simple and user-friendly.

    The spacing, font sizes, and colors align well with modern UI design principles.

    Suggestions:

    Cross-check with the provided design if any minor visual discrepancies exist (e.g., margins, font weights, or colors).

    If the design allows, experiment with hover effects on interactive elements like the QR code image or attribution links for a more polished user experience.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub