Skip to content
Submitted over 3 years ago

ping coming soon page

Abdihafid Adan•780
@Abdul400
A solution to the Ping single column coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello guys, any feedback on my work would be highly appreciated. Thank you :)

Code

Please log in to post a comment

Log in

Community feedback

  • P
    David Turner•4,130
    @brodiewebdt

    I tried to learn Javascript in the past and got nowhere. Then I started Scrimba and Per Harold Borgens course was a huge help. Now I am doing The Odin Project for the Javascript knowledge. https://scrimba.com/learn/learnjavascript This course is free.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    If you want to build web apps, start watching Michal Malewicz. https://www.youtube.com/c/malewiczhype He is very good.

    Marked as helpful
  • Raymart Pamplona•16,040
    @pikapikamart

    Hey, awesome work on this one. The overall layout of the site looks really great and it responds well.

    David Turner already gave a feedback on this one, just going to add some suggestions on the site:

    • Avoid using id to target and style an element since it is a bad practice due to css specificity. Instead, just use class to target element.
    • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="Ping".
    • When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
    • Your input right now currently lacks associated label to it or an aria-label to which will define the purpose of the input element. Always include it so that user will know what they need to give on each input. For example, you could use aria-label="email address attribute on the input tag. But I would prefer to using a screen-reader only label because it is translatable for other languages unlike aria-label.
    • Remember that when a button is placed inside a form element, it defaults to type="submit". So imagine if you have a close-button inside the form without specifying type="button" clicking the close-button will submit the form. Be aware of this kind of scenarios. So for this one, use type="submit".
    • Also, your error-messages right now are only seen visually, but not really linked to the input. A proper error informing would look like this:
    if ( input is wrong )
  input.setAttribute("aria-invalid", "true");
  input.setAttribute("aria-describedBy", id of the error-message);
else 
  input.removeAttribute("aria-invalid");
  input.removeAttribute("aria-describedBy");

    The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy. Have a look at this simple snippet that I have about accessible form Let me know if you have queries about this one^^

    • For the hero-image, remove the image and maybe add more text, it could be something like alt="ping application dashboard preview".
    • Those social-media links could be inside a ul element since those are "list" of links.
    • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.

    Aside from those, great job again on this one.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    This looks good, it is responsive and the form validates. I would either align the form to the box in the illustration or make it wider to line up with both sides of the designs on either side of the box.

    Marked as helpful
  • P
    David Turner•4,130
    @brodiewebdt

    Yes. Practice. I got stuck in tutorial hell, and that is the only way out of it. I don't watch any tutorials right now. I just practice coding.

  • P
    David Turner•4,130
    @brodiewebdt

    I want to either work for a company or do Freelance work. Remotely, because of my family situation. This is work you can do remotely I am interested in websites mainly. I am 60 and I don't have my whole life ahead of me, but a computer doesn't know or care. I like doing this.

  • Abdihafid Adan•780
    @Abdul400

    will definitely do so. Thank you for sharing your resources. I will definitely look into them.

  • P
    David Turner•4,130
    @brodiewebdt

    I started The Odin Project for the Javascript and they use MDN a lot. I spent about two weeks going through their exercises and projects. I didn't realize they had all that stuff on there. It is a great resource. I have done Scrimba, FreeCodeCamp and The Odin Project for Javascript. I found I learn better when I use different resources. And it has helped.

  • P
    David Turner•4,130
    @brodiewebdt

    I am doing the Frontend Developer Career Path on Scrimba and they have two channels on Discord: Today I Will and Today I Did posting in those channels every day was the best thing I did. It got me practicing consistently and I finally started posting my work.

  • P
    David Turner•4,130
    @brodiewebdt

    Your welcome. A couple of months ago I could not have done the Easybank challenge, and now I can come up with workarounds to any problems I have. That's from a lot of practice.

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