Frontend Mentor | 3 column preview with Flexbox coding challenge solution

Solution retrospective

My biggest takeaway (and proudest achievement) on this one was being able to write reusable classes that allowed me to style each card on a global scale and just add individual tweaks to each one. As such, I needed some clear, but descriptive, class names. What are you preferences or conventions for creating class names for reusable classes?
Something that I have been noticing with the challenges of Frontend Mentor is that my solution doesn't always have the same width or height as the design files. Do you hard code the width and height of the containers to match the design (for example setting width: 900px) or just allow the container to naturally grow/shrink and adjust the content size instead?

Community feedback

PhoenixDev22• 16,950

@PhoenixDev22

Posted over 2 years ago

Hello @humbruno ,

I have some suggestions regarding your solution:

First of all, You are misusing the <section> tag .This doesn't need any sections, section is not meant to be used as a containers. section is for a bigger chunk of content often titled by <h2>.
Use <p> to wrap the class="car__description".
For any decorative images, each img tag should have emptyalt=""and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right.
you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). And use <h2> for the heading.

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            
}

It would be like this:

 <div class="card card--suvs">
              <img src="images/icon-suvs.svg" alt=""  aria-hidden="true"/>
              <h2 class="">SUVs </h2>
            <p class="car__description">
              Take an SUV for its spacious interior, power, and versatility.
              Perfect for your next family vacation and off-road adventures.
             </p>
             < a href="#" class=""> Learn More</a>       
    </div>

Never use px for font-size.
You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

Overall , your solution is good . Hopefully this feedback helps

Marked as helpful

Hum Bruno• 230

@humbruno

Posted over 2 years ago

@PhoenixDev22 Thank you! That's great input and I'll definitely keep in mind for the next one :)