@Stroudy
Posted
Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…
- Wrapping a
img
on its own in adiv
in unnecessary and can confuse screen readers,
<div class="image">
<img src="./images/image-qr-code.png" alt="QR Code" class="qr-code">
</div>
-
Using a
<main>
tag inside the<body>
of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content. -
Using
max-width: 100%
ormin-width: 100%
is more responsive than justwidth: 100%
because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning. -
Developers should avoid using pixels (
px
) because they are a fixed size and don't scale well on different devices. Instead, userem
orem
, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter. -
Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like
1.5
for flexibility. Avoid using fixed units likepx
or%
, as they don't adapt well to changes in font size or layout. -
Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
@ryanlim-dev
Posted
@Stroudy thank you for your reply, I'm a beginner coder so this really helps!
I just have a couple of questions:
- With the image, did you mean that I should just get rid of the <div> brackets and just leave the <img> part?
- In regards to using a full modern CSS, did you mean using the code below, or shoud I use all the code shown in the full modern reset article you linked?
.* {
margin: 0;
padding: 0;
height: 100%
}
2a. Should I use this in every web project I do as best practice?
@Stroudy
Posted
Hey @ryanlim-dev,
-
An image (
<img>
) doesn't need to be wrapped in a<div>
on its own because the<img>
element is already a standalone, self-contained element. It can be styled, positioned, and manipulated directly without needing a parent container. -
When referring to "using a full modern CSS reset", it typically means applying a reset or normalization stylesheet that ensures consistency across browsers by resetting default styles.
- Basic CSS Reset: This is a minimal reset to remove browser-specific styles, such as default margins and padding.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
- Full Modern CSS Reset: A more detailed reset, which may include additional rules for typography, form elements, and layout, based on a full reset.
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
#root, #__next {
isolation: isolate;
}
2a. 100% for consistency, You can use basic one for small solutions and a full reset for bigger ones, Why not just use the full one every time, That is what I have started to do.
Hope this clears up some of your questions.
@Stroudy
Posted
Hey @ryanlim-dev,
-
An image (
<img>
) doesn't need to be wrapped in a<div>
on its own because the<img>
element is already a standalone, self-contained element. It can be styled, positioned, and manipulated directly without needing a parent container. -
When referring to "using a full modern CSS reset", it typically means applying a reset or normalization stylesheet that ensures consistency across browsers by resetting default styles.
- Basic CSS Reset: This is a minimal reset to remove browser-specific styles, such as default margins and padding.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
- Full Modern CSS Reset: A more detailed reset, which may include additional rules for typography, form elements, and layout, based on a full reset.
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
#root, #__next {
isolation: isolate;
}
2a. 100% for consistency, You can use basic one for small solutions and a full reset for bigger ones, Why not just use the full one every time, That is what I have started to do.
Hope this clears up some of your questions.