What did you find difficult while building the project?
Properly positioning both the cards and its internal dynamic text. It was really hard finding the proper way to position them in the position the design wanted to be
hey Roberto Ramirez😄, great job completing this challenge!! and yes this one should be intermediate level if we consider the form validation and CSS positioning... I have a suggestion for you
1.limit the number of characters to 2 in the MM and YY fields and 3 in the case of CVC.
bonus📚
I recommend you to add the regex to convert this number 1234567812345678 to this 1234 5678 1234 5678
Happy coding😄👍🏻✅
I am not sure if the way that I made the complete state visible is the right way (best practice) or not. but, beside that everything was good
hey Kamal Osama😄, I have visited your site and here are a few tips to improve your site..
1.on the desktop version: I suggest you to increase the size of input fields along with the size of cards..
2.give the input fields a little more border-radius...
3.limit the number of characters to 2 in the MM and YY fields and 3 in the case of CVC.
bonus
I recommend you to add the regex to convert this card number 1234567812345678 to this 1234 5678 1234 5678
Everything else looks great !! happy coding😄
I think the most difficult thing was making the modal and responsive design. Maybe I could have reset all values first before beginning. Should I have used animations or transitions for the modals?
I am unsure of my Javascript function structuring.
hey angel lam😄, the best way you can make responsive sites is by using the mobile first approach more about it here
as for the error popping up in the above accessibility report , it is because you have used the nav for 2 times.. if you want to use the nav for 2 times you can do this
<nav aria-label="Main navigation">
</nav>
<nav aria-label="Secondary navigation">
</nav>
Everything else looks great!! happy coding👍🏻✅
Hey!
This is my solution to the intro section with dropdown menu challenge.
I made it with vanilla js this time, so I wouldn't get rusty!
Any feedback will be much appreciated :)
hey Gabriel Gusso😄, great job here are a few tips for you.
1.I see that you have applied only the desktop-image on both the desktop and the mobile versions.. you will find the image-hero-mobile in the images folder.. you can responsively change the image based on the media-query..
2.You can use picture element here which helps you to switch between the images based on the media-query..
more about picture element here📚
3.Increase the font-size for the h1 on the desktop version to match the design..
hope that helps, happy coding💯🔥👍🏻
The idea behind this project was to make this simple grid landing page, using react, typescript, and tailwind css.
Even though I could have could have made this page using HTML, CSS. I wanted to challenge my React skills and see if I could get the same results using React. I did not spend to much time styling this page other then the given example, but I did map through an array of data for the content on the sidebar and the lower section articles.
Welcoming all feedback thanks!
hey Blair Chappell, great job here are some tips to help you improve the site..
1.I see that you have applied only the desktop-image on both the desktop and the mobile versions.. you will find the image-web3-mobile in the images folder.. you can responsively change the image based on the media-query..
2.You can use picture element here which helps you to switch between the images based on the media-query..
more about picture element here📚
3.The hamburger menu is not aligned with all the mobile sizes.. and it doesn't seem to be working on click...
if you really want to get good at react you can pick challenges with intermediate level of difficulty
The transitions are the best part of your site great job!! happy coding
hey 😄zohaib, congratulations on completing the challenge... here are a few tips to make your site better.
1.For the mobile menu which you gave class name of .navhid you can add the
@media (max-width: 400px)
.navhid {
position: fixed;
}
so that the mobile menu stays on the screen even when the user scrolls down..
2.Add an overlay in the background when mobile-menu is opened.. more about the overlay here📚
3.You can use picture element here which helps you to switch between the images based on the inbuillt media query..
more about picture element here📚
every thing else looks great, happy coding😄✅👍🏻
hey 😄Yefree Valdez, congratulations on completing the challenge... here are a few tips to make your site better.
1.As for design, you did a great job!! functionality vise you can add more validation to the site...
case 1.when I am clicking on confirm button without filling in any input fields only the card holder name input field is showing a validation message.
case2.when I am entering text in only card holder name and clicking on the confirm button only the card number is showing the validation error... when every other element should show the validation error.. hope you will fix these
2.I think you forgot to add the / between the mm / yy on the card..
Everything else is great!! hope that helps, happy coding💯🔥👍🏻
Hello everyone,
I have completed this chanllenge by using grid-layout.
Please let me know your feedback and anything I can be updated, so that I also can learn about new things.
Thanks.
hey Kiran kumar😄, I have inspected your code and as for the blur I see you have added the class
.blur_background {
background-color: hsla(240, 100%, 5%, 0.3);
}🚫
to achieve the blur effect you can use the backdrop-filter property..
.blur_background {
background-color: hsla(240, 100%, 5%, 0.3);
backdrop-filter: blur(3px);✅
}
2.As for your second concern I have played around with the code to center items in the last part of the grid
.block_01 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 1em;
}
play around with the image size to match the site with the design..
Hope that helps, happy coding✅😄👍🏻
inspired by Melvin Aguilar 🧑🏻💻 thanks for the beautiful challenge it's quiet a lot of code to write and i repeated my self multiple times but here we go at least idid my best 😅😅
hey anass sanba😄, you made a super cool site.. loved the dark mode transition... here are a few things you can do to make it better..
1.The mobile menu which you named as .menu is positioned absolutely... if I open the mobile menu and scroll it down it is scrollable.. to tackle that issue you can use
.menu {
position: fixed;
}
2.Add an overlay in the background when the mobile-menu is opened.. more about the overlay here📚
Everything else is superb!! happy coding💯👍🏻✅
hey Jerico😄, here are a few things to make the site design accurate..
1.Add shadows to the grid sections.
2.In the grid1 there should be quote svg which should be positioned absolutely to the grid1.
3.reduce the border-radius for the sections or divs.
4.center the whole container. by adding height to the main
main {
min-height: 100vh;
}
this has worked give it a try
Happy coding👍🏻😄💯
This is my first challenge using JavaScript, it took me some time and this is the result. Any comments or constructive suggestions will be welcome, thank you very much!!
hey Camilo Martinez Campos😄, great job on completing the challenge!! you did well in both styling and functionality...I only thing I noticed which is not a good user experience is
when I try to enter the card number like 1234567812345678 it is not accepting as a valid number.. I recommend you to use the Regex for this input to convert the 1234567812345678 to 1234 5678 1234 5678
let me know if you need help with the regex
Happy coding✅💯👍🏻
hey brspkts😄, great job! here are a few suggestions to make the site better..
1.the images on your site seems stretched or squeezed to fix that you can add the property of object-fit:contain.
img{
object-fit:contain;
}
to make all the images contained.
2.Make the .navbar positioned fixed like this
@media (max-width: 712px)
.navbar {
position: fixed;
}
3.I see that you have applied only the desktop-image on both the desktop and the mobile versions.. you will find the image in the images folder.. you can responsively change the image based on the media-query..
4.Add an overlay in the background when mobile-menu is opened.. more about the overlay here📚
hope that helps, happy coding💯🔥👍🏻