COMPLETE STYLING WITH css

Solution retrospective
I am most proud of successfully building my project using HTML and CSS, seeing it come together from a basic structure to a fully styled and functional webpage. Throughout the process, I learned many new concepts, especially about the CSS box model, layout techniques, and how small styling changes can dramatically improve a site's appearance. One thing I would do differently next time is plan my layout more carefully before coding — having a clear wireframe or sketch would have saved me time and made the development process smoother.
What challenges did you encounter, and how did you overcome them?One challenge I encountered was getting the layout to display correctly across different screen sizes, which I overcame by learning and applying responsive design techniques like using flexbox and media queries.
What specific areas of your project would you like help with?I would like help with improving the responsiveness of my project across different devices and making my CSS code more organized and efficient.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @hidayahmsabah
Hi AngelaMwelu, first off you've done a very good job! You managed to utilize flex concepts in your stylings as well as transitions when hovering over the buttons.
One suggestion for responsiveness, you can utilize CSS function max(). So in the case of your class "profile" you've set the width as 50% which works for larger screens, but when it gets to smaller screens, the width will still calculate 50% of the screen width which is not what the mock screen showed.
Other suggestions, providing a fallback font-family in case other user's browsers cannot load the custom font you have for your app. Try following the mock screen as close as possible especially the wordings (space, uppercase, etc.). For example, GitHub instead of Github and Frontend Mentor instead of Front end Mentor.
All in all, you did very well and keep it up!
- @HirenTumbadiya
You can use display flex with child width 100percent so this will take parent width and stay responsive with parent card.
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