@SylvainPS78Submitted 11 days ago
Ayako
@Ayako-YokoeAll comments
- @Ayako-YokoePosted 1 day ago
Great work! You used the grid effectively. One small suggestion: the close button of the hamburger menu is still taking up space even when it's not visible. Additionally, the hamburger menu could be positioned a bit closer to the right side. Also, adding cursor: pointer; to all clickable items would improve the user experience.
Marked as helpful0 - @PaiKai-LeeSubmitted 15 days ago@Ayako-YokoePosted 14 days ago
This is great! I really like how you implemented the animation for the toast message!
0 - @JoacoDvSubmitted 23 days ago@Ayako-YokoePosted 19 days ago
Great work! The design looks excellent, and the accordion functionality works well. One thing to note is that the requirement specifies, 'Hide/Show the answer to a question when the question is clicked,' which I initially misunderstood myself. Additionally, you could consider adding some animations to create a smoother opening and closing effect for the answers.
0 - @stezorSubmitted 27 days agoWhat are you most proud of, and what would you do differently next time?
Most proud of event delegation.
What specific areas of your project would you like help with?All comments r welcome
@Ayako-YokoePosted 27 days agoGreat work! I like the concise yet well-described alt text for the image. Recently, I started using the <section> tag, so you might find it useful too.
Marked as helpful0 - @Utkarsh860Submitted about 1 month ago@Ayako-YokoePosted about 1 month ago
Great work! It's seamless and handles decimal points correctly. It might be a good idea to keep the tip amount button active (with a changed color) so users can easily see which option they selected.
0 - @broken555wheelSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
Styling pages with CSS has got a lot easier and it takes me less time to do than it did when I started. I also use less redundant code.
Furthermore, I at least managed to fetch the data from the JSON file.
What challenges did you encounter, and how did you overcome them?Toggling between days, weeks, and months, maintaining an initial selection on loading. I solved this by assigning a selector to one of the options then toggling between them by clearing all possible occurrences of the assigned selector and reassigning the relevant option.
I also thought that since the data is consistent across cards, it should be possible to create one component and duplicate it as many times as the length of the dataset, so that if it changes, the UI changes accordingly.
I did not succeed in implementing the above and instead used a fixed for loop based on 'cards' created from the HTML file. This in turn led to the problem of annotating the data value to the already existing content in the element eg for previous time, annotating the hours to Last Week- causing me to use formatted string from the JS file.
What specific areas of your project would you like help with?The challenges mentioned in the previous section.
@Ayako-YokoePosted about 2 months agoGreat work! I like the way you fetched the data. As you mentioned in the challenging part, I used JavaScript's innerHTML to render HTML tags and CSS class names with embedded JavaScript variables. Here’s an example:
card.innerHTML =
<div class="contents"> <div> <p>${data.title}</p> ... </div> </div>;I hope this helps!
Marked as helpful0 - @kunal90803Submitted 2 months agoWhat specific areas of your project would you like help with?
Please If any reader feel any scope of improvements or any flaws .. kindly write it in the feedback so that i can improve that in future 🙂.
@Ayako-YokoePosted 2 months agoGreat work! The responsiveness and error handling are excellent. One thing to consider is cleaning up unused console.log statements, even if they're commented out, as it keeps the codebase clean and easier to maintain. Also, maintaining proper line spacing—not too much or too little—makes the code easier to read. Tools like Prettier or ESLint can help with both formatting and identifying such cases.
0 - @opeoluwa7Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I tried to implement a new way of thinking in both my css and js especially with separating styling concerns with css (i.e separating the base styles with adaptive styles) and also, I learnt how to add interactivity with javascript.
What specific areas of your project would you like help with?I was not able to completely figure out the interactivity so there are a lot of bugs with the button especially on different screen sizes, it still works but the button can go missing in some cases which will require you to refresh the browser...I had to create another media query for 1501px and upwards but to no avail, I have done my best and I sincerely hope someone can help me point out the errors I made and or solutions to the bugs the current website has...overall, this was a very good project and I am happy I made it this far (P.s, the bug mostly shows on larger screens, on mobile, there is no issue unless you switch to landscape mode)
@Ayako-YokoePosted 2 months agoGreat work! Your design is precise and well-executed.
I noticed that when clicking the button on mobile, the height of the footer changes. I struggled with this issue as well. You could try setting a minimum height for the footer to prevent this from happening.
Additionally, the tooltip on desktop is displayed outside the card. Adjusting its position might help keep it fully within the card.
Marked as helpful0 - P@kisu-seoSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I was very satisfied with implementing an accurate layout using grids.
What challenges did you encounter, and how did you overcome them?It took a considerable amount of time to structure the layout using grids, but I was able to resolve the issues by researching and referring to other people's work.
@Ayako-YokoePosted 5 months agoI really like your design and code! You’ve effectively organized the code to avoid repetition. Great work!
0 - @rafirachmawanSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
From this project I learned some CSS layout customizations such as card placement using a grid and maybe another time I will deepen my knowledge in the field of layout indirectly this is very important
What challenges did you encounter, and how did you overcome them?The challenge in this project is the layout of the cards because they are not aligned and I use pure CSS without using a framework or library.
What specific areas of your project would you like help with?maybe from the size of the card and the distance between each card
@Ayako-YokoePosted 6 months agoGreat work! I noticed that instead of setting the card height to 100%, you might want to try adding padding to each card or its contents. It could help improve the layout.
Marked as helpful0 - @Lord-ZethesSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I’m most proud of improving my understanding and application of media queries and flexbox. This project gave me hands-on experience with creating responsive layouts, and it was rewarding to see the design adapt smoothly between mobile and desktop views. Additionally, I’m happy with how I managed to implement hover states and accessibility improvements, making the card both functional and user-friendly.
Next time, I would focus more on refining the spacing and alignment of elements to match the design more precisely. I struggled a bit with getting margins and paddings just right, so improving those skills would be a key focus for me. I’d also explore more advanced CSS layout techniques, such as CSS Grid, to handle layout complexity more efficiently and gain a deeper understanding of how to handle responsive designs.
By applying these learnings, I aim to improve both the aesthetic precision and the structural flexibility of future projects.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was understanding and applying media queries for the first time. Initially, I struggled to switch between the mobile and desktop images and to adjust the layout for different screen sizes. To overcome this, I researched media queries and experimented with a min-width of 600px to create a responsive layout. Through trial and error, I learned how to structure my HTML and CSS to ensure that the design looked good across various devices.
Another challenge was getting the spacing and alignment of elements correct, especially when using flexbox. I found that certain elements weren’t lining up as expected, so I spent time tweaking the margins and padding. By testing the layout in different browsers and devices using Firefox’s inspect tool, I was able to identify where adjustments were needed and eventually achieve the desired result.
These challenges provided valuable learning experiences in both responsive design and layout control.
What specific areas of your project would you like help with?Spacing and Alignment: I struggled with getting the spacing between elements to match the design, especially when transitioning between mobile and desktop layouts. Any advice on how to better manage spacing using flexbox, margins, or padding would be greatly appreciated.
Media Queries: While I was able to implement a basic media query to switch between images, I’m not sure if I’ve set it up in the most efficient way. I’d love feedback on how to optimize my media queries for better performance and flexibility across more screen sizes.
Accessibility Improvements: I’ve made an effort to improve accessibility by using semantic HTML and visually-hidden content for screen readers. However, I’m new to accessibility best practices, and I would like advice on any additional steps I could take to make my project even more accessible.
@Ayako-YokoePosted 7 months agoThis looks great! It seems you accidentally omitted the "$" sign, so you can add it back. Also, consider applying font-weight: 700 for the price.
0 - @air091Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
The most I am proud of here is that I complete the challenge. I would do nothing different next time.
What challenges did you encounter, and how did you overcome them?My challenges I encountered is lazyness, because of a problem when centering the container. I 'd overcome it with by determination of completing the challenge.
- @juliocsantamanSubmitted 7 months ago@Ayako-YokoePosted 7 months ago
This looks great. You might want to consider adding bold formatting to the place/address.
0 - @RubchenkoArtemSubmitted 7 months ago@Ayako-YokoePosted 7 months ago
Sizes are perfect. You can check the color either in the Figma file or using the browser's inspect tool.
0 - @cndofxSubmitted 7 months ago@Ayako-YokoePosted 7 months ago
This is great. You can center the card using either of these methods:
Using Flexbox in the body: body { display: flex; justify-content: center; align-items: center; /* other styles */ }
Or, apply positioning styles directly to .card: .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* other styles */ }
0
