Responsive landing page, and my first challenge with JS.
Design comparison
Solution retrospective
Hi again everyone, this is my second Frontend Mentors challenge. Still in newbie level, but took me much more time than I thought it would.
I try to write easy to read, well structured code, how I can improve that? Is there need to comment (JS) code, or is it good as it is?
In CSS placing backgrounds were a pain in the neck.
-
On mobile solution, is it good practice to give body height 100vh? Did it because I wanted the background image to cover whole viewport.
-
On desktop solution I ended up limiting HTML elements width and length, because otherwise the background image of dots does not stay where I want them. Is there better solution for that?
Overall all feedback is welcome, did I use the right tools and best practices (html, css, js)?
Already Thank You! Best wishes Janne
Community feedback
- @grace-snowPosted over 3 years ago
Hi Janne
Great job on this! ❤️
Tiny things I notice on the design (viewing on mobile)
- huge padding-right on the input is hiding half the placeholder for me
- it would be nicer on rounded inputs and buttons if you used background shadow for a focus state - it's a bit jarring having square focus line on a pill-shaped element
In html
- I'd argue those logos are important, meaningful content so they should have alt text. I would also give them a visually hidden h2 (for screenreaders and search engines that says something like
works with major providers
or something like that) - the input, button and error should all be in a form element. This is important for semantics and screenreader controls (controls change when in a form vs normal document content)
- very important to give that input a label (aria-label)
- button doesn't need a for attribute
In js looks good ☺
- only a suggestion - I recommend only using querySelector for grabbing your elements (for consistency). It's often considered best practice to use a consistent naming convention with classes and use those for js selectors. E.g. At my work we follow the convention of
js-
prefixed classes are used for any element that is selected in javascript. It makes it easy to see what's controlling js when you look at html, and avoids the danger of someone else changing a style class / ID and that breaking the js.
Well done again on this
2@grace-snowPosted over 3 years agoOh and with the css
- min-height is better than height if setting to 100vh
- never change the width/height smaller on html
- I recommend an extra wrapper element (div) inside body and use that for things like limiting sizes (in rem), or even multiple containers if you need one for bg image, another for size... In real projects its unlikely you'd mess with the body tag
I haven't gone through in detail on css - need to be on a browser to notice stuff really. The important things look like you've handled them well
1@TielinenPosted over 3 years ago@grace-snow Thanks again. I really appreciate your feedback.
I updated my solution according all your recommendations.
Once more, thank you for your feedback and encouraging words.
0
Please log in to post a comment
Log in with GitHubJoin 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