Skip to content
Submitted over 1 year ago

Base-apparel-coming-soon- using semantic HTML5 , flexbox , modern JS

Jenna•230
@NandiniCooppen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, this is my solution for the base apparel coming soon page

Desktop / Responsive / Mobile Design

-Animation when the page load.

-Animation on the button at the start

-Animation on error msg

-Thank you page when subscribing email ok.

-Hover effects on the button

-Button disable effects

The animation was added using Animate.css

It would be great to have some feedback on it.

Thank you in advance :-)

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, Nandini! 👋

    Nice! I recommend stopping the animations for the users that do not want to see them. You can use the prefers-reduced-motion media query.

    Here are some more suggestions:

    • Remove the word "logo" from the alternative text: Alternative text for images should not contain any words related to "image" (such as picture, photo, logo, icon, graphic, avatar). It is already an image element (<img>) so the screen reader will pronounce it as an image.
    • Do not use <br> elements for presentation purposes: Remove all the <br> elements inside the <h1>. Screen readers may announce them as "break" which creates unnecessary noises. Learn more about accessibility issues that can happen when using <br> — <br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns
    • No empty element: Remove the <label for="email"></label>. The input has been labeled by an aria-label. Also, an empty label is not useful since it does not give the input an accessible name.
    • Do not use pixel unit for font sizes: Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS
    • Do not specify default styling: Remove font-size: 16px from the <body> styling. It is already the default styling, at least in my case.

    I hope this helps. Happy coding! 😄

    Marked as helpful
    0
    Jenna•230
    @NandiniCooppenPosted 10 months ago

    Hello @vanzasetia,

    Thank you for your thoughtful feedback! I appreciate your suggestions. 😊

    I wasn't aware of the prefers-reduced motion; thanks for suggesting it to me. Learn something new ! 🌟

    For the font-size, you are right, but i don't remember why I did it like that.. 😅

    I know it is a very late reply to your feedback but once again thanks for taking the time to review and provide helpful suggestions!

    Happy coding too! 🙌

    1

Please log in to post a comment

Log in with GitHub

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