@sasanqc
@firoozehImany
Submitted
✋ Hello, dear Frontend Mentor community
I glad to share my second solution in Frontend Mentor. 😍
In this challenge, I using fetch API to obtain data from JSON and tried to add a Custom Design with Animation to my solution and I'd like to hear your thoughts on this.
Thank you very much for your time and attention. I look forward to hearing your constructive feedback! 😊
@sasanqc
Posted
Congrats for this perfect solution!
@annaindistress
Submitted
@sasanqc
Posted
congrats! I think adding some animations can make it better even. try it
@rohitd99
Submitted
Hi, This is the first time I've tried Sass/Scss so if you can give me a review on that I'd be more than glad. Also I hacked my way for the curved background, if you have any other way please do tell.
@sasanqc
Posted
I have done most of my solutions with scss. I think there are some good practices there. check them. I hope it be useful for you. as yours for me. Keep going.
@fdmarti
Submitted
@sasanqc
Posted
Hi. your solution seems great. I checked the mobile version. do not skip the challenges. the pc image is not placed as you did it in the desktop version. It was the main challenge in this ui for me. also you did not place the text in center for mobile. try to keep the solution close to the challenge as much as is possible. keep going. steady and slow wins.
@rashidshamloo
Submitted
I noticed in Tailwind CSS, some CSS properties like "border-1" are in "px" units while others like "w-1" are in "rem" units. is this a better practice? because in my previous CSS/SASS I used to do all units in "rem/em", and I'm wondering if i should do the same.
@sasanqc
Posted
Hi dear rashid , your solution looks good. I do not know tailwind css much, but I think for small values like borders and radius px or rem is not much important even px is more readable. while for values like width you should rem.
@mathlimam
Submitted
@sasanqc
Posted
Hi, your desktop version looks good, but your solution must be responsive. I give you some tips . I hope it be helpful:
<div class="item new2"><p>The Downsides of AI Artistry</p>
<div class="paragraph">Will What are the possible adverse effects of on-demand AI image generation?</div></div>
<div class="item new3"><p>Is VC Funding Drying Up?</p>
<div class="paragraph">Private funding by VC firms is down 50% YOY. We take a look at what that means</div></div>
@lucaliebenberg
Submitted
What could I improve, with regards to the responsive design?
@sasanqc
Posted
Hi, Luca. Congrats. you did it good, First of all do not use px unit, use rem for dimensions. and second one use button or a link tags for buttons. KEEP GOING!
Marked as helpful
@savvystrider
Submitted
This project looked deceptively easy but getting everything aligned and in place was a challenge.
@sasanqc
Posted
Hi, Congrats for your submission. First of all , your solution should be similar to the challenge, as much as is possible. fonts and colors are different. next, the challenge wants us to set different images for different screen sizes. you cat do that with picture tag
<picture>
<source srcset="images/image-product-mobile.jpg" media="(max-width: 375px)" />
<img class="image" src="images/image-product-desktop.jpg" alt="" />
</picture>
Marked as helpful
@ayushprojects
Submitted
Hello everyone I have completed the product preview task. comment the mistakes that I have made and suggest some writing tips. thankyou
@sasanqc
Posted
Hi, Congrats for your submission
<div class="butn">
<button id="btn">
<img src="images/icon-cart.svg" alt="icon" id="icon">
Add to Cart</button></div>
you can check my solution for more help.
Marked as helpful
@Gh0stByt3s
Submitted
How to make a mobile image work in mobile view and desktop image work at desktop view
@sasanqc
Posted
As i did for this challenge, use picture tag to set multiple image sources for different image sizes.
<picture>
<source srcset="images/image-product-mobile.jpg" media="(max-width: 375px)" />
<img class="image" src="images/image-product-desktop.jpg" alt="" />
</picture>
read this The Picture element - This helped me to get useful information about picture tag in html.
Marked as helpful