@snigdha-sukunSubmitted 13 days ago
Latest solutions
Rest countries api
#next#tailwind-cssPSubmitted 8 days agoAccessibility I wasn't very successful in selecting the region. And any suggestions for other ways to make the darktheme
mortgage-repayment-calculator
#accessibility#cube-css#react#vitePSubmitted 25 days agoI want to understand how I can improve the form, especially accessibility.
room homepage
#accessibilityPSubmitted 3 months agoCSS organization, mainly media query. Suggestions for improvements to the js code
Loopstudios-landing-page
#webpack#sass/scssPSubmitted 4 months agoCSS organization and verbosity for responsive version. Responsive fonts to suit other screen scenarios.
I feel like I could give you a better solution
Product list with car
#react#tailwind-css#vitePSubmitted 6 months agoIf the architecture is adequate, and which files should I create unit tests for (I haven't implemented them)
Latest comments
- P@JosielLimaPosted 7 days ago
Feedback on Project Implementation
Styled Components Usage
Good job on using Styled Components effectively in your project. It's a great approach for component-specific styling.
React Performance Optimization
I see you added a page to study
useCallbackanduseMemohooks. As you mentioned, another optimization approach would be to use Next.js's built-in lazy loading with the<Image>component, setting thepriorityattribute for important images.For more information, check out: Next.js Image Documentation
Layout Improvements
Your current home screen layout uses Flexbox:
export const StyledHomeContainer = styled.div` padding: 2rem; `; export const CountryCardContainer = styled.div` display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; margin-top: 2rem; `;Grid Layout Alternative
As suggested, using CSS Grid would provide better control over column layout. Here's how you could modify it:
export const StyledHomeContainer = styled.div` padding: 2rem; `; export const CountryCardContainer = styled.div` display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; `;This approach would create dynamic columns that automatically adjust based on the container width, with each card having a minimum width of 280px.
For more information on CSS Grid, check out: W3Schools CSS Grid Tutorial
Marked as helpful0 - P@ArcloanSubmitted 28 days agoWhat are you most proud of, and what would you do differently next time?
Nothing in particular. I found react-hook-form really powerful. For this small project it is even too much, but it can help with really big and complex form/project. Has a lot of capabilities and I can't recall all of them on top of my head.
What challenges did you encounter, and how did you overcome them?I gave a class the important modifier. (What a horrible thing to do) I had to do it to make the background on the pound lime again on focus when there is an error because it had the same specificity of the selector for the error state. I can't wait to go on this learning path so I don't bothered refactoring my code.
What specific areas of your project would you like help with?Any suggestions on the proejct as a whole, on the form, on the handling of the class for the bg color of the pound or anything else is much appreciated :) Thank you.
P@JosielLimaPosted 25 days agoThe project performed well technically, but the visual aspect left something to be desired, as it gave the impression of lack of finishing. In a design review, which is a common ceremony here at the company I work for, the UX team would complain. But I liked the code.
This article has some tips on how to customize the radio input type:
https://bryntum.com/blog/3-ways-to-style-radio-buttons-with-modern-css/
Bonus: https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
Marked as helpful1 - P@elisilkSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Nothing super special in this solution. But I do feel like a lot of the things I've been learning over past solutions (and the learning paths) are getting better and more efficient. I continue to focus and pay attention to accessibility, while also now paying more attention to lighthouse scores.
I am proud of using a very lightweight solution for the slider that relies mostly on CSS with a little bit of JavaScript for the next/previous buttons.
P@JosielLimaPosted 2 months agoWhat I missed was a transition/animation between the slides and the scroll bar (Google Chrone) which deviates from the design proposal. The solution using clip in the hidden class was excellent, I didn't know about it. However, on the mdn website there is a notice that "This feature is no longer recommended. While some browsers may still support it, it may have already been removed from relevant web standards, may be in the process of being dropped, or may be kept for compatibility purposes only. Avoid using it and update existing code"
0 - P@NikitaVologdinSubmitted 4 months agoP@JosielLimaPosted 4 months ago
I liked your challenge. It was the same as the proposed challenge, congratulations.
The only optional suggestion is to update the readme and choose to use sematic CSS variables. Ex: var(--white) change to neutral-primary.
Another detail is the values used for spacing and margin. The design in the figma has random values and making the perfect pixel in this scenario can make it difficult to set up a scale of spacing variables. A suggestion is to always evaluate whether it is possible to adapt the proposed spacing to a scale (4-8-16-24-32, ...)
0 - P@elisilkSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
My goal for this challenge was to fully try on CUBE CSS. I feel like it went pretty well. But would love feedback on how I implemented it, and if there's anything I could have done differently. Thanks in advance.
P@JosielLimaPosted 4 months agoI learned from your code and realized some possibilities for refactoring my code. I didn't identify anything that could be improved. Good work and as the screen is simple, I understood the choice to abstract CubeCSS into a single file, it really is a challenge to separate it into atoms without real reuse.
0 - P@danmlarsenSubmitted 6 months agoP@JosielLimaPosted 6 months ago
Does the solution include semantic HTML? It is a challenge to do semantic HTML in React, we always forget about this detail. A good approach in the future is to create simple HTML to build the basic semantics, while thinking about what architecture you will use.
Is it accessible and what improvements could be made? Yes. Excellent tab navigation.
Does the layout look good on a variety of screen sizes? Yes.
The only problem was the modal on mobile that stuck at the top. Is the code well structured, readable and reusable? Aim.
Does the solution differ significantly from the design? No
Marked as helpful0
