@chanwinharoldSubmitted 3 months ago
Latest solutions
- Submitted 3 months ago
Testimonial grid
- HTML
- CSS
Any 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.
- Submitted 3 months ago
Product preview card
- HTML
- CSS
Any 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?
- Submitted 3 months ago
Recipe Page
- HTML
- CSS
Any criticism is welcome, especially with the CSS I think I was too verbose but I don't know how to cut back on that.
- Submitted 3 months ago
Social Links Profile Main
- HTML
- CSS
Any advice or constructive criticism is helpful and very much appreciated!
- Submitted 3 months ago
Blog preview card
- HTML
- CSS
Any 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-goosePosted 3 months ago
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 helpful1 - P@r4w311aSubmitted 3 months ago@AmyH-goosePosted 3 months ago
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.
1 - @cohocSubmitted 4 months ago@AmyH-goosePosted 3 months ago
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.
0 - @thurgarion2Submitted 3 months ago@AmyH-goosePosted 3 months ago
Amazing job :), I don't really have anything to say since I'm still new and don't know react.
0 - @FadiBarbahanSubmitted 3 months ago@AmyH-goosePosted 3 months ago
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?
0 - @HaroddeSubmitted 3 months agoWhat 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-goosePosted 3 months agoI 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 helpful1
