Design comparison
Solution retrospective
I think I did it pretty well. I didn't take so long to center it, lol.. Maybe next time I should use another file to write css.
What challenges did you encounter, and how did you overcome them?For responsive, it was a little difficult for me to figure out the breakpoint. I did it just as I wanted. And I am not satisfied with that.
What specific areas of your project would you like help with?How many breakpoint do I need for real life website? What should I do or learn to make the website more responsive? I am still the beginner and hope you could guide me. And any other advices are also warmly welcome>>
Community feedback
- @JEWebDevPosted 4 months ago
Hello @Mystique9901!
I think i can respond your questions and add some tips.
-
How many breakpoint do I need for real life website? Instead of thinking of specific device breakpoints, use them when your design needs it. What i mean is if your design starts to stretch at 700px consider making a breakpoint for said witdth. You can read more about responsive design here.
-
Avoid using fixed widths and heights, instead use
min-height
max-height
min-width
max-width
-
Start with the mobile design first, i find it easier to code.
-
You can use the gap property when using flexbox or css grid to give spacing between the elements from the parent, like this:
.container{ padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
In the code above first we give the
container
apadding
of1rem
on all of the 4 sides (top, right, bottom, left). After we give it space between theimage
and the in this caseh3
with thegap
property. this way you can give spacing without having to do it manually in each element.If you have more questions feel free to reply.
I hope you find it useful! if so please mark it as useful.
Marked as helpful0@Mystique9901Posted 4 months ago@JEWebDev Thank you for your advice. And I will be careful about fixed width and height in the future.
0 -
- @lynaIFRPosted 4 months ago
Congrats on completing your first project, the code looks good, but I think you should take a look at the design guide provided in the project folder to come up with an output closer to the design output, also try to better center the card
0@Mystique9901Posted 4 months ago@lynaIFR Oh yes,.. I totally forgot to check the design guide.Thank you for your kindly advice.
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