Responsive site using Flexbox - first attempts with JS

Solution retrospective
This is my first project with some JS code. Also I tried this time to focus more on finding a good structure for my stylesheets.
Feedback is always welcome :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
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! 🙌
- @artimys
Hi Rene, nice job on the new challenge. Your design respond well.
I see that you're using the the
invalid
JS event, cool. I'll have to learn more about that but I can provide another solution to add to your arsenal. Attach asubmit
event listener to your form (example below). Then you can get the value from the email textbox to check if value exists and valid. To check if email is valid format look into regular expressions for email.const form = document.querySelector("name-of-form"); function validateForm(event) { event.preventDefault(); // code here } form.addEventListener('submit', validateForm);
I think your tablet layout can kick in sooner. There's a lot of white space surrounding the mobile layout that can be utilized. Also the dot image maybe looks out of place on tablet view
For the podcast icons, because they're icons that someone would click to go somewhere (call to action). Surround each image with an anchor tag.
Great job overall and hope it helps 👍👍
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord