Design comparison
Solution retrospective
This is my first project where I actually used CSS Grid, and a little bit of Flexbox, after getting some feedback from the awesome people on here. I also attempted to add some semantic HTML because I've heard that it improves accessibility, and I'm hoping it's a lot more responsive now that I'm using grid and flex. I admit though, this project was definitely humbling for me- I really made sure to take my time, and I had my moments where I kind of overthought things that had kind of a simple fix at the time. Figuring out how to really use the grid took some time, and I definitely struggled to fit the elements inside of the boxes, had a little bit of trouble laying them out in the way that I intended and so on. One thing I really had trouble with initially was getting the avatars, names and "verified graduate" statuses to display the ways they should, and I decided to cave and just fix them up using relative positioning for all elements- there was probably a better way to handle that, since it's off center in most of the panels other than the first one. I also kind of wrote the specs for the mobile view using the sort of main body of CSS, and wrote the specs for the desktop view using the media query- when a lot of times I do notice that it's usually the other way around in other projects. Is it a better practice just to optimize it for the desktop first and then worry about mobile in the media query? Or does that really matter other than maybe saving you from some confusion? I mostly write it that way because of the editor that I'm currently using mostly. Other than that I'd love to hear some feedback from you guys!
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