P
@totibor
What are you most proud of, and what would you do differently next time?
The responsive layout is kinda works but still lot to learn about flexbox.
Latest solutions
Latest comments
- @imyazip
Looks like exactly in example, great job! But i think that giving exact width and height to components is not best practice in terms of responsive layouts
- @thezarababyWhat are you most proud of, and what would you do differently next time?
i am proud of how i handled resposiveness, the more i practce the more i gain a better understanding of how it works
What challenges did you encounter, and how did you overcome them?the challage i faced was mostly how to resive the images, view width helped me achieve it better
What specific areas of your project would you like help with?i was not able to figure out hoe too enlarge the buuton width when i made my webpage responsive
@imyazipYou did good but better give less height to whole card
- P@RiickyRiickWhat are you most proud of, and what would you do differently next time?
This project took me 3 days. The reason for this was that I needed to review all HTML semantics again. I also needed to review the HTML tables, as the Nutrition Section required their use.
I also learned how to use the
-
clamp() CSS rule for responsive font sizing (Thanks to 'Tom is Loading')
-
ol li::marker
-
ol li::before
-
counter-reset: custom-counter
-
counter-increment: custom-counter
-
content: counter(custom-counter) ". ";
These CSS rules helped me use my keyboard numbers. The default numbers in the 'ordered list' did not match the design, so I needed to use my keyboard numbers to apply the font 'Outfit'.
I will continue to do things this way so that I can continue learning new CSS rules as I go.
What challenges did you encounter, and how did you overcome them?One of the challenges I encountered was forgetting that I have a container for the card design and a container for the design itself. Sometimes, when I don't keep track of what I'm doing, I end up correcting areas that didn't need correction, which throws the whole design off. In other words, it becomes confusing if it is not well-organized.
I needed to review my code again to ensure I had double-checked everything. This can be a bit of a hassle, especially when you need to go back and check why the sizing or positioning is not working as intended.
I also kept putting the .attribution outside the container, which gave me a whole other problem, but I eventually figured it.
What specific areas of your project would you like help with?I want to continue learning about the clamp() pseudo rule and any other CSS rules that are similar or must-know, which will help you towards responsive design.
Also, when sizing and positioning in the center, what is the best practice and what is the most efficient way to execute the code (i.e., names, units, etc).
Thanks for reading! Blessings
@imyazipLooks like example, great work!
-
- @Shadab004@imyazip
Looks like example, but avatar is a bit big
- @AmirShamimWhat specific areas of your project would you like help with?
I want to learn css with proficiency and write scalable and reader-friendly code.
@imyazipEverything looks great, but I would also play with the spacing between elements and typography.
- @hazhir88What are you most proud of, and what would you do differently next time?
I'm proud of myself because I spent time on it and didn’t change anything, since it had to look exactly like the original design.
What challenges did you encounter, and how did you overcome them?Nothing was too challenging, except finding the QR code image itself.
@imyazipMissing a bit exact typography/colors settings from figma, but everything other looks like good
