All comments

• 

  enzmrg 💫• 870

  @enzo-mir

  Submitted 10 months ago

  🕓≈ 6h Api : search for an other api beacause cleanuri Api doesn't work there is a problem with cors as if you use the no-cors mode it's maybe broken :(

  • I used instead url-shortener-service

  

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

  3

  30

  

  Gioant• 160

  @Gioant

  Posted 10 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

  This comment has received 1 replyShow
• 

  Rebeca Nepomuceno• 30

  @rebecanepom

  Submitted 10 months ago

  Please help me, how do I change the borders in mobile mode? And the paragraphs too. Anyway, how can I improve the code? :)

  

  3 Column Preview Card Component

  2

  60

  

  Gioant• 160

  @Gioant

  Posted 10 months ago

  for mobile, i see you already have a border-radius but it is only being applied to one side.

  The issue is that your divs do not have a border. You must add a size to it using the border property. For example:

  border: 1px solid transparent

  after, you can change the border-radius size like you have done.

  based on solution, the top div only requires a border-radius top & the last div to have only a bottom radius.

  you can use the shorthand version (border) or use specific version:

  top:

  • border-top-left-radius
  • border-top-right-radius

  bottom:

  • border-bottom-left-radius
  • border-bottom-right-radius

  for the paragraphs on mobile version, i suggest to just decrease the size and add a line-height.

  hope this helps!

  Marked as helpful

  0
• 

  WANYIKE• 120

  @wanyike

  Submitted 10 months ago

  All feedback is welcome thank you, Please help me to improve my coding , especially how to link my javascript to HTML, CSS. To this project I have failed to link them. I need help. thank you in advance.

  

  Rock, Paper, Scissors game

  1

  10

  

  Gioant• 160

  @Gioant

  Posted 10 months ago

  Hello wanyike,

  you should be able to link the JS file the same way you did with the img elements in the src tag. By using relative paths

  like this:

  < script src="./app.js" defer >< /script >

  just make sure to have no spaces(beginning & at the end) because the site wont allow me to properly close the script tag

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  daniDev6• 150

  @daniDev6

  Submitted 11 months ago

  Responsive styles were too complicated for me, I decided to do it with react another time

  

  help, to make the page respond

  1

  60

  

  Gioant• 160

  @Gioant

  Posted 11 months ago

  Hey DANIDEV6,

  It is understandable.

  Currently, i see the form is not on the center of the screen.. and it is because there is no height given to the body. Usually, the body will only take the height of the elements inside which currently is your section and attribution elements.

  you can center the form to the middle of the page by giving the body element a height value.

  there are multiple ways to do this.. but one trick i use is:

  min-height: 100vh.

  Which sets the body to 100% to a viewport's (device) height.

  after you can do the following for the body in css:

  flex-direction: column;
  justify-content: center;
  align-items: center;
  

  which sets all elements inside the body to the middle of the page in a column layout.

  Hope this helps!

  Edit: I forgot to mention for the mobile version.. I see for the mobile design image (step 1 for example) the image should be on top and then a form on the bottom.

  it will be pretty hard to style the same elements currently to look like the mobile design so i suggest creating different components for mobile version.

  and then conditionally show either the desktop or mobile version depending on the width of the device. You can google this but according to this link:

  google result

  a common breakpoint for phones according to google is less than 480px.

  you should also consider using percentages(%) instead of using fixed px sizes for width make elements and the main form somewhat responsive.

  For instance making the parent container of the form to take only 90% of width would be ideal...

  Marked as helpful

  0