Skip to content
Submitted almost 3 years ago

ping coming soon page

Abdihafid Adan•800
@Abdul400
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

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

Community feedback

  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    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
    0
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    I would recommend you first do a crash course just to get an overview of the concepts and then a more in-depth course. That way you can grasp and remember concepts very easily.

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

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

    Marked as helpful
    0
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    @brodiewebdt I will definitely check it out. since I've taught myself a bit of JS I think I need to grasp it really well and then move onto react JS for web apps, that is a more natural transition and I think the concepts would be easy to grasp because they are fairly the same.

    0
  • Raymart Pamplona•16,100
    @pikapikamartPosted almost 3 years ago

    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
    0
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    Hello @pikapikamart I love how your feedback is in-depth. I now understand how to make my websites more responsive and I will be taking your feedback on making it more accessible to be responsive. Thank you so much!! 😊

    1
    David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    @Abdul400 Practice, practice, practice. I have seen how much I have learned from doing these challenges. Keep going your doing great.

    Marked as helpful
    1
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    @brodiewebdt Thank you!!!

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    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
    0
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    Hey @brodiewebdt. Thank your feedback. I now see that I should have made the form wider. True, it does not seem to be aligned center to its div and its because I left the space for the error message after there is an error when validating the email. I will consider maybe giving the forms more space to make it more center aligned. Thank you 😊

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    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.

    1
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    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.

    1
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    @brodiewebdt wow! I honestly did not know you were sixty. This even gives me more motivation. I've always had a rough journey starting development. I've been unable to maintain some level of consistency because I also had to do school and also tried to help out my family. But for the past 2-3 months, I feel like I've been really consistent and I want to continue this way. Consistency is the key. I do really want to be a developer and its been a childhood dream for me. I'm so happy I'm making the steps to realize my dream.

    0
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    @brodiewebdt I love how you are a goal-driven. It would do me a lot of good to have friends like you. I feel more motivated than ever!! could you send me the link to the discord group?

    0
  • Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

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

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    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.

    0
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    @brodiewebdt yeah, absolutely. for me, I combined different YouTube videos including those of freeCodeCamp. They have been really helpful as well. I will try the Scrimba course you've sent me as well as the Odin Project though now I feel like I should be practicing instead of watching tutorial after tutorial.

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    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.

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    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.

    0
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    @brodiewebdt I feel the same. I have learnt so much because of these challenges. Honestly, I'm excited to wake up everyday in the morning just to tackle these challenges. By the way what is your ultimate goal in programming and development?

    0
    Abdihafid Adan•800
    @Abdul400Posted almost 3 years ago

    @Abdul400 for me, I want to have a robust grasp of web dev (including web apps), and then move on to mobile development and maybe later on, Ai (python).

    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