Design comparison
Solution retrospective
Hello , today , i tried to make the next challenge. I'd like to apologize in advance for the mess in my code, I'm looking foward to your comments and advises .
Community feedback
- @Ezekiel225Posted 9 months ago
Hello there 👋 @skyhall007.
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.
Use <main> to wrap the main content instead of <div>.
📌 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.
Learn more about Media Queries: Media queries are an essential part of responsive web design. They allow you to apply different CSS styles based on the characteristics of the device, such as screen width, height, orientation, and resolution. You can start by reading articles or tutorials on media queries to understand how they work and how to use them effectively.
Practice: The best way to become familiar with media queries is to practice using them in your projects. Start with simple layouts and gradually increase complexity as you gain confidence. Experiment with different breakpoints and CSS rules to see how they affect the layout on various devices.
Use a Mobile-First Approach: One popular strategy for responsive design is the mobile-first approach. This means designing the layout for mobile devices first and then adding styles for larger screens using media queries. This approach helps ensure that your website looks good on small screens and then adapts to larger screens.
I hope this suggestion is useful for future projects.
Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.
Other than that, great job!
Happy coding.
Marked as helpful1@skyhall007Posted 9 months ago@Ezekiel225 thanks you . I'll improve thank to your comment for sure
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