@MohamadBiomy
What specific areas of your project would you like help with?
Any feedback will be helpful ❤️
leodev
@hangtime319All comments
- P@dar-juWhat are you most proud of, and what would you do differently next time?
This task took me about 50 hours of work. A third of the time was spent on developing the animation of one block overlapping another. The problem is that had to use absolute positioning, but in this case the layout does not pass the overflow test. To do this, I had to additionally write code for calculating the height of the blocks. The overflow test passes if you change the data in data.js, and not in the browser in development mode.
Yes, it took much more time to develop, but the layout is as close as possible to the design prototype and in all resolutions and on each page corresponds to the Perfect Pixel layout.
What challenges did you encounter, and how did you overcome them?The brief files do not match the layout (( For example, background images for tablet and mobile, as well as technologies images had to be re-saved, as they did not match. It took time to sort out the discrepancies.
What specific areas of your project would you like help with?The site works, but when I go directly to the child page I get a 404 error. VUE specialists, help me solve the problem.
p.s. I solved my problem, replaced createWebHistory to createWebHashHistory
@hangtime319Congratulations on the challenge made.
- @AlfiZainWhat are you most proud of, and what would you do differently next time?
I am proud of successfully implementing Tailwind CSS 4 in my project, especially utilizing features like theme customization, group, and utility classes. Tailwind CSS significantly speeds up development and provides great flexibility in designing the UI without writing custom CSS. However, if I were to do it again, I would focus more on using @apply to manage repeated classes and consider using Tailwind plugins to keep the code cleaner and more maintainable.
What challenges did you encounter, and how did you overcome them?I struggled with understanding how Tailwind CSS works because its approach is different from traditional CSS. When the number of classes increases, the code becomes harder to read and manage.
What specific areas of your project would you like help with?I want to improve the structure of my code to make it cleaner and easier to maintain. I also want to ensure that I follow best practices in implementing Tailwind CSS, including performance optimization and maintaining design consistency throughout the application. If there are ways to further improve efficiency, performance, or scalability, I am open to suggestions and feedback.
@hangtime319Congratulations!! Your code is in organized.
- @Victor-Barrio@hangtime319
Congratulations on your project. It was identical to the original. Your code is well structured.
- @ouferhatamel@hangtime319
Excellent way of coding. It is well structured. I picked up some tips from seeing your project. Congratulations!!
Marked as helpful - @cassiopeia001@hangtime319
Congratulations. Your project is identical to the original and the code is well organized.
Marked as helpful - @Jenny-EikensWhat are you most proud of, and what would you do differently next time?
I am proud of my implementation of the image gallery and the lightbox.
I also feel good about the fact that, in this project, I put the data into separate files to reference from the components, which is something I only just learned to do from feedback on my previous project (where I had hard-coded the data).
What challenges did you encounter, and how did you overcome them?There were a lot of things I struggled with, as this was definitely the most advanced project I have done so far.
This is definitely a good thing though as I learned a lot. I had never coded an image gallery and a lightbox before. I also didn't feel super confident passing down state variables before this project, but now I feel like I really got the hang of it.
At first I felt overwhelmed by all the functionalities I would have to implement, but the more I thought about it and came up with a structure and ideas, the more confident I felt that I would be able to do it.
What specific areas of your project would you like help with?My one main issue is with centering the open shopping cart on mobile screens. I positioned it absolutely, which works for bigger screens, but I just haven't been able to figure out how to center it on the page on small screens. I don't want to use a fixed position because I don't want it to cover the other content when I scroll. Someone please tell me how to solve this issue, as I know my current solution to this isn't a good one.
Another thing I haven't managed to figure out is how to prevent the nav links from moving up a little to accommodate for the added border at the bottom upon hovering.
Other than that, I don't have any specific questions right now, but any feedback is welcome!
E-commerce product page built with React and TailwindCSS
#accessibility#react#tailwind-css#typescript@hangtime319Congratulations on your project. It turned out very good. To center the shopping cart on smaller screens I used width with viewport width(vw). Try doing it this way
- @wendyhamel@hangtime319
Congratulations on the project. The design was the same as proposed by the challenge
- @JacobMayor007What are you most proud of, and what would you do differently next time?
My most proud of is that I challenge myself of this program, at first I didn't use the CSS Grid, because I don't know how to use it (You can check it out on my github account). It was okay but it wasn't great like this. So, my most proud is that I went farther to my capabilities, and now I understood how CSS Grid works.
What challenges did you encounter, and how did you overcome them?My challenges was to implement the functionality of the error handling messages, and media querries, but I overcome them just by researching on stock overflow.
What specific areas of your project would you like help with?My specific areas of my project that I would like to help is how can I get the message that was written on textarea, and how can I stop the spamming the messages when it submitted. Can anyone tell me how to do it? Please.
@hangtime319Congratulations on overcoming your challenge.
- @sheriminWhat are you most proud of, and what would you do differently next time?
I learnt how to use absolute positioning to display error messages. This ensures the messages appear clearly without impacting the margins of the input boxes.
What challenges did you encounter, and how did you overcome them?I had never used radio buttons before, so I took the initiative to research how to style them properly.
@hangtime319Congratulations!!! Your code is very good!!!
- @roidzuhWhat are you most proud of, and what would you do differently next time?
React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none.
What specific areas of your project would you like help with?Any feedback is welcome!
@hangtime319Congratulations!!!!
- @efabrizio75What are you most proud of, and what would you do differently next time?
I am very satisfied with the markup and its simplicity, but I am sure I can leverage other solutions to refine it further.
I am happy for the time it took me to implement it because it matches my estimate.
What challenges did you encounter, and how did you overcome them?I questioned a little my choice of making the input radio visually hidden because I thought that I had lost keyboard access to it, but instead it was preserved.
I used axeDevTools to check that the rating values were indeed still accessible.
What specific areas of your project would you like help with?I would like to see how others implemented the radio buttons while maintaining full keyboard functionality.
Also, I would like to understand better why the colors I copy from the style guide file different from those that they appear in the Figma design. It's a bit annoying, but I am sure it is my ignorance in the usage of the tools. Please help :-)
@hangtime319Congratulations!!!
I'm also unsure about the colors, but I try to manually correct the tone according to the design.
- @Godinhoweverson@hangtime319
Parabéns pelo projeto!!!
O design ficou muito bom e seu código é bem estruturado. Encontrei um erro de cálculo que se clicar em algum botão de porcentagem e calcular a gorjeta, e depois clicar no custom da gorjeta para colocar qualquer valor, ele não calcula com esse valor atual.
Marked as helpful - @mik2ndWhat are you most proud of, and what would you do differently next time?
i finish
What challenges did you encounter, and how did you overcome them?async function is good thing.
What specific areas of your project would you like help with?im back and im good
@hangtime319Congratulations! Some adjustments are necessary to get closer to the layout, such as increasing the width and height of cards and text spacing.
- @peter4049What are you most proud of, and what would you do differently next time?
In this challenges I proud of my self is knowing the JavaScript magic and knowing how HTML, CSS, and JavaScript are related each other and all three combine and doing awesome job. Love to do more difficult & complexity challenges.
What challenges did you encounter, and how did you overcome them?The challenge that I encounter is need to learn deeply on JavaScript because if you not clearly understand I give you stuck and frustration.
What specific areas of your project would you like help with?None.
@hangtime319Congratulations. There are some details missing, such as centering the card and styling the success message button.
- @oluwa-busssy-olamiWhat are you most proud of, and what would you do differently next time?
Working on this challenge.
What challenges did you encounter, and how did you overcome them?I learned how to position certain div elements by watching a helpful video.
What specific areas of your project would you like help with?I would appreciate blunt feedback on my HTML , CSS, and JS layout. Please provide constructive comments and suggestions for improvement. Thank you
@hangtime319Congratulations on the project. Suggestions: put a background on the share arrow, remove the arrow from the modal
- @rckashWhat are you most proud of, and what would you do differently next time?
I am proud of how I learned and applied CSS Grid to this project.
What challenges did you encounter, and how did you overcome them?Learning CSS Grid was a challenge for me at first but everything clicked when I found out what was wrong with my code.
What specific areas of your project would you like help with?None. I am confident that I did well.
@hangtime319Congratulations!!
- @taiwogbadamosiWhat are you most proud of, and what would you do differently next time?
Finally applied grid! I probably should have started with flexbox then switched to grid at the media query, i'd have probably used less code.
What challenges did you encounter, and how did you overcome them?Figuring out how to extrinsically size a block of text, while keeping varying lengths of text centred
What specific areas of your project would you like help with?i just want to keep going!
@hangtime319Congratulations on the project! One suggestion: decrease the font weight in paragraphs and titles
