Design comparison
Community feedback
- @alekseibodeevPosted 2 months ago
Hi 👋 Nice solution!
Here are some tips:
HTML semantics
It's better to use
ul
element for list like content. Your markup could look like this:<ul> <li>Product ... </li> <li>Measuring ...</li> <li>And much more</li> <ul>
One extra advantage here except a correct markup is a bullet points customisation. You don't need to insert
svg
element before each item. You can change list style with this simple CSS:li::marker { content: url(./path/to/your/image.svg); }
Modals
There is a
<dialog>
element that makes it easier to work with modals. You can move success message to your markup and reduce JS code. Even though<dialog>
relatively new it's well supported by all major browsersError
Your custom error does not work. That's because you're trying to use pseudo-element selector with self-closing element. When you use pseudo-element, browser will kinda nest it inside the original one. Example:
CSS:
div::before { content: /* something happening here */ } .div::after { content: /* something happening here */ }
DOM:
<div> ::before // div content ::after </div>
But
input
element is self-closing:<input />
That means there is no space for
::before
or::after
element inside it because that "inside" does not existsHope that was helpful. Keep coding.
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