Design comparison
Solution retrospective
I am most proud of how I successfully managed the visibility and display of elements across different screen sizes (desktop, tablet, phone) with a mobile first approach. This project has really helped me get comfortable with manipulating display and visibility properties to create a responsive design that adapts well to various devices. However, if I were to do this project again, I would explore more efficient ways to handle responsive design, possibly by using more advanced CSS techniques like CSS Grid or Flexbox combined with CSS media queries. This might help streamline the process and reduce the amount of conditional logic required for different screen sizes.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was juggling between what should be displayed or hidden depending on the format (desktop, tablet, phone). It was tricky to ensure that each element appeared as expected on each device without conflicting with the layout or user experience. I overcame this by carefully managing the display and visibility properties in my CSS and thoroughly testing the design on multiple devices to ensure everything worked smoothly. Although I feel there's a simpler way to achieve this, I'm satisfied with how this approach got me used to handling responsive elements.
What specific areas of your project would you like help with?I'm having trouble understanding why, when I initially open the page in desktop mode, the image meant for mobile mode is sometimes displayed. However, when I refresh the page, the image disappears as it should. This behavior seems random—sometimes the image is there, and other times it isn't. I can't figure out what's causing this inconsistency. Also, I do hope that next time I will be able to finish the project faster by applying more efficient design techniques that I've learned from this experience. My goal is to continue improving my speed and efficiency in future projects.
Community feedback
- @teempePosted 3 months ago
Your HTML code is well-structured, with effective use of semantic elements. You're clearly on the right track! I have a few suggestions that could help you further improve your skills.
First, while your form is properly labeled, which aids accessibility, the id for the email input (email-address) and its corresponding label (for="email") don’t match—correcting this will ensure proper screen reader functionality.
Consider using the <picture> element to provide alternative versions of images for different screen sizes, which enhances responsiveness (see MDN documentation).
Also, re-evaluate the necessity of wrapping single images in <section> tags. Use <section> only when there’s a clear need for grouping content. For a single image, a <div> might suffice, or it may not need wrapping at all.
Regarding styling, be cautious with font size changes in media queries, as too many variations can affect readability. A consistent scale is generally more user-friendly. Additionally, creating reusable classes, such as for buttons, can improve both maintenance and readability of your CSS.
These are just a few areas to consider. Overall, you're doing great—keep up the good work!
Marked as helpful0@fatemzhPosted 3 months ago@teempe Thank you so much for taking the time to check my code and leave such precise feedback, I'll def check those suggestions to improve my code !
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