With mobile 1st triple div and using display: table-cell for desktop
Design comparison
Solution retrospective
-This time its the 1st using a lot of padding and margins to get accord to design. There's any other 'better' way ?. If there's i'm open to learn anything new.
-PS: i take 02:17:44 to accomplish this work with 2 breaks from the set up of project, approach with design using Excalidraw, doing the task, creating and managing github with pages and fixes.
Its a good time? bad? average?
Thanks to anyone who responds
Community feedback
- @vanzasetiaPosted over 2 years ago
Hello, Kimue! 👋
I would recommend focusing on the quality of your code instead of how fast I could finish this challenge. Speed will come in nature but you need to put some effort to make the code has good quality.
I have a recommendation on making the cards perfectly centered on the page. So, my recommendation is to make the
body
element as the flex container and addmin-height: 100vh
to it so that it allows to grow if needed. Also, add somepadding
to prevent the card from touching the browser edges or simply having full width and height on small screen sizes.I highly recommend not setting any styling on the
html
element because I would like to think of thehtml
element like a table and thebody
element as a piece of paper so I don't want to change the way the table of the paper, instead it's recommended to adjust the element inside thebody
element instead. So, the point is I recommend removing themax-width
andoverflow
properties on thehtml
element to prevent any issues.I suggest making the "Learn More" buttons as link elements instead of
button
elements. As a user, I would expect after I click one of those buttons, I would get navigated to another page. That's what I would expect. Now, what do you think is going to happen after the user clicks the "Learn More" button?That's it! Happy coding! 😁
1@dratinixgithubPosted over 2 years ago@vanzasetia i Did all the changes and put ur name in the README file as a reminder of your feedback. Thank you
0@vanzasetiaPosted over 2 years ago@dratinixgithub Thank you for putting my name in the README. I really appreciate it! 😄
0
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