Skip to content
Submitted 11 months ago

Four card feature section

accessibility, pure-css
Sunil•370
@SunilBaghel002
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Next time, i would made more understandable website with better design

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

I encounter challenges while making website responsive and overcome using flexbox and grid in css.

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

I like fully responsiveness in this website

Code

Please log in to post a comment

Log in

Community feedback

  • Mohit kulkarni•170
    @burningbeattle

    Semantic HTML:

    Use <article> or <figure> for each card to enhance semantics. Provide descriptive alt text for images. Accessibility:

    Ensure color contrasts meet WCAG standards. Make sure all interactive elements (if any) are keyboard navigable. Use ARIA roles only when necessary. Responsive Layout:

    Adopt a mobile-first approach using min-width media queries. Test across various devices and screen sizes. Ensure consistent spacing and sizing across breakpoints. Code Structure:

    Implement BEM naming conventions for better scalability. Consolidate repetitive CSS rules. Organize CSS for readability, possibly using preprocessors. Adherence to Design:

    Ensure pixel-perfect accuracy in font sizes, spacing, and element dimensions. Implement design-specific interactivity like hover effects. Correct file path typos (assets instead of assests). Optimize font loading by using <link> instead of @import. Use relative units (rem, em) for better scalability. Add transitions and hover effects to improve user experience. By addressing these areas, your project will not only be more robust and maintainable but also provide a better user experience across different devices and for all users, including those relying on assistive technologies.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord