Design comparison
Solution retrospective
Hello guys, any feedback on my work would be highly appreciated. Thank you :)
Community feedback
- @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 helpful0@Abdul400Posted almost 3 years agoI 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 - @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 helpful0@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 - @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 useclass
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 likealt="Ping"
. - When using
img
tag, you don't need to add words that relates to "graphic" such as "logo" and others, sinceimg
is already an image so no need to describe it as one. - Your
input
right now currently lacks associatedlabel
to it or anaria-label
to which will define the purpose of theinput
element. Always include it so that user will know what they need to give on eachinput
. For example, you could usearia-label="email address
attribute on theinput
tag. But I would prefer to using a screen-reader onlylabel
because it is translatable for other languages unlikearia-label
. - Remember that when a
button
is placed inside aform
element, it defaults totype="submit"
. So imagine if you have a close-button inside theform
without specifyingtype="button"
clicking the close-button will submit theform
. Be aware of this kind of scenarios. So for this one, usetype="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 thearia-describedBy
attribute on theinput
element. By doing that, your user will know that the input is wrong because ofaria-invalid
and they will know what kind of error they made because of thearia-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 likealt="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 eitheraria-label
attribute orsr-only
text inside it, defining where the link would take them. For example, you should usefacebook
as the value if the link would take the user to facebook.
Aside from those, great job again on this one.
Marked as helpful0@Abdul400Posted almost 3 years agoHello @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@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 helpful1 - Avoid using
- @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 helpful0@Abdul400Posted almost 3 years agoHey @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 - @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 - @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@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@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 - @Abdul400Posted almost 3 years ago
will definitely do so. Thank you for sharing your resources. I will definitely look into them.
0 - @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@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 - @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 - @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@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@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 GitHubJoin 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