Design comparison
Solution retrospective
Hi guys, please review what can I improve in my code. I had to go implement a lot of flex inside grid. Not sure if this was expected, but I tried to code the design, but I need to be more familiar with pixel perfect detailing like most of you. Please point out mistakes so that I can improve and also share best-practices to follow for such massive design. It was tough to give time along with my job, but it was fun to implement a brainstorming solution with crunch of time. It might not be the best solution, but I'm glad that it is working.
Community feedback
- @muiruri3000Posted about 1 month ago
Well done, keep it! Two things to note.
- on github you can go to settings > pages > host your static site, then use the url to post here so someone can see a live example of your site.
- px are not responsive at different viewports, additionally, a user cannot change font-size using the browser settings. a solution will be to use rem for fonts, and em for padding and margins, you can also use percentages(%). these are much more adaptable to different screen sizes. here's an explanation https://youtu.be/_-aDOAMmDHI Otherwise good work. the replica is awesome!
Marked as helpful0@softwaredev-skPosted about 1 month ago@muiruri3000 Hi, Thanks for taking time to check this project. Basically I opened frontendmentor and coded most part of it in single day in few hours as I was getting bored and didn't look it back because I had quite a hectic working hours from my job. By the way, it's hosted and link is there in GitHub repository sidebar (I changed my github's username, and it didn't reflect here. Updated now). I mostly use tailwind professionally, and that's why when I create personal projects, px comes naturally to me. I am forcing myself to use rem now whenever I have to use CSS directly instead of tailwind. Thanks again for taking time. I had completely forgotten about this platform. 😅
0@softwaredev-skPosted about 1 month ago@muiruri3000 However, I also want you to note that px are not responsive to viewports, they are basically relative to browser's default font size, mostly 16px if not changed (browser dependant). So change in viewport is not change in font-size. Changing default font size in browser will relatively change the font-size.
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