Design comparison
Solution retrospective
I am most proud of learning how to work with Figma design files. I now understand how to extract the required pieces of information to create near or pixel-perfect projects.
What challenges did you encounter, and how did you overcome them?I didn't encounter a lot of problems however, I did realise I was using html which I believe is depreciated. Once I noticed, I switched it to . Looking back now, I realise that I placed the element outside of the element which may not be best practice however I am still achieving the desired result for now and am satisfied.
What specific areas of your project would you like help with?I would like tips on where I could have shortened the code size and possibly made better use of Semantic HTML elements.
Community feedback
- @huyphan2210Posted about 2 months ago
Hi, @DAJ350
I checked out your solution and have a few suggestions:
- You’re trying to center the
card
by usingmargin: 230.5px auto
, but this isn’t the best approach. Different viewports (the visible area of a web page on a user’s screen) have varying sizes, and hardcoding230.5px
won’t adapt to those differences. There are more flexible methods available, which I’ll explain below. For now, I’d recommend removing thatmargin
. - Once you’ve removed the margin, you can center both the
card
and theattribution
by using Flexbox. While there are multiple ways to achieve this, here’s a simple example using Flexbox on thebody
:
body { display: flex; flex-direction: column; justify-content: center; align-items: center; /* your styles below */ }
This will ensure everything is neatly centered across different viewport sizes.
- You should remove
width: 100%
from both thehtml
andbody
elements, as they are block-level elements by default, which means they naturally take up the full width of their parent container. Additionally, removeheight: 100%
from both thehtml
andbody
and instead applymin-height: 100vh
to thebody
. This ensures that thebody
always covers at least the full height of the viewport, allowing for better vertical responsiveness without restricting the content height. - Regarding your question about semantic HTML elements, your current markup is missing
<header>
,<main>
, and<footer>
. In your case, thecard
can be a <main> element, and theattribution
can be a <footer> for clearer structure and better accessibility.
Hope this helps!
Marked as helpful1 - You’re trying to center the
- @SvitlanaSuslenkovaPosted about 2 months ago
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
section should become <main>
It's better to use classes for css (not id)
Hope you found this comment helpful :)
Marked as helpful1 - @Mohamedkabba444Posted about 2 months ago
CSS Reset:
Use a modern CSS reset like:
- Andy Bell's Picocalc reset
- CSS Reset by Eric Meyer
- Normalize.css
Flexible Units: Instead of using fixed units (px), opt for:
- rem (root em): relative to the root element's font size
- em: relative to the parent element's font size
- dvh (dynamic viewport height) and dvw (dynamic viewport width)
- % (percentage): relative to the parent element's width or height 5 vw (viewport width) and vh (viewport height)
- min(), max(), and clamp() functions for flexible sizing
Example Usage:"
- width: clamp(20rem, 50%, 40rem) (sets width between 20rem and 40rem, with 50% max)
- font-size: 1.5rem (sets font size relative to root element)
- margin: 2em (sets margin relative to parent element)
- height: 100dvh (sets height to 100% of viewport height)
- max-width: 80vw (sets max width to 80% of viewport width)
Benefits:
- Improved responsiveness
- Better accessibility
- Easier maintenance
- Enhanced flexibility
By adopting these best practices, you'll create more maintainable, responsive, and accessible CSS code.
Marked as helpful1
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