Every tips about accessibility are welcome.
Maybe with the good size of elements
proud of being consistent
What challenges did you encounter, and how did you overcome them?variable css
What specific areas of your project would you like help with?image of bottom where i use flexbox
Hey there, nice work !
If you want to center the content in the middle of the webpage, do this:
body { display: flex; justify-content: center; align-items: center; height: 100vh; }
The way I was able to insert an image in html
What challenges did you encounter, and how did you overcome them?inserting an image
What specific areas of your project would you like help with?positioning the content center
Centering Your Content
To center your content, you can use Flexbox:
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
Nutrition Section Tip
For the nutrition section, it's better to use a table for semantic clarity and better understanding:
<table> <tr> <td>Calories</td> <td class="values">277kcal</td> </tr> <tr> <td>Carbs</td> <td class="values">0g</td> </tr> <tr> <td>Protein</td> <td class="values">20g</td> </tr> <tr> <td>Fat</td> <td class="values">22g</td> </tr> </table>
What makes me most proud of is using grid to space out the elements instead of using the property of margin.
What challenges did you encounter, and how did you overcome them?The biggest challenge for me was to find the correct font sizes of the elements so my solution fits as much as possible with the design.
What specific areas of your project would you like help with?In my opinion, there is nothing of the specific project to need help with.
The design is a perfect fit !
Just a small note about the content shadow: the shadow should upscale on hover and downscale when not hovered.
It's a very minor detail that you can see in the design example files.
Keep coding =)
I'm most proud of the animations I added to the button. I am also proud that the component will respond to small screen sizes and shrink.
What challenges did you encounter, and how did you overcome them?Not many; most of the issues I would have encountered have already been solved with my previous two solutions.
What specific areas of your project would you like help with?Any cool tips and tricks would be appreciated.
Hey, very nice work with your TailwindCSS .
Just some advice about accessibility :
Add ARIA (Accessible Rich Internet Applications) tags:
<div class="w-full max-w-80 bg-dark-grey p-6 rounded-lg flex flex-col items-center gap-6" role="contentinfo">
Improve image descriptions:
<img alt="Profile picture of Jessica Randall" src="./assets/images/avatar-jessica.jpeg" class="rounded-full h-24 w-24" draggable="false"/>
Add navigation attributes to links:
aria-label attributes to links to indicate their destination.<a href="#" class="w-full py-3 bg-grey rounded-lg hover:bg-primary hover:text-off-black transition-colors" aria-label="Jessica Randall's GitHub profile">GitHub</a>
Add a container for the <main> tag:
<main> tag to indicate the main content region.<main class="w-full max-w-80 bg-dark-grey p-6 rounded-lg flex flex-col items-center gap-6">
Use accessible links:
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary visited:text-primary" aria-label="Frontend Mentor challenge opens in a new tab">Frontend Mentor</a>
I am proud that i was able to make this design and also the fact that i was able to navigate through git hub since this is my first time actually utilizing github.
What challenges did you encounter, and how did you overcome them?Major encounter was box-shadowing in the stylesheet but i made research to resolve this. The other challenge is making the design centralized, this is yet to be resolved by me.
What specific areas of your project would you like help with?I need help with design.
Heyyy nice work.
If you want center your content you can use Flexbox. With some CSS on your <body>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
Getting the media queries to work right without having to remove the image from the main div.
What challenges did you encounter, and how did you overcome them?Getting the image to extend to the edges when viewed on mobile screen.
I used the div I had contained the image in and the body to remove margin and padding and add width.
What specific areas of your project would you like help with?Bullet point sizing and spacing
Hey, very good job ! Your design matches perfectly ā ā
Some tips about web accessibility :
Use HTML5 semantic tags to improve the document structure.
Image Container:
<div class="image-container"> with <figure class="image-container"> and add a caption if needed using <figcaption>.Header:
<header> tag to group the title and description of the recipe.Sections:
<section> for different parts such as ingredients, instructions, and nutritional information.Ensure that your CSS colors provide good contrast for visually impaired users. Use tools like the Colour Contrast Analyser to check the contrast.
Add ARIA elements to improve navigation with screen readers. For example, use aria-label or aria-labelledby for important sections.
Ensure that links have descriptive text to clearly indicate their destination.