Skip to content
Submitted 8 months ago

Responsive Four Card Feature Using CSS grid and flexbox

cloudpc7•180
@cloudpc7
Preview site (opens in new tab)View code (opens in new tab)
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 learning about resposive design. I was able to perform this challenge and complete it using what I learned about working with mobile design and media queries.

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

The challenges I face was getting the cards to line up correctly. I was able to overcome them by setting the template rows and columns using fractional units.

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

I would like to know what I can improve in this design and if I need to make any changes in my media queries. I went back and forth between media queries to get it right but I would love the criticism and welcome any feedback on responsive design. Thank you

Community feedback

  • Noel Hoppe•350
    @noelhoppePosted 8 months ago

    Hi,

    1. Each site should has only one <h1>tag. Suggestion to improve:
    <h1>
Reliable, efficient delivery
<span>Powered by Technology</span>
</h1>
    1. You dont need .header. Use instead headerin your CSS. Also use maininsetad of .card in your CSS
    2. grid-template-areas and grid-area can easily replace grid-row and grid-col. As conslusion your code is readable
    3. Why you have a empty *.js file in your project? :)
    1
    cloudpc7•180
    @cloudpc7Posted 8 months ago

    @noelhoppe I use replit.com to create these so it automatically creates the js file. I can get rid of it or it can be used for future purposes. Thank you for the feedback. I will make the necessary changes

    0
  • Grace•31,270
    @grace-snowPosted 8 months ago

    I hope this is helpful feedback:

    1. Use one h1 for the heading not two.
    2. There is no need to wrap that heading in a div.
    3. Remove the article and use a paragraph.
    4. All img elements must have an alt attribute (even if it is left blank on these decorative icons).
    5. You don't need extra divs inside the cards either. Keep the html as simple as possible.
    6. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
    7. The body shouldn't ever have margin.
    8. If you want to center the content on the page use flex or grid properties don't use large margins like margin top to make it look right on your screen/device. That won't work for everyone.
    0

Please log in to post a comment

Log in with GitHub

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