@de-furkan
@WolfMozart8
Submitted
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!.
Hi there,
The design looks responsive to some extent but there are a few points to consider:
Make use of some landmark HTML5 elements e.g. use the <main> to wrap all your main markup
Section / article elements usually require a heading
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
@dudleydelgado
Submitted
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.
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.
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.
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
@AhmadYousif89
Submitted
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
I love it great effort, lovely design🎉🎉
In terms of key areas for improvement:
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
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
<main>
// Html or react codes in between
</main>
html,
body{
height: 100%;
}
main{
min-height: 100%;
}
@yanlsama
Submitted
I am learning to use the platform, the first challenge was quite motivating.
Hi there,
Cool design! 🎉 Here are some pointers for improvement:
/* 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
@Pepeleeno
Submitted
Would love to have any feedback regarding about the solution. I am still newbie :)
Hi there... It seems the link to the live preview is broken. Could you double check this!
@dev-emti
Submitted
Hey great effort! ☺️
To improve:
Marked as helpful
@kaity-cheung
Submitted
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
@floor096
Submitted
-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!
Hey looks great. To improve on the mobile aspect - consider doing the following:
try mobile first approach - build from bottom up - from smaller devices and up to larger devices. This is a great approach.
Also, consider using media queries to add in responsiveness to your design.
Otherwise, great effort, looks nice :)
Marked as helpful
@gabriellima666
Submitted
Hi there,
The design looks great.
To improve:
Hope this helps.
@marcelgp
Submitted
Ainda sou estudante na área de desenvolvedor e gostaria de um feedback sobre o meu código.
This comment was deleted
@Adarshshanbhag5
Submitted
bit problem in positioning background image
This comment was deleted
