Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Single price grid component

pauleenann 240

@pauleenann

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What do I need to change in order to have a better website?

Community feedback

@petritnuredini

Posted

Fantastic work on completing the Single Price Grid Component challenge! 🌟 Tackling a project that involves responsive design and CSS styling to create a visually appealing component is a significant accomplishment. Your project demonstrates a good grasp of layout and styling principles. Here are some best practices and recommendations to enhance your project further:

  • HTML Best Practices:

    1. Semantic HTML: Consider using more semantic HTML elements for better structure and accessibility. Elements like <section>, <header>, and <article> could be used to define different parts of your layout.
    2. Alt Text for Images: Good job including alt text for images. Ensure they are descriptive for accessibility purposes.
    3. HTML Structure: Your HTML is well-structured and organized. Continue this practice for maintainability and readability.
  • CSS Best Practices:

    1. Responsive Design: You have implemented a responsive design using media queries. Ensure that the layout and font sizes look good and are functional on all device sizes.
    2. Hover States: For desktop users, implement noticeable hover states on clickable elements, like the 'Sign Up' button, to enhance interactivity.
    3. Consistent Styling: Maintain consistency in styling, particularly with colors and fonts. Using CSS variables, as you have done, is a good practice.
  • Accessibility Considerations:

    1. Keyboard Accessibility: Make sure all interactive elements are easily navigable using a keyboard.
    2. Contrast and Readability: Ensure text and background colors have sufficient contrast for readability, especially for users with visual impairments.
  • General Suggestions:

    1. Optimization: Optimize your images and assets for faster loading times, particularly for mobile users.
    2. Cross-Browser Testing: Test your layout across different browsers to ensure compatibility and a consistent user experience.
    3. Code Validation: Use tools like the W3C Validator to check your HTML and CSS for errors and standards compliance.

Every project is a learning journey, and you're definitely on the right path. Keep up the great work, challenge yourself with new projects, and continue honing your skills! 💪

0

@diaabsh

Posted

Nice Job 👌

Keep going 🥳

0

Please log in to post a comment

Log in with GitHub
Discord logo

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