Divasraj Vimal• 90
@Divasraj1
Submitted
Any Advice for this advice generator is appreciated ;)
Humas
@dolomita28
All comments
- Humas• 250
@dolomita28
Posted
Hi Divasraj, Well done! I would only suggest you a sligth improvement. You could improve your layout adding a height:100vh to your body css, so the card gets vertically centered. Best
0 - Paweł Piotrowski• 270
@pawelpiotrowski38
Submitted
Any feedback would be appreciated.
Humas• 250@dolomita28
Posted
Hi @pawelpiotrowski38 Great job! I would only suggest you using a picture html tag instead of having both images and then hiding/showing them from the css file. Please see this [picture_tag] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) and even better [responsive_images] (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) Best
Marked as helpful
0 - Esther• 20
@estaarrr
Submitted
A little bit of background: This is my very first challenge in Frontend Mentor; I picked up HTML and CSS through a Udemy course last year, and currently I am studying React.js. Along the way, I realized nothing is getting internalized, as I am slowly forgetting all the basics and foundations of HTML, CSS, and JS. That is why I wanted to revisit these techniques first before I move on with the rest of React.js.
As I was working on this first challenge, I realized I did not remember the simplest thing, such as positioning and centering. There are repeated elements in CSS that need grouping but somehow doing that messes up the project. So I am submitting a rough and raw version of this challenge, to see how my first step in working on an actual project is.
Any feedback would be appreciated. Thank you.
Humas• 250@dolomita28
Posted
Hi Esther, You did a great job. There can be many different solutions to achieve the same. I would only suggest you avoid using px units. It's better to get used to use %, rem or em units. You could also take advantage of flexbox techniques (which I've seen you know how to use them) even for nested containers so you don't need using margins to center items. Finally, check out the report above with some accessibility issues to get extra hints. Best
1 - Benolísio• 60
@prettyBcoding
Submitted
How can I apply/create the design depending on the device's screen size?
Humas• 250@dolomita28
Posted
Hi, you could define a width to the bg div, so the card doesn't look so big. Then, use a padding for appliying the inner space between your card and image. You could also, instead of using margin to center containers (in this case the card), make use of flexbox. Hope it helps Best
1 - Arnaud HONFIN• 50
@Richy55-max
Submitted
Hi everyone, I've just completed the "QR code component" challenge. Any feedback and suggestions on how I can improve are very welcome!
Humas• 250@dolomita28
Posted
Hi Arnaud, Congrats for such a great work you've done! My only suggestion would be, try to avoid using pixels whenever possible. It is better to get used to use %, rem or em units. Furthermore, although there's a bit of controversial going on, it is better to load fonts earlier in the html instead of importing them in the css file. Best
Marked as helpful
0 - Adeyemi Abiade• 60
@Cmdliner
Submitted
This is my solution for the order-preview-card component and is my second solution on front-end mentor. I did this one to correct the mistakes i did in the first one and improve my css. If there is any advice on how i can improve the code, i'm open for suggestions.
Humas• 250@dolomita28
Posted
Hi Adeyemi, Well done! You could remove the flex class at <div class="payment-amount flex"> so that these two items of that dive get closely aligned.
Marked as helpful
0
