URL Shortening API Landing Page

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  Awesome work AAALYSSIE, keep it up. The functionality is working as expected. Here are a few things that you can look at

  • While the mobile view is presented well, check your screen between 768px and 1110px , some text are hidden under the image. In other words the site does not present well on medium devices. (i will post an image in the slack channel)
  • the images have an alt value of image , that will not help people who use assistive technology. The value should be something that briefly describe the image.
  • Heading elements are recommended to be in order starting with h1 and going down without skipping , That is h1, h2, h3 etc, mainly to help assistive technology users.

  Happy coding

  2

  ---

  

  aaalyssie•85

  @alyssiePosted over 3 years ago

  Thank you! I kinda slack off with the medium screen and haven't really considered using alt ever since. This would really help me improve my future projects. Thank you again, such a great help.

  0
• 

  T

  Grace•31,230

  @grace-snowPosted over 3 years ago

  Hi

  Try to make this accessible if you can. Bootstrap should be fully accessible and has good patterns to follow for things like mobile menus.

  The main issues I'm having are

  • lack of visible focus states, especially on buttons and the input (I am a keyboard user and can't see where I am on the page)
  • menu toggle being a div not an interactive element so I can't open it. Also paragraphs inside that aren't paragraphs, just to create shapes
  • URL shortener not being wrapped in a form element, which causes controls not to work properly for screenreaders
  • There's a point about 770px wide where the mobile nav is broken
  • some font-sizes are in pixels, so cannot scale (always use rem/em)
  • give the header a max-height and container position relative - zoom right out to a massive screen and you'll see why
  • There is no h1 on the page. You've started at h3 and jumped heading levels. It's really important that they start at 1 and go in order
  • if adding animation, make sure they are all turned off for those who prefer-reduced-motion

  Good luck

  2

  ---

  

  aaalyssie•85

  @alyssiePosted over 3 years ago

  Wow, thanks for catching that. Haven't considered keyboard users' UX. And thanks for targeting some CS that I should practice.

  0
• 

  Priyank Hajela•95

  @psonHPosted over 3 years ago

  you've done a really great job!! how did you implement the URL shortening? did you use any API?

  1

  ---

  

  aaalyssie•85

  @alyssiePosted over 3 years ago

  Thank you @psonH Yes I did. https://app.shrtco.de/

  0
• 

  MuhammadSamir•510

  @Muhammad-samirPosted over 3 years ago

  It's not working on my mobile

  0

  ---

  

  aaalyssie•85

  @alyssiePosted over 3 years ago

  Hi, thank you for your comment. It works fine on my phone. Please try refreshing it :D

  0

  

  MuhammadSamir•510

  @Muhammad-samirPosted over 3 years ago

  @caluyaalyssamae I see it now it's working perfectly

  1