url-shortening-api-master (vanillia css/js)

Community feedback

• 

  P

  ThabisoMagwaza•280

  @ThabisoMagwazaPosted 12 months ago

  This is very nice solution. I'm impressed that you managed to do it with vanilla html and CSS.

  I woud, however, caution against straying from the design when implementing such challenges. It's an interesting test of your attention to detail when you attempt to get the final application to look as close to the design as possible.

  These are some of the areas I've identified where you strayed from the design:

  1. Some button and links hover states are incorrect
  2. The font sizes and whitespaces are not as per design
  3. The hero image is quite small compared to the design

  Additionally, I'd look into disabling the button when call to the url shortening is in progress. I found myself mistakenly clicking the button twice. It would also help to have some kind of loading indicator.

  I'm sure you can find some more. I suggest that you look throught the design again while paying close attention to the whitespace, hover and active stetes.

  You have an impressive grasp of CSS and I'm sure you'll benefit from the challenge!

  Marked as helpful

  1

  ---

  

  P

  enzmrg 💫•920

  @enzo-mirPosted 12 months ago

  @ThabisoMagwaza Thanks for your feedback I’ll check all issues but at the moment I don’t get design file of pro Frontend Mentor but I can improve form submition, buttons and links but concerning font-size, image sizing or letter-spacing I must have screen shots that I can’t have in free version, anyway the feedback was helpfull !

  Thanks ;)

  1

  

  P

  ThabisoMagwaza•280

  @ThabisoMagwazaPosted 12 months ago

  @enzo-mir Ah yes I see. It's very difficult to get the sizes and spacing correct if you don't have the figma files

  1
• 

  Gioant•160

  @GioantPosted 12 months ago

  Looks pretty good. Preview is working for me. Nice responsiveness! the only thing I would consider improving is the error handling for the form input.

  For example, the first time a user enters your website and wants to shorten a link they see a box.

  How come, even when the user does not enter anything (simply just focusing or clicking on the input) to type something.. they are already presented with an error?😅

  I understand you want to emphasize to them that they should put a link but the user didn't even start typing yet.

  That's what labels and placeholders are for. You already have a placeholder (that is good!)

  Instead, It would be better to show the same error when the user enters an input that is not valid (not a valid link). Not before.

  Marked as helpful

  1

  ---

  

  P

  enzmrg 💫•920

  @enzo-mirPosted 12 months ago

  @Gioant I understand what you want to tell for the input error, I’ll fix it, Thanks !

  1
• 

  P

  enzmrg 💫•920

  @enzo-mirPosted 12 months ago

  Preview is broken ! If someone can help me to fix it ?

  0