@maxcooper91092
What specific areas of your project would you like help with?
I would appreciate any suggestions for my code.
I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!
I’m currently learning...I'm currently deepening my knowledge of CSS, especially in terms of element positioning and working with Flexbox and Grid. I'm also learning JavaScript and exploring how to combine both languages in a meaningful project.
Latest solutions
Recipe page using semantic HTML and basic CSS
PSubmitted 5 days agoAny feedback or suggestions are very welcome :-)
Social links profile build with CSS
PSubmitted 19 days agoAny feedback or suggestions, especially regarding the code structure and organization, are more than welcome :-)
Blog preview card by CSS, flexbox
PSubmitted 22 days agoAny comments or suggestions are more than welcome :-)
QR component using basic CSS
PSubmitted 25 days agoI'm not sure about using the margin and the padding correctly. My design matches the one in Figma, but as for those two properties, my CSS code looks a little bit chaotic to me. I feel like there are too many margins and paddings:
.container { margin: 60px auto; padding: 16px 16px 40px 16px; ... } .text-area { padding: 24px 16px 0 16px; ... } .text-area__title { margin-top: 0; margin-bottom: 16px; ... } .text-area__text { margin: 0; ... }
Latest comments
- P@BaraKalvo
Hi, nice visual styling! :-) Just a small note: since the section Nutrition displays nutritional values in two columns and even refers to a 'table' in the text, it might be more semantically appropriate to use an actual <table> element. That way, screen readers can better understand the data structure. Here is an example of how it could look:
<table> <tbody> <tr> <th scope="row">Calories</th> <td>277kcal</td> </tr> ... - @SeppxkuP@BaraKalvo
Hi, great job!
I’d suggest adding some padding to the container—either directly to the <main> element or, even better, by wrapping everything in a <div class="container"> and adding padding there. This way, the text won’t be touching the edges on smaller screens.
In the design, the mobile version also has slightly less padding than the desktop version—you can handle that with a media query. For example, set the padding to 20px to the .container, and then increase it to 40px for larger screens.
As for the social media links, instead of using <p>, I’d recommend using <a href="..."> so they function as actual links.
Lastly, for better code readability, you could create a class like .button and style that, instead of using a div p selector, which can be harder to read and manage.
- @abdulLatifPirzadaP@BaraKalvo
Hi, I like the HTML structure – it's clear and simple. Also, defining your own color variables is a good idea. Regarding the spacing between elements inside the <div class="align">, I’d recommend resetting the margins on all elements (margin: 0) and using gap: 12px; instead. In my opinion, this solution is simpler and more concise. Overall, you've done a good job!
Marked as helpful - @77KromoP@BaraKalvo
Hi, to me, it's not necessary to use flexbox on .card. All the elements inside the card are situated vertically, so it works the same way without flexbox. But overall, you've done a good job. Keep it up!
Marked as helpful
