Responsive mobile-first grid using TailwindCSS
Design comparison
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
- @Jeen-PreshPosted almost 2 years 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 nestheading
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.
0 -
Please log in to post a comment
Log in with GitHubJoin 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