P
@fsahinbas
Mesroua Djamel
@MesrouaDjamelAll comments
- @MesrouaDjamel
hi congratulations for your work your design is very close to the proposed design, you can bring some improvement to your project:
- mobile is not responsive => use flex direction column and for desktop flex direction row
- for the button you can add a transition
- @Deeperr0What specific areas of your project would you like help with?
Any advice regarding the optimization or improving the user experience would be great
@MesrouaDjamelcongratulations for your work, your design is close to the proposed design. i have some suggestions : you can try using framer motion for the animation, you can animate the image and the content more simply,
- P@Towbee05@MesrouaDjamel
congratulations on your work your design is close to the proposed design. some remarks to improve your design: the footer and the email section should be full width. for md and lg device it's not responsive and there's a problem with mobile nav i think the problem comes from the margin, you can try to reduce it, otherwise excellent work
- P@Towbee05@MesrouaDjamel
excellent work your design is close to the proposed design your site is responsive just a small remark the text must change when you change the image
- P@robcrockWhat are you most proud of, and what would you do differently next time?
I enjoyed coming up with interesting solutions to different layout problems.
What challenges did you encounter, and how did you overcome them?There were some responsive challenges and still don't think I nailed it on the image position for mobile, but that could be something to revisit later.
What specific areas of your project would you like help with?I'd love tips to improve my responsive layout and the way I handled images.
@MesrouaDjamelhi congratulations for your work it is very close to the proposed design you can make some adjustment to make it more responsive :
In your code you had put md:grid-cols-4 i think it's better to put md:grid-cols-3 and lg:grid-cols-4
also for the InteractiveVRSection component you can try flexbox and the second div use translate-x and translate-y good work and have a great day
- @G-GakiiWhat are you most proud of, and what would you do differently next time?
- my initial Tailwind project
-The capability to apply a hover effect to an image
What specific areas of your project would you like help with?How to implement hover effects using custom CSS, while the custom CSS is functioning elsewhere but not on hover.
@MesrouaDjamelhi congratulations on your work your design is very close to the proposed design, you can make improvements by adding animation to the hover.
- @lavollmerWhat are you most proud of, and what would you do differently next time?
I am most proud of working through the different challenges and expanding my knowledge of useState, props, flexbox, and styling options. Next time, I would focus more on the functionality of the application and then addressing the styling pieces.
What challenges did you encounter, and how did you overcome them?I worked through the mobile responsive challenge, useState knowledge, flexbox styling, sidebar navigation in mobile and much more. I worked through each one individually - taking time to understand my gaps of knowledge. Overall, it was a great project.
What specific areas of your project would you like help with?I would like help with creating the functionality for the delete trash icon in the cart. I would like the icon to remove all information when selected with the statement "Your cart is empty".
@MesrouaDjamelcongratulations for your design it's close to the proposed design i have some suggestion to propose you : The carousel : you can use material tailwinds: https://www.material-tailwind.com/docs/react/carousel it's easy to set up and the component is animated. Hover: https://tailwindcss.com/docs/fill
and use this syntax in jsx => <svg width="57” height="54” viewBox="0 0 57 54” fill="none” className="absolute left-4 top-[200px] cursor-pointer stroke-veryDarkBlue hover:stroke-orange transition-all ease-in-out duration-300” onClick={handlePrev} > <ellipse cx="28.1706” cy="27.1216” rx="28.1706” ry="26.7823” fill="#FEFFFF” stroke="none” /> <path d="M33.8049 16.4087L22.5366 27.1216L33.8049 37.8345” strokeWidth="3” /> </svg> check if the svg already has a fill or stroke and delete it
Trash: const handleDelete = () => { if (quantityToBuy === 0) { setIsAddedToCart(false); } setIsAddedToCart(false); setIsCartOpen(false); setQuantityToBuy(0); };
Translated with DeepL.com (free version)
- @TerezLWhat are you most proud of, and what would you do differently next time?
Good challenge for practising grids and flexbox
@MesrouaDjamelcongratulations for your work it is very close to the design proposed the colors are not exact as the design suggests. I cannot see the preview of your site nothing is displayed on my part
- @TerezLWhat are you most proud of, and what would you do differently next time?
Proud of getting faster completing the challenges
What challenges did you encounter, and how did you overcome them?pop up alert and few responsive issues. luckily stackoverflow exists!
@MesrouaDjamelcongratulations on your work, your design is very close to the challenge, suggest you adjust the margin top for the contact form
Marked as helpful - @lavollmer@MesrouaDjamel
very good work your design looks a lot like the design proposed except the container faq accordion you can improve this by using -translate with tailwindcss
- @mofada@MesrouaDjamel
congratulations on your work, your solution is very close to the proposed challenge. just a small detail: the numbers in the input fields are not the same as in the challenge. otherwise very good work
- @bcstith75@MesrouaDjamel
congratulations on your work your design is close to the proposed design, you can make improvements: as long as the fields are empty, you can disable the RESET button, the custom fields don't work, instead of using a button you can use an input and then retrieve the value of the input to make the appropriate calculation.
- @rug19What are you most proud of, and what would you do differently next time?
For the second project that I did use React, I'm proud to be able to finish it.
What specific areas of your project would you like help with?I appreciate having feedback about this project.
@MesrouaDjamelcongratulations on your work. your design is similar to the proposed design. you've used the css module, which is great, because it avoids conflicts between the different styles. i encourage you to add onclick events to modify the activity display. for example, when you click on daily, it displays information about the day, and if you click on monthly, it displays information about the month.
- @biernard1988@MesrouaDjamel
excellent work but there is something you can do better the image container is larger than the text container so the text overflows at some screen sizes.
- @AJulietteWhat specific areas of your project would you like help with?
I couldn't make the border work and didn't know how to do the shadow.
@MesrouaDjamelgreat work your can do the shadow using css it s very simple and put it in the global.css for border i think you can do rounded-lg instead of rounded-xl
- @iamkadibiaWhat are you most proud of, and what would you do differently next time?
In the project I was able to understand how grid cols-span works
What challenges did you encounter, and how did you overcome them?It wasn't easy setting the mobile view since the contents overlaps each other. I just managed to split them off.
What specific areas of your project would you like help with?Please I will love so see your great feedbacks in order to make it more better
@MesrouaDjamelgreat work the solution you have proposed looks very similar to the design however, your solution is not responsive and your grid is not centered. you can center the grid using flex box
- @JosmigaWhat are you most proud of, and what would you do differently next time?
In this exercise, i could identify what i need to do in this responsive layout.
What challenges did you encounter, and how did you overcome them?Im ok, thanks
What specific areas of your project would you like help with?Im ok, thanks
@MesrouaDjamelcongratulations on your design it looks very similar to the proposed design you can make some improvements : content in mobile view is not centred the titles are not big enough
- @YarAllyMehrineWhat are you most proud of, and what would you do differently next time?
I was able to change my use of units to rem and em, especially with margin, padding, font size and more. I am also more at ease with flexbox, and media query.
What challenges did you encounter, and how did you overcome them?To change the mobile layout to the desktop layout was tough but i was able to do it, but there is some adjustments that need to be made so that it can be identical.
What specific areas of your project would you like help with?I still have some difficulty with the margin in the desktop layout. And even with the use of flexbox, it is not aligned properly when the screen gradually decrease. I tried using justify-content, align-items, align-content, align-self without success.
@MesrouaDjamelexcellent work you've used semantic tags in your solution the css part can be improved by adding padding and margin you can increase the size of the card it is small compared to the design proposed
Marked as helpful
