Design comparison
Solution retrospective
Okay, I'm proud that I finished it, because I started doing it about 2 months ago, then I got burnt out, plus this project was unique to me, because I never used the Grid function.
What challenges did you encounter, and how did you overcome them?The difficulties were with the picture, which needed to be moved to the left, and replacing the picture when changing the screen resolution (for mobile screens). With the picture that should be on mobile screens, I decided with the help of ChatGPT, I asked him how to do this, he told me the source function and the problem was solved quickly. The second problem is the price tag and the button for purchasing the product. I solved the problem simply by thinking and using additional div elements.
What specific areas of your project would you like help with?I don't need help right now, but I want to learn more about Grid functions and others.
Community feedback
- @TedJenklerPosted 3 months ago
Hi @Yokene,
Nice project! Here are a couple of suggestions for improvement:
Flexbox & Div Reduction: Instead of relying on multiple <div> elements to structure your component, consider using Flexbox. This allows you to stack content with flex-direction: column, reducing unnecessary <div>s, which will make your code cleaner and improve both SEO and accessibility. Also, try using semantic HTML tags like <main>, <section>, or <article> where appropriate.
Headings Usage: I noticed that you are using <h1>, <h2>, and <h3> for styling purposes rather than their intended meaning. Headings should reflect the importance of the text, not just the style. This will improve your SEO score and accessibility, as search engines and screen readers rely on the proper use of headings to understand the structure of your content.
Keep up the great work!
Best, Teodor
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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