Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

testimonials-grid-section with tailwind

mofada 310

@mofada

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I feel so confused without a design draft. Should it be 1px more or 1px less? What is this color? It makes me too confused. Forget it. I am tired. I will destroy it.

Community feedback

Atatra 170

@Atatra

Posted

And here I am, wondering what's your workflow to be able to make such pixel-perfect solutions?

0

mofada 310

@mofada

Posted

@Atatra I'm glad you approve of my solution, yes, I have my own solution. The situation is like this, the first two challenges will have free UI design, but there will be no UI in the later stages, which confuses me and the deviation will be significant. So I came up with a solution, and you can see this comment in my code:

// design template develop use, set screen width 1440px and develop
// if screen is mobile, set screen width 375px

<picture>
    <source media="(min-width: 768px)" srcset="design/desktop-design.jpg"/>
    <source media="(max-width: 768px)" srcset="design/mobile-design.jpg"/>
    <img src="design/mobile-design.jpg"-->
        alt="background" class="w-full z-0 absolute top-0 md:bottom-0 md:h-[900px]"/>
</picture>
<button class="fixed right-5 top-5 text-white z-20" onclick="changOpacity()">Toggle</button>

But later on, I found it quite troublesome to copy the code every time, and I also had to comment them in the HTML code. So, I improved them. You can see this file, I made it an external JS and imported it in.

`

1
Atatra 170

@Atatra

Posted

@mofada That's actually a very good idea! I never thought of that, thanks your detailed response. I also like how you put all your challenges related to FM in the same repo. I should definitely do the same, my github page would be way more organized that way. I'll probably have to switch to Github Pages too though.

0
mofada 310

@mofada

Posted

@Atatra It seems that a part of the recovery above has been lost, it's really strange.

I'll add it again, maybe markdown have some problem.

< script src="js/debug.js" defer ></ script >

here is the debug.js source code debug.js

Of course, there is another necessary step, which is to open the developer mode of the browser, switch to mobile mode, and adjust the size, if mobile design, you should set the width is 375。if desktop design, you should set the width is 1440, Of course, this width needs to be set according to the UI design provided by the challenge. Finally, don't forget to set your computer's zoom ratio to 100% for accurate pixel count.

Here‘s a image can help you understand! image here

By the way, you can create home page that add you all solution in this page, like this my home page

1
Atatra 170

@Atatra

Posted

@mofada That's so cool! I love that home page. Thanks very helpful, I'll try it out on my next challenge :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord