@viethoang2307Submitted 2 months ago
Yamien Ariel
@ariel172All comments
- @ariel172Posted 25 days ago
Congratulations on your solution, allow me to make a few comments:
- The “Valid email required” message shouldn't disappear when you click on the button without having entered an email, and the input should be in red when there's an error. -The success message should contain the user's email address -All (index page as success message) should adapt to screen size I hope these remarks will be of some help to you. Once again, congratulations for what you've done!
0 - @Mahnoor366880Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I’m most proud of how I implemented the image carousel and lightbox functionality using JavaScript. It enhances the user experience by allowing smooth transitions between product images. Additionally, the responsive layout using Tailwind CSS, Flexbox, and CSS Grid makes the page visually appealing across different screen sizes.
Next time, I would focus more on refining the navigation bar styling to ensure consistent spacing and alignment. I would also improve the cart functionality by adding a mini-cart dropdown and an option to remove items dynamically. Moreover, I’d like to explore Next.js for better performance and scalability.
What challenges did you encounter, and how did you overcome them?-
Navigation Bar Spacing & Separation Line Challenge: The navbar didn’t have equal spacing on both sides, and the separation line wasn’t aligned properly. Solution: I used container mx-auto in Tailwind CSS to center the navbar and applied a border-b with limited width to align the separation line with the navigation links.
-
Image Layout & Justification Challenge: The product image was taking up too much space, making the details section look too short in height and wide in width. Solution: I adjusted the grid layout, limiting the image section’s width and ensuring better proportion between the image and product details.
-
Lightbox & Image Carousel Functionality Challenge: Implementing the lightbox while ensuring smooth navigation between images was tricky. Solution: I used JavaScript event listeners to dynamically update the lightbox image source, allowing users to click thumbnails to change the displayed image.
-
Cart Quantity & Display Challenge: The cart quantity indicator wasn’t updating properly. Solution: I modified the JavaScript logic to ensure the count updates dynamically and remains visible when items are added to the cart.
Cart Functionality Improvements
Currently, the cart counter updates dynamically, but should I handle local storage to persist cart data on page reloads? Any insights, suggestions, or best practices to refine these areas would be greatly appreciated! 🚀
@ariel172Posted about 2 months agogreat solution, but you could have come closer to the design
0 -
- @ariel172Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have finished this challenge on time, unlike the previous one, I'm proud to have written JavaSvript. Next time I'll do better in the responsive because at some level the social network menu is not correctly displayed.
What challenges did you encounter, and how did you overcome them?I've encountered challenges in responsive when clicking on the arrow to share the menu that appears is not correctly displayed on some screen sizes. I couldn't fix it, I made it responsive on a certain size.
What specific areas of your project would you like help with?Responsive! It's as if I had to make it for every pixel to display the social network menu properly.
@ariel172Posted about 2 months agoThank you very much, I'll take this modification and apply it to my code to see exactly how it turns out.
1 - @jamilgillaniSubmitted about 2 months ago@ariel172Posted about 2 months ago
Nice solution bravo there's something I couldn't do that you did it's make the social network menu correct on any screen size and nice idea to make this menu appear by animation. However, the small problem is the size of the elements when you're on a small screen size, they're always big. Otherwise your solution is great
0 - @yasingunaydiinSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I just needed javascript practice. I didnt want to spend time on CSS.
What challenges did you encounter, and how did you overcome them?I just needed javascript practice. I didnt want to spend time on CSS.
What specific areas of your project would you like help with?I just needed javascript practice. I didnt want to spend time on CSS.
@ariel172Posted 2 months agocongratulations on your proposed solution. I tested it but the image doesn't load.
0 - @samuelgomez05Submitted 2 months ago
- @sd3u16Submitted 2 months ago@ariel172Posted 2 months ago
First of all, congratulations on your proposed solution. Some remarks: The font style you imported doesn't work, the responsive you didn't set different screen size and for the screen size you set the user testimonial sections don't have an adapted size. I think you need to rethink these things, but otherwise you've done a good job on the size for PCs - congratulations!
0 - @ktzazzSubmitted 5 months ago@ariel172Posted 5 months ago
Very nice solution and simple code is good and helps others thank you
1 - P@DavidPokrajacSubmitted 5 months agoWhat specific areas of your project would you like help with?
Would like to get feedback for my scriptTwo javascript file. Would like to know a better way to change theme styles other than manually changing class names on elements.
@ariel172Posted 5 months agoCongratulations on your challenge. I don't know if I'm wrong, but it's not possible to perform calculations with your live deployment.
Marked as helpful1 - @razzasidSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I have take a challenge of myself to build this project in only flexbox i know i can easily make this in grid but had to learn more flexbox and after struggling a lot a i have build this section in flexbox.
@ariel172Posted 5 months agoVery nice solution, great work. You've solved the problem I'm having with the media queries to align the supervisor and calculator on the sides.
0 - @osuulolaSubmitted 5 months ago@ariel172Posted 5 months ago
well done, but to improve I think you should centre the content and make it responsive on both PC and mobile.
0 - @stiv-developerSubmitted 5 months ago@ariel172Posted 5 months ago
good work, but I think the small problem is that when the screen size decreases, in addition to the fact that the positioning decreases, the image must also change. In other words, the image on a PC is different from that on a cell phone, which is not the case with your solution.
0 - @SaquibFurniturewala1Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
What I'm Most Proud Of: I'm proud of creating a responsive, user-friendly design that meets project specifications. I effectively used HTML and CSS for a seamless layout across different screen sizes and implemented interactive states, enhancing the user experience.
What I Would Do Differently Next Time: Next time, I would focus on optimizing image sizes for faster loading and explore advanced CSS techniques or JavaScript for added interactivity.
What challenges did you encounter, and how did you overcome them?I faced challenges with media queries, specifically when the image and content were not aligned properly. After spending over an hour troubleshooting and consulting ChatGPT, I discovered that I had forgotten to set a width for the parent container, which resolved the alignment issue.
What specific areas of your project would you like help with?I would appreciate feedback on the following areas of my project:
Media Queries: Are my breakpoints effective, and is the layout responsive across different devices? Image Alignment: Can you suggest improvements for ensuring consistent alignment between images and text content, especially in flexible layouts? CSS Efficiency: Are there ways to simplify my CSS, particularly in avoiding redundancy and improving readability? Accessibility: Any tips on enhancing accessibility features for better user experience?
@ariel172Posted 5 months agonice solution but I think it's not close to the design to be realized in terms of fonts also notaments l
0 - @xStephxSubmitted 6 months ago
- @EderProcopioSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
This was my first solo project using CSS Grid. Although it was simple, positioning the items took quite a bit of work. As it was my first time using Grid, it was also my first time implementing a mobile-first approach. To be honest, I prefer desktop-first. I chose these approaches to challenge my knowledge, and as a bonus, I got to test my problem-solving skills.
I prioritized responsiveness in the design, and because of that, I sacrificed some similarity to the original challenge. The page’s active state works very well, and all the social media icons are functional. I tried to replace the Twitter icon with the new X icon, but by the time I finished the challenge, the link to the X icon on FontAwesome.com wasn’t working.
If I had to redo the project, I wouldn’t use percentage-based dimensions for the images. While this approach adapts to various screen sizes, it distorts the page's final layout.
What challenges did you encounter, and how did you overcome them?Positioning the elements was the most challenging part, especially in the desktop design where I used CSS Grid. Additionally, I felt that I could have structured the HTML code better, which would have saved me from some unnecessary headaches.
What specific areas of your project would you like help with?I'm starting to learn programming, mostly in a self-taught way, because although I'm taking an online course, it's not the same as having tutors and friends to ask questions. I haven’t gotten my first job as a developer yet, so my main challenge is learning how to structure code according to best development practices. I also often feel unsure about whether my design looks professional enough.
@ariel172Posted 6 months agoWow! I'm impressed, your solution is great!
Marked as helpful0 - @yemmightoSubmitted 6 months ago@ariel172Posted 6 months ago
I would have liked the image size to be adjusted like the one on the preview, so the white container should be centered, otherwise I think it's fine.
0 - @ariel172Submitted 6 months ago@ariel172Posted 6 months ago
Thank you so much you're absolutely right it was better to use an unordered list I'm still a beginner
0 - @Vanfrankie7Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of finishing this challenge without much stressing.
What challenges did you encounter, and how did you overcome them?I think, vertically centering my container in the viewport/screen has been a challenge to me. Well, i used a different approach in this project, hopefully, it works. If it doesn't work, please, people that have insights in that area should feel free to give me ideas.
What specific areas of your project would you like help with?It is definitely on centering my container vertically. setting both the tag and the container to flex, flex direction: column; justify-contents and align-contents to center doesn't work.
