@chanwinharold
Latest solutions
Testimonial grid
Submitted 4 months agoAny criticism is welcome! I'd like to know specifically if my HTML markup was correct and if there was anyway I could make it more accessible to screen readers (if there's any thing I could add. I'd also like to know if the way I styled my css would have any conflicts if this was placed in a larger project.
Product preview card
Submitted 4 months agoAny feedback is welcome! I would also like to know why flexbox made the entire product card short when I tried to make the picture and content appear next to each other on desktop sizes while grid didn't (I couldn't figure out why). Does it have something to do with how flexbox is responsive to the children elements' sizes while grid makes the children elements conform to its set size?
Recipe Page
Submitted 4 months agoAny criticism is welcome, especially with the CSS I think I was too verbose but I don't know how to cut back on that.
Social Links Profile Main
Submitted 4 months agoAny advice or constructive criticism is helpful and very much appreciated!
Blog preview card
Submitted 4 months agoAny feedback is welcome! I'd like to know if there are things I can do better such as if the way I'm styling with css is too strict and won't allow for scaling, or if the way I'm styling the HTML is too verbose.
Latest comments
- @AmyH-goose
great job! If you'd like to center the content, you could add display: grid and place-content: center in the body. Also, you should use more descriptive class names so that if you work on larger projects or with a team, you'd/they'd know what it is your doing (so maybe instead of box, you could say testimonial).
Marked as helpful - @r4w311a@AmyH-goose
I think you did amazing in replicating the design. Imo, I think instead of using translate to get the layout, use grid instead so that it'd be easier to add things without having to go back and redo the positioning as much if a new card is added.
- @cohoc@AmyH-goose
You did amazing, it's basically pixel perfect! I don't know react yet but one note I have is that to make the site more accessible to screen reader users, add a span tag with an sr-only class to the pricing__actual and pricing__adjusted elements with texts like "Current price" or "Original price", then style it in css so that sighted users can't see them. That way, the screen reader won't just read $149.99 and $169.99 which would be confusing to the user.
- @thurgarion2@AmyH-goose
Amazing job :), I don't really have anything to say since I'm still new and don't know react.
- @FadiBarbahan@AmyH-goose
You've done an awesome job with the css and i liked how you organized your custom properties. I just wanted to point out that the buttons are probably going to link to another page in an actual profile so maybe add an onClick attribute or instead of using buttons, use a tags and style that as buttons?
- @HaroddeWhat are you most proud of, and what would you do differently next time?
I used clamp() for font sizes and a media query to ensure the card adapts well to smaller screens. This makes the design scalable and user-friendly on mobile devices.
Use CSS Variables for Consistency: I’d centralize more values (like the border-radius, box-shadow, or gap sizes) into :root variables to ensure easier adjustments.
Improve Code Modularity: Refactor some reusable styles (like display: flex with common align-items and gap) into utility classes or use a preprocessor like Sass for better maintainability.
@AmyH-gooseI believe you did remarkably. As a beginner too, I've learned a few things from looking at your code (thanks!). I think to make sure that people who choose to have different font sizes on their browser have a better experience, use rem or em instead of hard px so that it adjusts along with their setting choices.
Marked as helpful
