jQuery

Community feedback

• 

  Adarsh Pratap•5,515

  @adarshcodes

  Posted over 4 years ago

  Hi @FitItGuy, you did good work on this solution. I think most of the things @SzymonRojek has already covered above so please go with the suggestion. Keep it up. Happy coding😀

  30
• 

  Szymon Rojek•4,540

  @SzymonRojek

  Posted over 4 years ago

  FitItGuy

  Well done! :D

  I've just checked your HTML structure and preview site by the inspector. A few tips from me:

  • you can centre the card, give to the body overflow-hidden (it will stop the scroll);
  • RWD hasn't been done, did you learn flexbox + grid and BEM naming convention?
  • I'd recommend learning about semantic tags (why they matter). Divs are semantically inert elements — elements that don’t really do or say anything. You can change a bit the HTML structure by using semantic tags;
  • please change h5 into h1 => The h1 tag is the most important heading because it’s the highest level tag that shows what your specific page is about;
  • why did you add two buttons?
  • target=”_blank” attribute specifies where the linked document will open when the link is clicked (add it to the links);
  • you can fix your accessibility and HTML issues report;

  It is good to know semantics tags, additional attributes and their importance for accessibility. You will learn it step by step, day by day => for example, IMO you can add to the main button aria-controls, aria-label, aria-expanded and by JS you can toggle the text of the button aria label value, for example, "share" and "close share", toggle aria-expanded to true.

  In the end, I can recommend this article from the CSS-tricks: A Complete Guide to Links and Buttons.

  Ps. don't forget to upvote any comments on here that you find helpful.

  Many greetings :D

  50
• 

  Szymon Rojek•4,540

  @SzymonRojek

  Posted over 4 years ago

  @adarshcodes and @FitItGuy,

  I have edited the post because of the type="button". I was sure that we do not have to type the button as a button, but now I think that depends on the situation, depends on the project. The default button type is actually submit (but we have got also type submit which is a bit confusing). This clarifies that there should be no post option, but just be a clickable object => we want to click and get the social media board, that's it. In this project, we can add type button - we are not submitting but simply switching between on and off (two states). For example, when we have got a button as a mode switcher - then we can add attribute type="button", and also the role="switch". Lots of things are going on here.

  Check it out => MDN.

  I am still not sure about the name="button". I think it is not necessary here.

  Thank you @FitItGuy. I have learned something thanks to you.

  Cheers :D

  22