@AdityaNair07Submitted 3 months ago
Latest solutions
- Submitted 2 months ago
Product Preview using CSS Grid
#pure-css- HTML
- CSS
I would like to see how you did it, and how you handled the different media queries for switching out the images.
- Submitted 3 months ago
Social Links Profile using React.js
#react- HTML
- CSS
I would like help on how to properly put a file path in json file to properly extract the heroImg and dynamically render it, into a react component.
- Submitted 3 months ago
Blog Preview Card using CSS Flexbox
#pure-css- HTML
- CSS
I would love help on getting any feedback on if my HTML setup is the most proper and professional. And if not, how can I make my HTML setup as proper and professional as possible. I really focused on getting pixel perfect and scalability. So now I need help on doing it the proper and professional way. Also please tell me your process on how you go and get the active/hover/focus states in figma design, and convert that into CSS code.
- Submitted 3 months ago
Social Links Profile built with React.js
#react#animation- HTML
- CSS
Tell me how you would have made it better in react. I know that I should have not hardcoded all the buttons but rather maybe made a JSON file, and make one custom button component that mapped to the JSON file. I'll work on that eventually and add it. but talk to me about how you would have made the "design" better and more scalable. i'm getting better at knowing when to use pixels vs rem.
- Submitted 3 months ago
QR Code Component Resubmission with feedback implemented
- HTML
- CSS
I would like help on people's process on when they use px, rem, and other measurements such as svh, for viewport measurements etc.
- Submitted 3 months ago
QR Code Challenge usng Vanilla CSS and Semantic HTML
- HTML
- CSS
I would like help on seeing how to get the spacing of the text exactly how it is in the figma design.
Latest comments
- @MichaelDAbadJrPosted 2 months ago
Interesting, how you handled it in flexbox is how i would have handled it in flex. I decided to use css grid to step outside of my comfort zone for this project. Also interesting how you handled the dynamic injection of the image based on the media query. I handled that completely different using the <picture> html element and using the srcset and media attributes to dynamically inject the img. nice keep up the good work.
Marked as helpful0 - @Ss-e-N-aaSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
i learned about some accessibility rules and guidelines for keyboard users , used css variables and used media queries to make some changes for smaller screens.
What challenges did you encounter, and how did you overcome them?i didnt have access to the figma files , so i tried making things close to the original design.
@MichaelDAbadJrPosted 3 months agoThe fact that you didn't have access to the figma file, but still managed to get it very similar to the design is great and a tribute to your keen eye for design to code. I noticed you used react as well. I did too. The way I did it, was I literally tried to separate out the concerns as much as possible to very minute components. It's probably overkill on this project, but I hope to scale this up one day so I wanted to practice. I like how you didn't hardcode the links but rather map'd and used an array. I did something like that but instead I used a JSON file.
1 - @BamikronSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I will not say proud because i think i can do more than this, i can improve more than i am right now. but finishing this challenge is a joy giving motivation
What challenges did you encounter, and how did you overcome them?a lot but all thanks to someone from the community who give me some tips in my last challenge. I was able to use the tips in this challenge which make it super easy
What specific areas of your project would you like help with?i will like help with CSS grid and flex property
@MichaelDAbadJrPosted 3 months agoYour solution looks overall good and similar to the figma designL. I noticed you used <aside> for the blog image, which works in some contexts, but I approached it differently in my solution. Instead of <aside>, I used a plain <img> directly inside the <article> since the image is integral to the blog content. This helps keep the structure simple and ensures the image is treated as part of the main article rather than supplementary content.
I also organized the author section slightly differently by wrapping it in a <footer> to emphasize its role as metadata for the article. Additionally, I added class names to enhance readability and maintain consistent styling. Both approaches are valid, but I found this method helped streamline the semantics while keeping the code easy to maintain. Great job overall!
Marked as helpful0 - @FopefoluwaIkufisileSubmitted 3 months ago@MichaelDAbadJrPosted 3 months ago
You did good, it looks very similar to the design. I see you struggled with the same stuff I struggled with. Such as getting the exact spacing, font-size, and font-weights to behave exactly in the design in the perspectives of the exact line breaks, and spacing, etc. I noticed you only used one div in your html. I used a different approach and I wrapped the qr-container as it's own div, and the texts as it's own div. I found doing it this way, and then using flexbox allowed me to control the spacings of not just how the text behaved but how the containers holding the text behave as well. It made spacing them between each other and the qr-container much easier and intuitive. I used the measurements straight from the figma design.
Marked as helpful0
