Design comparison
Solution retrospective
I am new to front end development and also new to this community and i really hope to continue my practices . Please i will appreciate any feedback i get from the community . Thanks
Community feedback
- @adonmez04Posted about 1 year ago
Hi, @kellynick.
That's a good solution, keep coding. Here are some quick tips.
1 - You don't need to add padding to your
.main-section
class to give it some space or center. You can use flex or grid to center your container within the body (its parent).And you can use
max-width
andmargin: 0 auto
to add some space to the left and right side of your design. For example:You don't need this:
.main-section { /* background-color: hsl(30, 38%, 92%); */ /* padding: 9.6rem; */ /* height: 100vh; */ }
You can use this:
body { display: grid; place-content: center; margin: 0 auto; min-height: 100vh; background-color: hsl(30, 38%, 92%); }
These are to center your content within the body and make everything clearer and easier to read.
2 - Another thing is to decrease your
font-size
value to make your font smaller.html { font-size: 62.5%; }
It looks cool, but you don't need to use it. You can use more modern tools like the
clamp
feature. For example::root { /* 18px β 24px */ font-size: clamp(1.13rem, calc(0.99rem + 0.56vw), 1.50rem); }
This will grow and shrink your font-size to 18px - 24px between the
min-viewport: 375px
andmax-viewport:1440px
.You can also use the
clamp
function for the margin and padding areas and calculate these values here: https://utopia.fyi/I hope this will help you. You have good skills about coding, you just need to improve your skills. Keep coding and have a wonderful day.
1@kellynickPosted about 1 year ago@adonmez04 Thank you so much I really appreciate your feedback. I implemented your guide in my next project and it worked perfectly. Regarding decreasing my font from html{ Font-size:62.5% } To the modern way of doing it. I have to take some time to learn it . Thanks so much πππ I'll be submitting my next project soon I'll appreciate it you can help go through it. Thanks π
1@adonmez04Posted about 1 year ago@kellynick You're welcome. I highly recommend that you solve a project over and over again. For each iteration, you can focus on a different problem and try to implement some modern methods. I solved some projects 5 times and learned a lot each time...
0@kellynickPosted about 1 year ago@adonmez04 Thank you so much . I will do that. It will help me improve.
1
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