Skip to content
Submitted over 3 years ago

Responsive Coming Soon Page

shiva santosh jana•375
@santu369
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is quite simple challenge when compared to others.

I wanted to use a package for validating email instead of using plain JavaScript just for testing out. I have installed validator.js and tried to link this up. Since this is client side validation, it is used as a standalone script. The script is around 70kb which I have copied and included. Is there any other way to implement the package without the entire file being loaded to the user?

Any feedback is highly appreciated. Happy Coding !!! 🎉

Community feedback

  • Account deleted

    Hey @santu369,

    Nice work completing this challenge! Another way you can import the package could be through CDN - (Link here)[https://cdnjs.com/libraries/validator]

    Use the link as a script reference in your index.html file and you should be good to go

    //Kenny

    1
    shiva santosh jana•375
    @santu369Posted over 3 years ago

    Thanks @ktra99 ✨, Didn't think of this approach. This seems to be a better way which does the same thing via CDN instead of copying the entire file.

    1
  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, shiva santosh jana! 👋

    Good effort on this challenge! Your solution responds well. I am glad that you thought about accessibility with sr-only class for icon links aswell that you add :focus states. Here's my few suggestions:

    • Since your .header__logo image is decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies, such as screen readers.
    • I would use paragraph or span for .header__detail.

    Good luck with that, have fun coding! 💪

    0
    shiva santosh jana•375
    @santu369Posted over 3 years ago

    Hi @tediko ,

    Thanks for the feedback and suggestions.🙌

    • .header__logo image is not decorative as per the design since it conveys the home page itself, if we remove it then we don't have any means to convey that it is Ping homepage. I got this info from Deque. Let me know if I am wrong here. Although, I would've wrapped that in an a tag which will better convey the meaning I think.

    • I was pretty dumb using a h2 there 😂, paragraph is a better option

    0
    tediko•6,680
    @tedikoPosted over 3 years ago

    @santu369 If you've wrapped that in an a tag then yes, you're 100% correct and then you have to leave alternative text to be something like "Ping - homepage" but since it does nothing since you didn't wrap it in an anchor tag it is decorative. Have a good one! :)

    0
    shiva santosh jana•375
    @santu369Posted over 3 years ago

    @tediko my bad 😝. Thanks for the suggestions, helpful for my next projects.

    0

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