Submitted about 1 year ago

Responsive 3-column preview card component

Wael Orraby•370

@Wael-Orraby

Preview site View code

This is a solution for...3-column preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

If you have any suggestions for code improvements, feel free to share! Your feedback is greatly appreciated!

Thanks! 😊

Community feedback

Shahin Aliyarli•680

@sliyarliPosted about 1 year ago

Your HTML and CSS code for the 3-column preview card component looks quite good, but there are some improvements you can make to enhance it further. Let's go through them:

HTML Structure:

Consider adding a <!DOCTYPE html> declaration at the very beginning of your HTML document. It's good practice and ensures your document is parsed correctly.

CSS Improvements:

Use meaningful class names: Your class names like .blok could be more descriptive. Consider using names that reflect the content better, like .card or .card-container.
Consolidate common styles: You have repeated styles for the anchor (a) tag in each block. You can create a common class for these styles and apply it to all three anchor tags to make your CSS more efficient.
Avoid using min-height for responsive design: Instead of setting min-height on your .blok elements, you can control their height and spacing better by using padding and margins.
Keep media queries organized: Your media query for larger screens is somewhat scattered throughout your CSS. It's good practice to group your media queries together at the end of your stylesheet for better readability.
Consider adding a hover effect for your icons: Adding a subtle hover effect on the icons (like changing opacity or adding a slight scale effect) can make your cards more interactive and engaging.

Accessibility:

Add alt attributes to images: It's essential to provide descriptive alt attributes for your images to improve accessibility. This helps users with disabilities understand the content of the images.

Responsive Design:

Your design looks good on larger screens, but you might want to test it on smaller screens to ensure it remains responsive and user-friendly. You can use media queries to adjust styles for different screen sizes as you've already done for larger screens.

Here's an example of how you could improve your code:

<!-- Consider adding a DOCTYPE declaration -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta tags and links -->
</head>
<body>
    <div class="card-container">
        <div class="card">
            <img src="./images/icon-sedans.svg" alt="icon-sedans" />
            <h2>Sedans</h2>
            <p>
                Choose a sedan for its affordability and excellent fuel economy. Ideal
                for cruising in the city or on your next road trip.
            </p>
            <a class="learn-more" href="#">Learn More</a>
        </div>
        <!-- Repeat similar structure for SUVs and Luxury -->
    </div>
    <!-- attribution and closing body/html tags -->
</body>
</html>

/* CSS Reset and :root definitions */

body {
    /* Padding and background styles */
}

.card-container {
    /* Flex and spacing for smaller screens */
}

.card {
    /* Card styles */
}

.card h2 {
    /* Heading styles */
}

.card p {
    /* Paragraph styles */
}

.learn-more {
    /* Common styles for Learn More buttons */
}

/* Media query for larger screens */
@media (min-width: 1440px) {
    /* Styles for larger screens */
}

These are just suggestions to improve your code further. Overall, your project looks great, and these improvements will make it even better. Good job!

Marked as helpful

Wael Orraby•370

@Wael-OrrabyPosted about 1 year ago

@sliyarli

Thank you for your valuable feedback! It's greatly appreciated. I will use these suggestions to improve my code and further develop my skills.

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