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 =)
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>
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 =)
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 }
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();
});
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()
My solution to the challenge, I don't have a paid plan so I look for references based on comparison.
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).
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.
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.
