Design comparison
Solution retrospective
Do you have any tips for getting the margin right?
Community feedback
- @jchu51Posted over 1 year ago
It's great to see you're using
rem
units for padding. To enhance your CSS abilities further, consider creating files likevariable.css
andmedia.css
. These could be useful across many projects. Additionally, familiarizing yourself with Sass (Syntactically Awesome Style Sheets) could be very beneficial.I'd also recommend getting to grips with the BEM (Block, Element, Modifier) methodology. It's a popular naming convention for classes in HTML and CSS.
A few minor suggestions for improvement include:
- Working on your code formatting to improve readability and maintainability.
- Limiting the use of element selectors. This could prevent potential CSS conflicts in larger projects.
- From an accessibility perspective, include alt text in your img tags. Not only does this improve accessibility for those using screen readers, but it also provides a text descriptor when images can't be loaded.
- Try to steer clear of negative values in your CSS positioning. This can sometimes cause unexpected issues.
- For responsive design and performance, consider using the picture tag for providing different images for different device sizes. Alternatively, manage the scaling of images using the width and height attributes within the img tag.
Marked as helpful0@suhjiwon95Posted over 1 year agoThank you for your suggestion! @jchu51
I would like to know what would be the benefits of using the width and height attribute within the tag. Is the readability better than specifying the width and height in the css or is it just easy to manage?
0@WillamiFerreiraPosted over 1 year agokonichiwa @suhjiwon95
There are no benefits to use inline style (styles within HTML tags), do that just make your HTML "polluted". Inline style is most used when you are using some CSS framework like Tailwind or Bootstrap.
0@jchu51Posted over 1 year ago@suhjiwon95
- Width/Height Attributes
<img src="image.jpg" alt="Description" width="300" height="200">
- Inline Style Width/Height:
<img src="image.jpg" alt="Description" style="width: 300px; height: 200px;">
Width/Height Attributes:
- Have a lower specificity. If there's a conflicting CSS rule (whether inline or in a stylesheet), the CSS rule will typically override the width/height attributes.
- Offer a more limited form of control, ideal for when you just want to define a straightforward dimension for an image.
- If for some reason the associated CSS doesn't load or is disabled, providing a width and height can be a safeguard to ensure the image doesn't appear too large or too small.
It's beneficial to use the width and height attributes, and it's generally recommended to avoid inline styles. Using CSS and media query to controller the image size.
Marked as helpful1@suhjiwon95Posted over 1 year agoThank you for the clear explanation! I will make sure to adapt that for the future projects :D @jchu51
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