Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Very close to the final design. Learnt how to use gradients. Lot of practise with flexbox Great step forward in handling position of footer in this project, but still not the most clean styling.
What challenges did you encounter, and how did you overcome them?- Flexbox: in the Summary section's skill boxes, struggled to keep the first 2 elements (icon and skill name) at the start and the last element (score) at the end without grouping the first 2 elements into a div, i.e. keeping them both as direct children of the flexbox. Achieved by giving 3rd element margin-left: auto, but ideally wanted to fix the issue using flexbox properties and knowhow
- Manipulating position of the card when its width and height were set as percentages. Its size obviously changes as I resize the browser window, which made it difficult to set the correct styling when it came to making the page responsive. Solved by switching to fixed height and width in pixels, but would like to learn how to keep relative measurements such as rem / percentages and still manage responsive styling
- Footer issues. Managed to keep it at the bottom and center even when scrolling. Di so by setting position to static and defining suitable padding to ensure it remains at the bottom at different viewing RWD breakpoints. But ran into an issue when exceeding the mobile-width breakpoint and entering desktop view -- the footer would jump to the top of the page. Still not sure why -- any ideas? Had to "force fix" by setting top padding
As mentioned above
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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