Design comparison
Solution retrospective
Fun challenge, tried to replicate the design as best as possible. Any feedback is welcome! š
Community feedback
- @Alokray007Posted 10 months ago
Hello there š
Good job on completing the challenge !
Your project looks really good!
I have a suggestion about your code that might interest you.
There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.
š Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page. This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
I hope this suggestion is useful for future projects.
Other than that, great job!
Happy coding.
0 - @osmanbay90Posted 10 months ago
Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:
1. Semantic HTML: Ensure you use appropriate HTML elements for each piece of content. For instance, use <main> tags and wrap cards to improve accessibility. Replacing the first child
<div>of the<body>with<main>can enhance the structure.2. Responsive Images: Give images a
max-width of 100%to ensure responsiveness across different devices. Also, consider adding a border-radius value for a polished look.3. Typography Consistency: Maintain consistent font sizes, text alignment, and margins. For instance, set
h1andpfont size to 15px(0.9375rem), align text to the center, and apply consistent margins.4. Accessibility: Use semantic elements like
<nav>,<article>, and<section>to improve screen reader compatibility. Add alt attributes to images for better accessibility.5. CSS Variables: Leverage custom properties (CSS variables) for consistent color schemes, font sizes, and spacing. This makes it easier to maintain and update styles.
6. Organized CSS: Group related styles together. Use separate CSS files for different components or sections. Avoid inline styles whenever possible.
7. Mobile-First Approach: Start designing for mobile screens first, then progressively enhance for larger screens. This ensures a better user experience across devices.
8. Browser Compatibility: Test your design on different browsers (Chrome, Firefox, Safari, Edge) to ensure consistent rendering. Use vendor prefixes for CSS properties if needed.
Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! š
0
Please log in to post a comment
Log in with GitHub
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