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.