Hi Rene, I've got a few suggestions in addition to the above that I hope you find helpful. I'm only viewing on mobile atm so can't review how it looks on other screen sizes I'm afraid.
Layout
- There's no background image visible like in the designs
- the form button is hitting the bottom of the screen for me. It needs some margin bottom or give a container/wrapper element some padding so it has space around it.
HTML
- The alt attribute on the logo image needs to say something more meaningful. At the moment there's no Name of the product on the page so assistive tech would just hear it called 'logo'
- I don't think those podcast service images would actually be links so don't think they need anchors around them. But tqey are a list of services, so should be in a list element
- Your form element needs a label
- it's more usual to put any validation messages next to the input they relate to, rather than under the whole form.
JS
- I don't actually think this is necessary at all. As you're using the required attribute on the input anyway, you can use a pattern attribute on the input (containing a regex) and css to acheive exactly the same thing (more in fact) thanks to the
:valid
and:invalid
pseudo states.
As a little extra, if you wanted a prettier focus state on your form elements, you could use drop shadows or pseudo elements on wrapper elements (because you can't add a pseudo element to an input) using borders or backgrounds to acheive matching rounded outlines.
Overall these are all small things and easily fixable, so I'd encourage you to take one more pass at this so you can use as a portfolio piece. Well done so far! 🙌
@rsauerwein
Posted
@grace-snow Hi Grace, thanks for your suggestions. I will definitely work on that in the upcoming 1-2 days and give you another update.
For now I have one question - you mentioned:
There's no background image visible like in the designs
That's interesting. Seems like I ran for my first time into some compatibility issues. Could you please clarify that? What part of background exactly is missing? The singing guy? I can't reproduce that with my iPhone.
What I actually did in my code:
generic.css
background-color: var(--dark-blue);
mobile.css
/* Background */
background-image: url("../assets/mobile/image-host.jpg");
background-position: center;
background-repeat: no-repeat;
background-blend-mode: multiply;
But actually it's a new concept for me to combine different backgrounds. What I actually tried to achieve for the mobile version was to mix --dark-blue
and image-host.jpg
together to match as good as possible with the challenge designs - hopefully you understand what I'm trying to tell you..
However, I just realized that on the iPhone that effect also doesn't seem to work as image-host.jpg
seems to be 100% in foreground. So yeah, I have for sure to work more on my mobile version (with Chrome on my desktop PC it looks better..)