Skip to content
Submitted over 2 years ago

Responsive mobile-first grid using TailwindCSS

tailwind-css
Krysia Sherburne•120
@kldupless
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I built this responsive grid using TailwindCSS in combination with semantic HTML markup and a mobile-first approach. Tailwind makes mobile-first design so easy, because you build from the smallest breakpoint by default, then apply additional utility classes to target larger screens. For this challenge, I simply defined the two breakpoints in my tailwind.config.js file:

...
  theme: {
    screens: {
      sm: '375px',
      lg: '1440px',
    },
...

Then, I wrote my initial elements for the mobile view, and then went back and added additional classes using lg:* to target the desktop view. I struggled a little with positioning & sizing the overall container for the grid to get the spacing correct

Code

Please log in to post a comment

Log in

Community feedback

  • Precious Nkwor•440
    @Jeen-Presh

    Hello Krysia, congratulations on completing the fem challenge

    Some suggestions to help improve your code

    • Always check front-end mentor report sections for errors on your project. right now you have quite a few.

    • The user names should be wrapped in a header tag.

    • Your codes are not properly indented.

    • your code below is meant to be wrapped with a p tag, as you can't nest heading elements. heading elements are semantic elements

     <heading>
                    I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.
                </heading>

    More info on semantic HTML MDN Semantic

    • Use a blockquote element for the code below.
    <q class="text-white-500/70">
                    I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard about some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup.
                </q>

    more info on blockquotes MDN blockquotes

    Happy coding. if you found this helpful, make sure to mark it as helpful thanks.

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