✋ 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! 😊
congrats! I think adding some animations can make it better even. try it
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.
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.
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.
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.
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.
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>
What could I improve, with regards to the responsive design?
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!
This project looked deceptively easy but getting everything aligned and in place was a challenge.
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>
Hello everyone I have completed the product preview task. comment the mistakes that I have made and suggest some writing tips. thankyou
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.
How to make a mobile image work in mobile view and desktop image work at desktop view
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.
