Final submission -- Improved accessibility; improved semantic HTML

Hey, glad to be back. Desktop layout's background-image right now is not occupying the whole right side like on the original, it is responsive though but at mobile breakpoint, there is an extra white-space underneath which the footer is occupying, it would be great to integrate the footer within the whole layout itself so that the background is not like cut off.

Some other suggestions would be:

• First, it would be great for you to add these as a base styling:

html {
  box-sizing: border-box;
  font-size: 100%;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

Making all the elements use box-sizing will really help you control an element's sizing so always apply them to all.

• Honestly, I would prefer to make use of the right-background-image inside the .background selector. If you try to look at the .image-host, inspect and hover it on dev tools, you will see that the content's size is on the right whilst the content itself is on the left since you are changing the top and left property of it. It is hard for me to tell some css on this since the markup is a bit confusing :>
• Now, a typical layout of a site looks like:

<header />
<main />
<footer />

This way, all element that has content are inside landmark elements and on this , I would prefer as well having a header and main since it make sense on this kind of layout.

• Website-logo img should be visible in a website since it is one of the meaningful elements on a site so using ::before on it is not really great. Make it an img with a proper alt value inside the supposed header if you will make it that way.
• The form works but it currently lacks an informative way of telling a user has an error. The error-message is only seen visually. A pseudocode of a proper form looks like when it has an error:

if ( input is wrong )
  input.setAttribute("aria-invalid", "true");
  input.setAttribute("aria-describedBy", id of the error-message);
else 
  input.removeAttribute("aria-invalid");
  input.removeAttribute("aria-describedBy");

The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy. You can take a look of this simple snippet of mine see the javascript and the html which are important.

• If you remove the outline property of an element, make sure to add another custom visual indicator on the element's :focus-visible state. Try using tab on your keyboard to navigate the site, you will have a hard time since there is no indication on where you at.
• You can use ul on those logos since those are "list" of logos right and each of them should have a proper alt which the value is the name of the company I think like alt="spotify".
• Lastly, just the mobile state like what I said earlier about the extra white-spacing.

Aside from those, really great job on this one.

Hey ughm, there are lots of border and images absence on this one. Are you refactoring right now? Also if you want, if you are done you could reply on this again and i'll give a feedback on this site how about that:>

Hey @KristaCalleja 👋🏻

I've got some good new and some bad news 🙃 Let's start from the good ones, shall we?😃

I've got the picture positioned...sort of 😅

.wrapper {
    width: 100%;
    background-image: url(./starter-code/assets/tablet/image-host.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: overlay;
    background-color: var(--very-dark-blue);
    background-position: center;
}
.card {
    border: 1px red solid;
    margin: 0 auto;
    padding: 3em 1rem;
    max-width: 365px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

those are the styles that kind of get what you're looking for. But here comes the bad news, this is not responsive, it works with 375px plus or minus. However, after that it breaks again. I believe you need to change HTML a bit. Perhaps this will be useful enough to continue the project without changing the HTML, it's pretty hard to change things only with dev tools, so with the actual code you may be able to put this together.

I hope this was helpful 👨🏻‍💻 let me know if you have any questions. Cheers 👾