Submitted 8 months ago

Four card feature section using Tailwind CSS and Flexbox

Steve Xero•210

@stevexero

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am most proud of digging into the process from beginning to end. I'm also proud of my implementation of Flexbox in Tailwind, though I am going to dig deeper into all that Flexbox has to offer, as I kind of limit myself to

.selector {
   display: flex;
   flex-direction: column; /* or row */
   align-items: center;
   justify-content: center;
}

I'd like to better manage my workflow and assigning time for myself to tackle each task in the process. As of right now, I get off of work, eat and feed the kids, and go at it until it's time to sleep. I've kind of neglected a lot of things.

What challenges did you encounter, and how did you overcome them?

I would say that my biggest challenges I faced were in implementing the layout within Tailwind. I am currently struggling with reorganizing the containers if the user increases ONLY the font size.

What specific areas of your project would you like help with?

My next aim for a11y is to focus on screen readers. If anyone knows of the best screen readers to use during development, I'm open to suggestion!

Community feedback

Abdul Khaliq 🚀•72,580
@0xabdulkhaliqPosted 8 months ago
Hello Steve 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

DECORATIVE SVG'S ♨️:

The alt attribute is used to provide alternative text for images in HTML documents. The alt attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.

Now, when it comes to decorative SVGs used in this challenge, they are used purely for aesthetic purposes and do not convey any important information or functionality to the user.

Since these images do not convey any important information or functionality, there is no need for an alt attribute.

So feel free to set the alt attribute as "" for decorative svg's, because alt="" will be skipped by screen readers they will consider the image as decoration

Example:

<img src="images/decorative.svg" alt="">

<img class="w-14 md:w-16" src="/images/icon-supervisor.svg" alt="Magnifying glass illustation"> 👇 <img class="w-14 md:w-16" src="/images/icon-supervisor.svg" alt="">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
0
Steve Xero•210
@stevexeroPosted 8 months ago
@0xabdulkhalid Thank you Abdul!! That's very informative AND great news!
0

Please log in to post a comment

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