Binh05
@Binh05All solutions
product-list-with-cart React Tailwind
#react#tailwind-css#viteSubmitted 7 days ago- I'm currently learning state management in React and would really appreciate any advice. Also, could you suggest libraries or best practices for managing themes and CSS variables effectively?
When I changed from using stateQuantity to adding quantity into the data after calling the API like this:
setData(() => res.data.map((data) => ({ ...data, quantity: 0, setOrder: false, })) );But when I increase or decrease quantity like this:
setData((prev) => { const updated = [...prev]; updated[index].quantity += 1; return updated; });The quantity gets incremented twice. In this case, what would you do? Would you use a separate stateQuantity, or keep quantity inside data and update it in another way, like using .map() instead of spreading?
results-summary-component-main
Submitted 11 days agoHow do you usually decide when to split a component or keep things together? when using CSS modules, I find that I can’t easily style components from a global stylesheet or a shared parent file.
bookmark landing page HTML CSS SASS JS
Submitted 19 days agoI'd love to hear your feedback on the accessibility and SASS structure of my project. Any suggestions would be greatly appreciated!
room homepage master HTML SCSS JS
#sass/scssSubmitted 23 days agoIn this challenge, I explored SCSS, BEM, CUBE architecture, and CSS animations. I started by experimenting with SCSS and animations.
Using SCSS really helped make my code cleaner and more organized. However, I ran into some difficulties when trying to override styles within media queries — specifically, I had to write out the full parent selectors to ensure specificity and proper overriding.
I’d love to hear your experiences or best practices when working with SCSS, BEM, or CUBE. Also, do you think it’s a good time for me to switch to React? And when it comes to animations, do most developers prefer using CSS or JavaScript?
Thanks in advance for any insights you can share!
loopstudios landing page HTML CSS JS
Submitted 25 days agoI would appreciate any tips to improve my responsive design skills — especially regarding
font-size,padding,margin,widthandheight, as well as best practices for handling images and respecting the user'sroot font-sizesettings.ecommerce product page using HTML CSS JS
Submitted 29 days agoI'm still working on optimizing the responsive behavior and positioning of some elements. For example, when resizing the screen, the cart icon or the "prev" and "next" buttons don’t stay centered within the lightbox.
I'm unsure whether the cart should be positioned relative to the img element or the entire container for better flexibility. I’d appreciate any tips on which CSS properties (like using percentages translate or flex/absolute positioning) work best for responsive alignment in these cases.
Also, I just realized that my laptop display was set to 75% zoom, so some parts of the UI might appear larger than intended when viewed at 100%.
I haven’t added a limit to the number of cart items or restricted the cart display height yet. Ideally, I want it to become scrollable when there are too many items — probably using
overflow: scrollor similar.Thanks in advance for any suggestions!
contact form HTML CSS JS
Submitted about 1 month agoI'm currently working with different input types like radio buttons and checkboxes for the first time, and I'm running into some styling challenges.
I’m not using any image assets — just pure CSS with background-color and outline to style them. It works, but I’m not sure if it's the best or most scalable approach.
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; border: .1rem solid var(--Grey-500-medium); position: relative; } input[type="checkbox"]:checked { border-color: var(--Green-600-medium); background-color: var(--Green-600-medium); } input[type="checkbox"]:checked::after { content: '\2713'; color: var(--White); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }How do you usually style custom radios and checkboxes? Do you use icons or stick with CSS-only solutions?
Would love to hear your thoughts or tips on this!
time tracking dashboar using javascript fundamentals
Submitted about 1 month agoI want to create an animation effect when the content changes. Could you help me come up with some ideas and how to implement it?
sign up form using flex, grid and js fundamentals
Submitted about 1 month agoI'm currently working on improving the responsiveness of my websites. If anyone has useful tips or best practices for handling different screen sizes, I'd really appreciate your input!
article preview component using flex, grid, transition and position
Submitted about 1 month agoI was trying to make the drawer image overflow hidden when it exceeds the container boundaries. However, when I set height: 100% without specifying the width, it took up the full width of the screen instead of hiding the overflow content.
To work around this, I set width: 123%, which helped achieve the visual result I wanted.
.card .img img { width: 123%; height: 100%; border-top-left-radius: .5rem; }I'm not sure if this is a good solution, so I’d really appreciate any feedback or suggestions from others.
