@PaiKai-LeeSubmitted about 1 month ago
Latest solutions
- Submitted about 1 month ago
Four card grid
- HTML
- CSS
Review the CSS grid code and let me know what improvements I can make
- Submitted about 1 month ago
Product Preview Page
- HTML
- CSS
Is there a better way to get the image and info pieces to each take up half of the width on desktop?
- Submitted about 1 month ago
Social Links Portfolio
- HTML
- CSS
The CSS almost seems a little verbose because of the use of variables and I wonder how it can be slimmed down.
- Submitted about 1 month ago
QR Code Component
- HTML
- CSS
Am I using the right HTML tags? How is my naming for them?
Latest comments
- P@bmschwartzPosted about 1 month ago
Looks great overall. Margins and such are not pixel perfect but it looks good.
1 - @IbrahimAlatarSubmitted about 1 month agoP@bmschwartzPosted about 1 month ago
A couple of points here:
- The fonts are not displaying correctly. Look at Google fonts for the ones listed in the design and see where it explains how to embed the <link> tag in your HTML.
- On the desktop view, your image and product info components do not share the width evenly. You can see my solution for this in the @media section of my code. It's not exactly easy
0 - @Tak-0Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
As someone who is new to coding, I am proud of being able to create this page without any help. In future I will make full use of the asset files to get a more accurate finished product.
P@bmschwartzPosted about 1 month agoIt looks like your fonts are not loading correctly on your live website. Also a lot of the styling/colors are off. Take a closer look at the target design
0 - @telemocaSubmitted about 1 month agoP@bmschwartzPosted about 1 month ago
I like your use of variables for colors and I think you can expand on that with things like font weights, sizes, etc. Anywhere you see hardcoded numbers that get repeated is a good candidate for a variable.
Overall looks great though!
0 - @Gokul221Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I'm happy with the solution as I made it look almost similar to the design. I was able to manage to make the site responsive over multiple screens by using media queries over multiple breakpoints which I had not utilised previously using general CSS. I'm proud that I was able to complete this daunting task without using tailwind. 😅
What challenges did you encounter, and how did you overcome them?Though I tried to keep the CSS code as neat as possible but there could be improvements on removing the redundant CSS styles and more refined syntax structure. The media queries could be used in a more mature way I think. I would be certainly improving these things in future projects. Would love some helpful and clear feedbacks from the community. Also, I'd love to try implementing this challenge in other libraries as well.
What specific areas of your project would you like help with?Help me on improving the media queries usage and transitions. Though I liked the transition I implemented better than the original one, but would really like to know if anyone has implemented the exact hover shadow transition from the figma file.
P@bmschwartzPosted about 1 month agoVery thorough solution and it looks spot on!
I'm wondering if there is a way to consolidate your styling though. I didn't read through it all but it seems like a LOT considering the size and complexity of the component.
1 - @danielsantos011Submitted about 1 month agoWhat challenges did you encounter, and how did you overcome them?
Um dos desafios que enfrentei foi na parte do css, mas para que eu pudesse resolver tive que pensar bastante... Assim conseguindo uma solução para o problema.
P@bmschwartzPosted about 1 month agoYour card component is a little wider than the design but looks great overall
0
