@jchu51
Posted
It's great to see you're using rem units for padding. To enhance your CSS abilities further, consider creating files like variable.css and media.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 helpful
@suhjiwon95
Posted
Thank 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?
@WillamiFerreira
Posted
konichiwa @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.
@suhjiwon95
Posted
got ya! @WillamiFerreira
@jchu51
Posted
@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 helpful
@suhjiwon95
Posted
Thank you for the clear explanation! I will make sure to adapt that for the future projects :D @jchu51
