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.
Hey, very good job ! Your design matches perfectly.
Some tips about web accessibility :
alt attributes) are correct but could be more descriptive. For example:
<img class="image" src="./images/image-equilibrium.jpg" alt="NFT artwork titled Equilibrium #3429"/> <img class="imagem__secundaria" src="./images/icon-ethereum.svg" alt="Ethereum cryptocurrency icon"/> <img class="imagem__tercearia" src="./images/icon-clock.svg" alt="Clock icon indicating time left"/> <img class="footer__avatar" src="./images/image-avatar.png" alt="Avatar of Jules Wyvern, the creator"/>
It took me a bit to get the footer to stay at the bottom
I think I would write down the sections before starting next time so that I could look up anything I was unfamiliar with...maybe
What challenges did you encounter, and how did you overcome them?As above, the footer.
I looked up the answer online.
What specific areas of your project would you like help with?Any criticism is welcome!
Nice work ! Everything's good, keep coding !!
The hardest part was use Figma for my first time.
I mean it looks like Illustrator and any other desing program, but I still confusing about some information as font sizes, sizes of the content etc. So I need to learn more of Figma I guess...
Hey there!
Great job on completing the challenge! Your solution is impressive!
š A few tips and suggestions:
I hope this helps!
Keep up the fantastic work!
Finding answers to questions online. Next time I would put everything in it's own container immediately.
What challenges did you encounter, and how did you overcome them?Space between items was difficult to decide how to do. I put everything in separate divs and used a bottom margin.
What specific areas of your project would you like help with?Anything where improvements could be made. Suggestions on different techniques as well.
Hey ! very nice work, about the active element, and the hover effect for the "title" you also have a little upsizing of the box-shadow. Juste a kinddly information.
Enjoyyy =)
Since I am new to Nuxt.js and Tailwind, I am proud of my solution as a whole.
What challenges did you encounter, and how did you overcome them?This is my first time working with TailwindCSS and flexbox. It's a bit tricky, but the Tailwind documentation is fantastic.
What specific areas of your project would you like help with?I tried to implement an array of objects in an authors.ts file.
export const blogAuthors = [ { id: 1, name: 'Greg', fullName: 'Greg Hooper', image: '@/assets/images/greg.webp', }, ];
I also created a prop for the name: ``
However, it won't let me use the image. The path is correct, but it won't load
Nice work and perfect fit size, very simple but nice animation. Im also interesting about nuxt.js framework, I will try one day.
It closely resembles the design that was given, and I've also included the attribution below. This is also the first time I used Vercel App to deploy a webpage.
What challenges did you encounter, and how did you overcome them?Placing the attribution proved to be quite the challenge. I wanted to stick it at the very bottom of the page. However, when I adjusted the screen size vertically, the attribution overlaps with the QR Code. In the end, I decided to place it below the QR Code statically.
I needed to tweak the directory to show the style and the images in Vercel, although there is no problem in my localhost.
What specific areas of your project would you like help with?It would really be helpful to provide a detailed instruction on the deployment phase.
Very nice, I hop you will enjoy to use tailwindCSS again and continue some projects on Frontend Mentor ;)
