Skip to content
OverviewSolutions
7
Comments
8
devusexu
@devusexu

All comments

  • devusexu•130
    @devusexu

    Hello @tired-herb! I have a few comments

    • See this article on MDN about custom error message, which use <form novalidate> to disable default error message and use Constraint Validation API to customize you own.

    • You can use img for you arror svg

    • You can add something like aria-label="email" attribute to your input and button element to benefit screen reader users(issues about accessibility), or they won't know what the input and the button is for

  • devusexu•130
    @devusexu

    Hello xyzeez! Although I don't know how to fix the animation issue, you might wanna know about

    1. Use <form novalidate> to disable default error message
    2. Use Constraint Validation API to customize your own error message

    For example, I tried inputs like something, something@ or (empty) it would all use the default error message, Please provide a valid email only appear for something@something because this pattern is valid for the type="email". Here's the link on MDN about this: Client-side form validation

    Another issue is that when I put my pointer on the edge of the button, the button would start to blink, which might cause an epileptic seizure.

    Good semantics and accessibility btw! I would use sr-only and aria-label like you in the future works.

    Marked as helpful
  • devusexu•130
    @devusexu

    Hello Jordan, you can use more rem/em for properties like font-size, max-width, etc. to respect people's font preference. You can see more in these two articles by @grace-snow

    1. Why font-size must NEVER be in pixels
    2. How to "make a site responsive" and use Media Queries well
  • devusexu•130
    @devusexu

    Hello, congratulations on finishing this challenge!

    I have some links for your reference.

    You can use picture element to load mobile or desktop image based on size easily, here's an article on MDN.

    And here is an article by frontendmentor member @gracesnow talking about how to plan this challenge's HTML.

  • devusexu•130
    @devusexu

    Cool animation and flexible design!

    I have a few comments about your solution👋

    1. I think you can use more semantic tags like main or article.
    2. You can also use property border-top of <div class="content"> to style colors instead of using <div class="line">.
    3. You can use alt="" for decorative icons.
  • devusexu•130
    @devusexu

    For better semantics of HTML, here's my suggestion and links to docs on MDN

    1. You can use picture for RWD image
    2. You can use figure and figcaption to contain the image and the info

    For the effect of perfume, you can use text-transform: uppercase & letter-spacing so that you won't have to edit the HTML by yourself

    Marked as helpful
  • devusexu•130
    @devusexu

    For better semantics of HTML, here's my suggestion and links to docs on MDN

    1. You may want to use main instead of section
    2. You can use picture for RWD image instead of using CSS
    3. You can use figure and figcaption to contain the image and the info
    4. Use button instead of a for the button or let button contain a. You can still make the button interactive without a link using
    button:hover,
button:focus {
  cursor: pointer;
}
  • Franklin Gomez•180
    @frankgomezdev
    What are you most proud of, and what would you do differently next time?

    I am mostly proud of being able to get everything to look how it should be by using Flexbox for the first time. Next time, I would pay attention to using more semantic HTML.

    What challenges did you encounter, and how did you overcome them?

    Not really any challenges with this one that I can remember.

    What specific areas of your project would you like help with?

    N/A

    QR Code Component w/ Flexbox

    2
    devusexu•130
    @devusexu
    1. Like LENI4C said, using better semantic tags like main for the component and footer for the attribution. Here is the doc on MDN
    2. Use rem for font-size, here is an article Why font-size must NEVER be in pixels
    Marked as helpful