@ClaireKarsenti
Latest solutions
Responsive Testimonials Grid Section Solution
#sass/scss#webflowSubmitted about 1 month ago-
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?
-
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?
-
A responsive four card section using flexbox
#accessibility#sass/scss#webflowSubmitted about 2 months agoProduct Preview Card Component – Responsive Layout with Flexbox
#accessibilitySubmitted 3 months agoI would appreciate feedback on improving code efficiency, particularly in CSS structuring. Most especially, sass.
Responsive Recipe Page with Semantic HTML and Custom CSS Variables
#accessibilitySubmitted 4 months agoAreas I Would Like Help With:
- Accessibility Improvements:
Suggestions for further enhancing accessibility, particularly for users relying on assistive technologies.
- Responsive Design Optimization:
Feedback on ensuring a flawless layout on larger screens and more complex resolutions.
- Code Optimization:
Recommendations for making the code more concise, reusable, and scalable.
- Typography and Styling:
Advice on improving the visual hierarchy and overall aesthetic appeal of the project.
- 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.
Social Links Profile
#accessibility#bemSubmitted 4 months agoAreas Where Help Is Needed
- Accessibility Enhancements:
Suggestions for improving accessibility, especially for users relying on screen readers or keyboard navigation.
- Font Loading Optimization:
Feedback on improving the implementation of @font-face to ensure faster loading and better browser compatibility.
- Cross-Browser Compatibility:
Advice on testing and refining the design for consistent rendering across all major browsers.
- Design Improvements:
Recommendations for improving the visual appeal and user experience, especially in terms of spacing, typography, or hover states.
- Performance Optimization:
Guidance on optimizing the CSS and assets (like fonts and images) to reduce the project's overall load time.
- Scalability:
Insights on making the project more modular and maintainable for future updates or feature additions.
- Best Practices:
General feedback on coding practices, structure, and methodology to ensure the project adheres to modern standards.
Blog preview card
#accessibilitySubmitted 4 months agoSpecific Areas I'd Like Help With
- 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?
- 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.
- 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?
- 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)?
- 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.
- 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!
Latest comments
- @Abdulgafar-Riro
I cannot access your GitHub repository, make sure its properly linked.
- @JasonPBurke@Abdulgafar-Riro
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:
- 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.
- 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.
- Typography Consistency
The Poppins font is well-integrated.
Class-based font weights (poppins-extralight, poppins-semibold) improve readability and maintain a consistent text hierarchy.
- 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:
- 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.
- 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; } }
- 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@Abdulgafar-Riro
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:
- 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.
- 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.
- 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.
- Consistent Typography
You effectively use Poppins for text, ensuring a clean and modern look.
⚠ Areas for Improvement:
- 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>- 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.
- 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; }
- 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@developer-ruben@Abdulgafar-Riro
Feedback on the Product Preview Card Component Solution
- 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.
- 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.
- 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.
- 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.
- 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! 🚀
- @EDWINTOAPANTA02What 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
@Abdulgafar-RiroFeedback on Solution:
- 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.
- 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.
- 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.
- 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.
- 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!
- @haquanqWhat are you most proud of, and what would you do differently next time?
Hello 👋
What i have done
- Used my own judgement to achieve pixel-perfect
- Overridden
aoutlineeffect when element is focused - Utilized
clamp()for responsivemainpadding,min()for main card responsivewidth
Any feedback would be appreciated 🙏
@Abdulgafar-RiroFeedback for Haquanq's Social Links Profile Solution
- 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.
- 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.
- 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.
- 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).
- 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
