Skip to content
OverviewSolutions
5
Comments
4
Gioant
@Gioant

All comments

  • 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
  • Gioant•160
    @GioantPosted about 1 year 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
    @wanyikeSubmitted about 1 year 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
    Gioant•160
    @GioantPosted about 1 year 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
  • Gioant•160
    @GioantPosted about 1 year 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