Looking to hire developers?
@sulemaan7070
@Robertron624
Submitted
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
@sulemaan7070
Posted
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😄👍🏻✅
Marked as helpful
@sulemaan7070
Posted
hey slightly-functional😄, design vise you did a great job and functionality vise you can do better !! here are some suggestions
1.Limit the number of characters to be accepted as input to 16 in case of card number
2.Add Regex to convert the card number from this 1234567812345678 to this 1234 5678 1234 5678
3.As for the p tags with the class name .field_feedback instead of adding them on error .. I suggest you to include them in HTML and make them display:invisible and upon error show them.. this would not cause the form container to resize...
Happy coding✅👍🏻💯
Marked as helpful
@KamalAborida
Submitted
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
@sulemaan7070
Posted
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😄
@Azn4n6el
Submitted
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.
@sulemaan7070
Posted
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👍🏻✅
Marked as helpful
@g-pg
Submitted
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 :)
@sulemaan7070
Posted
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💯🔥👍🏻
Marked as helpful
@blairhb7
Submitted
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!
@sulemaan7070
Posted
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
@zohaibAlam840
Submitted
@sulemaan7070
Posted
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😄✅👍🏻
@yefreescoding
Submitted
@sulemaan7070
Posted
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💯🔥👍🏻
Marked as helpful
@kiran1095
Submitted
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.
@sulemaan7070
Posted
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✅😄👍🏻
Marked as helpful
@sanba-anass
Submitted
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 😅😅
@sulemaan7070
Posted
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💯👍🏻✅
Marked as helpful
@cout05
Submitted
@sulemaan7070
Posted
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👍🏻😄💯
Marked as helpful
@camilomcm
Submitted
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!!
@sulemaan7070
Posted
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✅💯👍🏻
@brspkts
Submitted
@sulemaan7070
Posted
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💯🔥👍🏻
@emib1
Submitted
@sulemaan7070
Posted
hey Eman Ibrahim you did an awesome job!! regarding both functionality and the styling! I recommend you to change the styling for the button when it is hovered... when I hover on the button it is giving the feeling that it is disabled.. instead of what you did you can certainly play with the scale property of the button on hover!!
Happy coding✅😄
Marked as helpful
@Florvin-04
Submitted
@sulemaan7070
Posted
hey Florvin Bayaborda😄 great job!! everything looks great .. I suggest you add the box-shadow for the buttons like add to cart and check out buttons...
box-shadow: 0 0.3125rem 0.625rem -0.125rem hsl(26deg 100% 55%);
that should make you site design accurate!!
Happy coding😄✅✅
Marked as helpful
@WDSYX
Submitted
Quite a tricky one for me. I need help with styling the radio input in the html. Couldn't make the exact style shown in sample. I could do with any help.
@sulemaan7070
Posted
hey @WDSYX😄, great job!! you made a neat site..
here is what you asked, the custom input radio button make sure you play around with it
For the custom radio-button you can do something like this to acheive that
.negotiate input[type="radio"] {
-webkit-appearance: none;
width: 15px;
height: 15px;
border: 1px solid var(--Dark-Grayish-Violet);
border-radius: 50%;
outline: none;
box-shadow: 0 0 5px 0px gray inset;
}
.negotiate input[type="radio"]:checked {
background: var(--White);
}
let me know if you need further help, happy coding✅😄💯
@KarenMascarenhasLourenco
Submitted
Is my code understandable?
Did I use the semantic HTML tags correctly, should I add more or less?
In what areas of my code can I improve on?
All feedback is greatly appreciate. It helps me to improve as a frontend developer. Thanks!
@sulemaan7070
Posted
hey Karen Lourenço😄, great job on completing the challenge...here are a few tips to make your site better..
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.Using the picture element for responsively switching between Images is considered as best practice
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
more about picture element here📚
3.This is your code
.menu ul {
position: absolute;
}
I recommend you to use the position :fixed property so that the user cannot scroll it down..
4.you site is still on the desktop version for the images with large screens..you can co some modifications..
Hope that helps, happy coding✅✅😄
Marked as helpful
@robotamozepoczekac
Submitted
Any feedback on what I can improve in my code and the technique I'm using is welcome (especially javascript)
@sulemaan7070
Posted
hey 😄robotamozepoczekac, 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 click 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.and as for the validation messages write the error message and use the CSS property
display:invisble to make them invisible and when needed make them display:block this should solve the problem of page resizing frequently
Hope that helps happy coding💯✅😄
@Tobbs101
Submitted
Difficult areas => Responsiveness with the image thumbnails.
@sulemaan7070
Posted
hey Tobi Idowu😄, great job on completing the challenge...
1.I see that you have made the mobile-menu absolutely positioned but the user can open the menu and scroll.. and it will go up.. to tackle that issue you can use the position:fixed property.
2.you can make the header or nav bar sticky.. so that it stays stuck on the top on the mobile version..
Happy coding👍🏻💯✅
@rockdoginafog
Submitted
Eveything works, I also changed some things, but brooo this code is like a spaghetti haha.
I will sort it tomorrow, or later, I'm glad it's working, it was my first advanced challenge
@sulemaan7070
Posted
hey rockdoginafog😄, grea job!! here are a few tips to improve your site..
1.I see that you used 100% of the width.. you can reduce it to 80 or 85% and leave the rest for margin.. to make it design accurate...
2.on the mobile: when I open the mobile menu the filter: blur(5px) is not being applied to the nav-bar .. you can place the mobile-menu somewhere else to achieve that..
3.The p element named as .number should have specific width so that it won't affect the whole page when clicking on + or** -**...
4.Make the header sticky so that the user can see the items and the cart.. even when he scrolled down..
5.You can add a carousel for the mobile version to change images based on button click...
Hope that helps, happy coding💯👍🏻😄
Marked as helpful
@NoahRod108
Submitted
Any feedback is welcome!
@sulemaan7070
Posted
hey Noah Rodriguez😄, here are a few tips to make your site better...
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.I recommend you to use the picture element to change image based in media-query.
more about picture element here📚
3.You can add hover effects on many texts as you can see in the active state image in the design folder...
4.The margin and padding on the nav-bar for the mobile version seem a bit much you can reduce that.
5.When I am opening the mobile-menu and start to scroll down the x or the close svg is going upside.. you can remove scroll behvaiiour with the help of JS..
let me know if you need further help..
Hope that helps,Happy coding👍🏻💯
@Ander-Tk
Submitted
All feedback is greatly appreciate.
@sulemaan7070
Posted
hey Anderson Santos Da Silva Filho😄, great job!! here are a few tips to improve your site..
1.on the mobile version you the p-5 is causing to have unnecessary padding I suggest you reduce it.
2.for the p below the h1 you can add the code to make it design accurate on the desktop
padding: 0px 6rem 0px 0px;
3.Add a br tag on the desktop version like this
<h1>Make <br className="hidden xl:block"> remote work</h1>
to match the design
Hope that helps happy coding💯👍🏻😄
Marked as helpful
@talebSleiman
Submitted
@sulemaan7070
Posted
hey Taleb Sleiman😄, great job! here are a few suggestions to make your site better..
1.On the mobile: you can add an overlay to the background when the mobile-menu is opened.. it would make your site cooler
Everything else seems great!! happy coding👍🏻💯
Marked as helpful
@mnacfil
Submitted
@sulemaan7070
Posted
hey 😄Melvin Nacfil, congratulations on completing the challenge... here are a few tips to make your site better.
1.The p element named as .amount should have specific width so that it won't affect the whole page when clicking on + or** -**...
2.I think you forgot to add the cart-svg to the add to cart button. and it would look great if you add box-shadow to that button. just like the design.
3.Add the functionality🪛 of closing the mobile menu when user clicks on the overlay since most users click on an overlay to close the mobile menu...
4.center the attribution that would look good.
hope that helps, happy coding💯🔥👍🏻
Marked as helpful
