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

Responsive Product preview card component

@Prajwal-88

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Learnt about grid

Community feedback

@sliyarli

Posted

Hey @Prajwal-88, here are some suggestions to help you further improve your coding skills and web development projects:

1 - Optimize Images: While your use of mobile and desktop images for different screen sizes is great, consider optimizing the images for the web to ensure fast loading times. Tools like ImageMagick or online image compressors can help.

2 - CSS Organization: As your projects grow, it's a good practice to organize your CSS rules into separate files based on their purpose (e.g., layout, typography, components). This keeps your codebase clean and maintainable.

3 - Responsive Typography: Consider using rem units for font sizes to ensure responsive typography that adjusts well across various screen sizes. This can provide a more consistent reading experience.

4 - Accessibility: Always prioritize accessibility. Use semantic HTML elements, provide appropriate alt text for images, and ensure sufficient color contrast for text and background elements.

5 - CSS Preprocessors: If you're interested in exploring more advanced CSS techniques, consider learning a CSS preprocessor like Sass or Less. They offer features like variables, mixins, and nesting that can streamline your styling workflow.

6 - Version Control: Learn and use version control tools like Git to track changes in your projects. This helps you collaborate with others and maintain a history of your codebase.

7 - JavaScript: As you progress, consider learning JavaScript to add interactivity and dynamic behavior to your projects. Start with basic concepts like DOM manipulation and gradually explore more advanced topics.

8 - Responsive Design Patterns: Experiment with different responsive design patterns and techniques beyond media queries. Learning about Flexbox and CSS Grid can greatly enhance your layout capabilities.

9 - Project Portfolio: Consider creating a personal portfolio website to showcase your projects, skills, and experiences. It's a valuable asset when applying for jobs or freelance opportunities.

10 - Explore Frameworks: Depending on your goals, exploring front-end frameworks like React, Vue.js, or Angular can provide you with a deeper understanding of modern web development practices.

11 - Continuous Learning: Web development is an ever-evolving field. Stay curious and continue learning about new technologies, best practices, and design trends to stay up-to-date.

12 - Code Reviews: Engage in code reviews with peers or more experienced developers. Constructive feedback from others can offer fresh perspectives and help you identify areas for improvement.

Remember that improvement is a gradual process, and every project you work on contributes to your growth as a developer. Keep practicing, building, and seeking opportunities to learn and apply new skills.

0

@Prajwal-88

Posted

@sliyarli thankyou i ll surely go on it

1

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