i would like to be faster.
What challenges did you encounter, and how did you overcome them?It was a bit difficult for me to make this page responsive because I needed padding on my headers but not on the image. I solved this by adding another class called container-responsive.
To improve the nutrition section, consider using HTML tables, which provide a structured layout perfect for displaying grouped data. You can leverage the border-bottom property on table rows to create a clean, separated look, enhancing readability and visual appeal. This method keeps the table easy to style and adjust while allowing flexibility to customize each row or cell to suit your design preferences.
Instead of adding width and height inline on the image tag, consider moving the styling to CSS to separate structure from style, which keeps the HTML clean.
I faced a little challenge in the side of coding the profile picture and the name to float next to each other. So I used flexbox and set a width for the flex container.
Use Semantic Tags, Replace generic <div> elements with more appropriate semantic tags like <section> or <main>. This improves accessibility and readability.
Wrap the main content in a <section> instead of a <div class="container">.
Positioning the Container class in the middle of the screen. I have solved this issue by flexbox.
