AndreeaKiara• 40
@AndreeaKiara
Submitted
What specific areas of your project would you like help with?
Facing some issues with the margins not showing properly on screenshot, looks okay on the deployed site. Will look into it
JdccDev
@jdcc1024
All comments
- JdccDev• 60
@jdcc1024
Posted
Hi Andreea,
I took a look at your margin issues. On my screen the deployed app looks similar to what was shown in your chalenge screenshot. Maybe it has to do with our screen resolution?
It seems some of the code you added in the beginning could be causing the problem. Removing this fixes your recipe card's y-axis placement.
/* 3. Allow percentage-based heights in the application */ html, body { height: 100%; }Then you can adjust the margin-top of the
cardclass to make it look closer to the screenshot.Another suggestion you can look into is using the
<table>element for your nutrition list at the end. a table with 100% width will look closer to the example as well :)Keep up the great work!
Marked as helpful
1 - Fabian Vieri• 30
@fabianvieri
Submitted
JdccDev• 60@jdcc1024
Posted
Love the naming scheme you used for your colors in the recipe-page astro file!
0 - Plai yiu leung• 100
@jasper2virtual
Submitted
What are you most proud of, and what would you do differently next time?
I hope i can do it better next time
What challenges did you encounter, and how did you overcome them?
how to render a list of buttons
What specific areas of your project would you like help with?
maybe everything, I am not good at it.
JdccDev• 60@jdcc1024
Posted
Great work!
Cool to see astro combined with tailwind at the early stages of these challenges :) For the rending of your list of buttons, you would eventually need more than an array of strings, as the link to each social media page each have their own distinct URLs.
In my project, I used something like this. Though I'm not sure if it's the best way to go about it
[ { name: 'GitHub', url: 'https://www.github.com' }, { name: 'Frontend Mentor', url: 'https://www.frontendmentor.io' }, { name: 'LinkedIn', url: 'https://www.linkedin.com' }, { name: 'Twitter', url: 'https://www.twitter.com' }, { name: 'Instagram', url: 'https://www.instagram.com' }, ].map((site) => return (<a href={site.url}>{site.name}</a>))0 - Mario Chico• 50
@Mario-chico
Submitted
What are you most proud of, and what would you do differently next time?
Reuse the qr component for this project and didn't break that one. I think css have room for improvement.
What challenges did you encounter, and how did you overcome them?
The re-utilization of components
What specific areas of your project would you like help with?
Component composition
JdccDev• 60@jdcc1024
Posted
Love the idea of reusing your components from the previous project. You'll have your own version of shadcn in no time :)
0 - Ayhem18• 40
@ayhem18
Submitted
What are you most proud of, and what would you do differently next time?
I think the solution is good enough for a Newbie Challenge. I focused mainly on the site's structure and ensuring all components behave as expected.
What specific areas of your project would you like help with?
I would mainly like some feedback on my structure:
- setting a container for the 3 components: (the image and the 2 paragraphs) such that:
- position: 'fixed'
- 40% to the left and 40% to the right of the viewport
- width=20% and the element is centered nicely
- each sub-component will be of width: 90% and of margin: 5% so each sub-component will be centered nicely within the container
What are other better alternatives, for example? What are the potential issues with my approach?
JdccDev• 60@jdcc1024
Posted
Hey Ayhem! Congrats on getting your challenge up and running! I saw your feedback questions while scrolling through my feed.
An alternative to the solution you used (absolute positioning, viewport percentages, etc) is to use the flexbox concept. In my experience, flexbox is a lot closer to what you will encounter from UX developer designs and responsive layouts in the future.
For the QR code challenge, take a look at flexbox, flex-direction, justify-content, and align-items. These 4 css settings will allow you to center your QR code card into the middle of the screen.
{ display: flex, flex-direction: column, justify-content: center, align-items: center }In your current solution, one drawback to using % is the look of the page. By using absolute and % based size calculations, your design may look very different to what your future customers see, depending on their window size. You can see it for yourself if you open your page and shrink the width of the window. The QR code will shrink, and you will end up with too much whitespace on a smaller-width screen.
Make sure to build the habit of testing your UI at different window sizes :) Keep up the good work!
1
