@Dudeldups
Posted
Hello! 👋
Congratz for finishing the challenge! There are some things that you could take into account for your next approaches:
- Do not declare font-sizes in
px. Useremor if you want it to scale according to the parent container, useem.
https://www.freecodecamp.org/news/why-use-rem-to-set-font-size-in-css/
-
A website should only have one
h1element with the main title. I know that a component like this is not supposed to have anh1but you could just leave it away in a challenge like this or visually hide it (and then start with anh2for the name) -
The grid does not have a padding, it touches the sides of the window right after the media query.
-
You are repeating yourself in your CSS to declare the colors. You could just give
.Kirathecolor: xx(and not each text element). Or you can create helper-classes so you just have to write one CSS rule and give each element the designated class. For example:
.text-black {
color: black;
}
.bg-white {
background-color: white;
}
and in your HTML:
<div class="profile bg-white text-black">
I know it's not a big repetition in this case, but just to let you know 🙂
Marked as helpful
@Unkookerinho
Posted
@Dudeldups How would you hide h1 element? Using diplay: none; or visibility: hidden; it says Page should contain a level-one heading
@Dudeldups
Posted
@Unkookerinho That's right, using display: none removes the element completely from being rendered. An element with visibility: hidden is being rendered, but it also takes up space just as if it was visible.
You can use a .sr-only (screen-reader only) class for such cases. The element is accessible for screen readers but it's not visible. Do keep in mind though that it would be focusable if it can get focus. This would be confusing because you can't see where the focus is.
.sr-only {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
