Any enhancements to the code.
breakpoints and layout structure
"The use of rem and accessibility I think I did not use them the right way."
it would be better if you but height : fit-content on the cards
Awesome Code
The first challenge was adding a distance between list markers and text. I found a solution in Stack overflow page.
The second challenge was a nutrition table, where I couldn't make an underline below the nutrition value. I decided to add 4 tables for every single nutrition value and add div with underline class under every of the tables.
What specific areas of your project would you like help with?In the instructions section, the wrapped text is under the list number, which shouldn't be there, but I can't find a solution for this problem
You have done a good job with the challenges you have faced. I have some advice to offer:
1.Nutrition Table Problem
html
<div class="table">
<div class="box border-1">
<div class="key">Calories</div>
<div class="value">277kcal</div>
</div>
<div class="box border-1">
<div class="key">Carbs</div>
<div class="value">0g</div>
</div>
<div class="box border-1">
<div class="key">Protein</div>
<div class="value">20g</div>
</div>
<div class="box">
<div class="key">Fat</div>
<div class="value">22g</div>
</div>
</div>
Then, use Flexbox to style it:
css
.table .box {
display: flex;
justify-content: space-around;
}
2.Wrapped Text Under the List Number
<p> tags like this:html
<ul>
<li>
<p><span>Total: </span>Approximately 10 minutes</p>
</li>
<li>
<p><span>Preparation: </span>5 minutes</p>
</li>
<li>
<p><span>Cooking: </span>5 minutes</p>
</li>
</ul>
Using rem and em instead of pxin CSS offers significant advantages, especially when it comes to responsive design, accessibility, and maintainability. Here’s some feedback on the benefits of adopting rem and em units:
Advantages: 1.Responsive Typography:
remand em are relative units, making it easier to create scalable layouts. When users adjust browser settings (e.g., zoom or base font size), designs based on rem/em scale appropriately, whereas px-based designs remain fixed.
2.Accessibility:
Relative units like rem and em respect user preferences, especially for those with visual impairments who adjust their base font size for better readability. Designs using px ignore such user-defined settings, potentially causing readability issues.
3.Consistency Across Devices:
rem and em units ensure consistent rendering across various devices and screen sizes. For example, using rem for layout dimensions allows elements to scale based on a user’s default font size, creating a more fluid and adaptable design.
4.Easier Scaling of Elements:
By using rem for root-level elements and em for nested elements, you can control the scaling of individual components more effectively. This flexibility is helpful for modular design systems, where you want components to be flexible and adapt to their context.
5.Maintaining Proportions:
Using relative units helps maintain proportions between text sizes and other layout elements (like padding, margins, etc.), which becomes crucial for responsive designs. This eliminates the need to manually adjust pixel values for different breakpoints.
