Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions7Comments8

All comments

  • tired-herb• 120

    @tired-herb

    Submitted

    Hello, everyone! Please, could somebody answer me, what should I use inside the <button> instead of <embed> to show svg-image? Why <svg> doesn't work? As far as you will see, I also set autocomplete of the input to "off", that is because I did not understand how to style the, let it be, "invalid state" of this form . For example, those error-messages "email should contain "@"", which my browser shows with yellow exclamation mark(I have Google Chrome) or a list of my valid emails. So, I would like to style these messages and windows, but don't know how. I would truely appreciate your reply and some other comments!

    Base_Apparel_coming_soon_page

    2

    devusexu• 130

    @devusexu

    Posted

    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

    1
  • xyzeez• 550

    @xyzeez

    Submitted

    Hello There! 👋🏽

    Here is my solution for this challenge!

    Built Using⚒️ :

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • CSS Grid
    • Mobile-first workflow
    • BEM

    Question🙋 : For some reason, the input won't react to my animation styling. Can I get any help on that? ...

    Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽

    Thank You, and Keep coding! 👨🏽‍💻

    Base Apparel Coming Soon Page [BEM + PURECSS + JS]

    #accessibility#bem

    1

    devusexu• 130

    @devusexu

    Posted

    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

    0
  • devusexu• 130

    @devusexu

    Posted

    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.

    0
  • Sheyla• 30

    @ZheylaW

    Submitted

    What did you find difficult while building the project? Lo que se me hizo dificil fue con los contenedores Which areas of your code are you unsure of? Dentro de lo que cabe estoy segura de todo el codigo Do you have any questions about best practices? Me gustaria saber como le hicieron ustedes.

    Four card feature section master

    #animation

    1

    devusexu• 130

    @devusexu

    Posted

    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.
    0
  • devusexu• 130

    @devusexu

    Posted

    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

    0
  • devusexu• 130

    @devusexu

    Posted

    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;
}
    0
  • P
    Franklin Gomez• 130

    @frankgomezdev

    Submitted

    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

    Posted

    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

    1