@HA3IK
@anar-sol
Submitted
Hello!
I had some trouble placing the hero image in intermediate sizes (especially between 480px and 768px). If you have a better solution than mine, I'd be glad to hear about it.
The W3C HTML validator considers it invalid to place a h2 inside a ul. I placed it there to have it as a grid element and place it among the li elements.
I then placed it inside a li, but I wonder if this is an accessible solution.
Any other advice is welcome =)
@HA3IK
Posted
About the “list”: I think that this is not a semantically correct solution.
Even if the H2 outline, at the current position, extends to the entire SECTION correct. I don't see the point of making the title, in the markup, a list item. H2 should be just a heading for the UL, not an item of it.
SECTION > H2 + UL > LI*5
I also saw that you have a duplicate ID linearGradient#a. You can easily fix this by simply declaring a generic SVG[height=0] somewhere separately on the page, it should work:
<svg height="0">
<defs>
<linearGradient id="a"> ... </linearGradient>
</defs>
</svg>
@anar-sol
Submitted
Hello!
I had some trouble placing the hero image in intermediate sizes (especially between 480px and 768px). If you have a better solution than mine, I'd be glad to hear about it.
The W3C HTML validator considers it invalid to place a h2 inside a ul. I placed it there to have it as a grid element and place it among the li elements.
I then placed it inside a li, but I wonder if this is an accessible solution.
Any other advice is welcome =)
@HA3IK
Posted
Hello, About “hero-image”.
But 1st: it's a very nice effect u got 👍 I'd leave it 😅
If you want to control this image within its position, you just need to disable its absolut position (make it position:static) THEN or change object-fit to "contain", or add overflow:visible.
IF you plan to center everything in one column (like on the mob.): .hero__body { margin:0 auto }
ELSE IF you want to keep .hero__body and picture horizontally, just make the parent element Flexbox .hero__container { display:flex }
@stac4uo
Submitted
@HA3IK
Posted
You don't need to listen to the same event on the same element for each function (DRY). You can call an anonymous function for all the functions you need:
button.addEventListener("click", e => {
newYear();
newMonths();
newDays();
});
Marked as helpful
@stac4uo
Submitted
@HA3IK
Posted
Hello,
A few recommendations for your JS code.
innerHTML, for this task use InnerText or textContent.hidden class, use [hidden] attribute.const showError = (label, input, output, msg) => {
msg.hidden = true; // instead of: msg.classList.remove("hidden");
label.classList.replace("text-SmokeyGrey", "text-LightRed");
input.classList.replace("border-LightGrey", "border-LightRed");
output.textContent = "--"; // instead of: output.innerHTML = "--";
}
// showError(yearsText, inputYear, years, errorMsg3);
// showError(monthText, inputMonth, months, errorMsg2);
// showError(dayText, inputDay, days, errorMsg1);
The same for hideError()
Marked as helpful
@GIR0SAN
Submitted
My solution to the challenge, I don't have a paid plan so I look for references based on comparison.
@HA3IK
Posted
Hello.You are using the HEADER tag incorrectly.
Semantically correct, if you wrap the main content in the MAIN tag.
And you can use FIGURE + FIGCAPTION for the card (picture + description).
Marked as helpful
@amalhanaja
Submitted
@HA3IK
Posted
Also, SECTION is tag of "Sectioning Content" category - creates a section that defines the scope of the heading (H1-6) content.
That is, semantically, MAIN data (with FIGURE) is outside the context of H1.
Marked as helpful
@amalhanaja
Submitted
@HA3IK
Posted
Hello. Instead of creating a new separate SECTION for the title and description, you can use FIGCAPTION, which is specifically intended to add text to the FIGURE content.
MAIN > FIGURE > IMG + FIGCAPTION > H1 + P
This will allow you to keep your HTML structure cleaner and more logical.
Marked as helpful
