Skip to content
OverviewSolutions
2
Comments
11
P
FO
@de-furkan

All comments

  • Felipe Rios•280
    @WolfMozart8Submitted almost 2 years ago

    I used a plugin (not sure how to name it) called "Jsuites" for number masks (I used it for the credit card numbers format), besides that i used only plain js.

    Of course i didn't use default HTML validation, but i used js to create custom validation instead... and it was fun.

    I'd like to see it more "professional", but I'm not sure where I'm going wrong.

    Any feedback is welcome, thanks!.

    Card details form using plain JS and CSS

    1
    FO•155
    @de-furkanPosted almost 2 years ago

    Hi there,

    The design looks responsive to some extent but there are a few points to consider:

    1. Make use of some landmark HTML5 elements e.g. use the <main> to wrap all your main markup

    2. Section / article elements usually require a heading

    3. Validate your code with: W3C

    The w3c validator will give you a more detailed guide on what is missing and what should be avoided in your markup

    I hope that has helped, Happy coding

    Marked as helpful
    1
  • Dudley Delgado•120
    @dudleydelgadoSubmitted almost 2 years ago

    El reto en este desafío de frontend mentor está en el posicionamiento del background con la "wave" u ola que debe agregarse con posiciones absolutas. Pruébalo y crea tu un componente pixel perfect.

    Orden Summary Component

    1
    FO•155
    @de-furkanPosted almost 2 years ago

    Great attempt at this project 🎉

    I can see you have made effort to include CSS variables which is always nice to see :)

    here are some improvements that can be made:

    • avoid setting height with vh on body to make the page full screen. This can be problematic on phones and smaller screens, especially when the project gets more complex.

      • one way to get around this issue is:
    html,
body{
  height: 100%;
}

main{
  min-height: 100%;
}

    • don't litter the HTML document with <div>, instead make use of HTML5 semantic markups e.g. <section> or <article> for the card component

    • supply a padding top on the body element so that it doesn't cause any alignment problems or clip out your card when the phone is in landscape mode.

      • you could alternatively, supply a margin top to the card to achieve a similar effect

    • make use of rems for border-radius. On some screens the border-radius can cause un-intended side effects when you declare them with pixels

    • use some reset properties for CSS e.g. you could display <img> as:

    img{
  display: block;
  max-width: 100%;

    I hope these help. Happy coding :)

    Marked as helpful
    0
  • Jo89 😈•380
    @AhmadYousif89Submitted almost 2 years ago

    I have an Input component that render the form in the personal info step number 1 it's working just fine but I would appreciate any feedback on it because I feel like it's a bit cumbersome and I think I need to refactor it. thanks in advance

    Multi step form built with React, Typescript and CSS modules

    1
    FO•155
    @de-furkanPosted almost 2 years ago

    I love it great effort, lovely design🎉🎉

    In terms of key areas for improvement:

    • avoid setting:
    outline: none;

    • i understand this can be tempting to do this, as the default outline usually looks ugly, but it can cause accessibility problems for users that make use of accessibility features. Outline is an important part of the accessibility tree to help users navigate and see selected areas of the form

      • while this can be overcome with other ways of styling, as you have done here, but it is still recommended to keep the outline.

    • perhaps as an alternative, you could style the outline as needed instead of adding an additional boarder

    • make use of <main> element to place the content into the main block

      • this makes it easier to control layout and page size as demonstrated in this code:
    <main>
  // Html or react codes in between 
</main> 

html,
body{
  height: 100%;
}

main{
  min-height: 100%;
}
    2
  • YanlDev•170
    @YanlDevSubmitted almost 2 years ago

    I am learning to use the platform, the first challenge was quite motivating.

    QR code challenge

    1
    FO•155
    @de-furkanPosted almost 2 years ago

    Hi there,

    Cool design! 🎉 Here are some pointers for improvement:

    • make use of flexbox to justify and align the the card to the centre of the page, as it currently seems off . You can do something like this:
    /* create a <main> in html 
* and put the contents there,  
*then use flexbox on main */

main{
  display: flex;
  justify-content: center;
  align-items: center; 
}

    Doing it this way can also help you to create a correct size for the page too like this:

    
html,
body{
  height: 100%;
}

main{
  min-height: 100%;
}
    Marked as helpful
    0
  • FO•155
    @de-furkanPosted almost 2 years ago

    Hi there... It seems the link to the live preview is broken. Could you double check this!

    1
  • FO•155
    @de-furkanPosted over 2 years ago

    Hey great effort! ☺️

    To improve:

    • Try using the flexbox layout
    • contain the image inside a container with a fixed width and set the image width to 100%, this will make the image responsive
    Marked as helpful
    0
  • FO•155
    @de-furkanPosted over 2 years ago

    Hey great design 👏🏻

    I would recommend using em units instead of px on the media queries. These scale better for different devices. But do have a read on how to do this, because the em works on the default 16px, not on what ever you have scaled the fonts down to. It works a little differently, but do check it out on youtube. I hope that helps :))

    Marked as helpful
    0
  • Flor•10
    @floor096Submitted over 2 years ago

    -For this i mostly used Flexbox -I had a little dificult time while building the mobile version I would like to recieve some feedback and recommendations Thank you!

    Product preview card component solution

    3
    FO•155
    @de-furkanPosted over 2 years ago

    Hey looks great. To improve on the mobile aspect - consider doing the following:

    1. try mobile first approach - build from bottom up - from smaller devices and up to larger devices. This is a great approach.

    2. Also, consider using media queries to add in responsiveness to your design.

    Otherwise, great effort, looks nice :)

    Marked as helpful
    0
  • FO•155
    @de-furkanPosted over 2 years ago

    Hi there,

    The design looks great.

    1. You have got the colours correctly
    2. Fonts look great
    3. Button looks fine

    To improve:

    • Consider using @media queries -> check out MDN docs or watch a youtube video, will help bring responsiveness to your design so that it looks consistent across different devices.

    Hope this helps.

    0
  • FO•155
    @de-furkanPosted over 3 years ago
    This comment was deleted over 2 years ago
    0
  • FO•155
    @de-furkanPosted over 3 years ago
    This comment was deleted over 2 years ago
    1