Frontend Mentor | Responsive mobile-first grid using TailwindCSS coding challenge solution

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

Community feedback

Precious Nkwor• 440

@Jeen-Presh

Posted over 1 year ago

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.

Responsive mobile-first grid using TailwindCSS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community