Skip to content
Submitted about 1 month ago

Four Card Feature section is build HTML & CSS Flex and Grid Column

Mohit kulkarni•170
@burningbeattle
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 Tried to Achives the closest to the solution as given in starter preview of the design of this project and took me almost 2 hr to complete and finding resourses online and complete and hence we can also use hover over thing in it and can create a card clivkable with javascript functions introduced in it

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

grid layout and column flex grid option which one will give the better as per given design preview outcome and hence achived it with column flex grid one give the better outcome and get stacked over in mobile design easily.

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

Ensuring that the layout adapts seamlessly to various screen sizes, particularly mobile and tablet views. Using CSS Grid or Flexbox for card positioning. You might want advice on which approach works best for responsive design in this scenario. Making sure the project adheres to accessibility standards (e.g., proper semantic HTML, keyboard navigation, ARIA labels). Ensuring good color contrast and readable fonts. Getting feedback on the chosen font sizes, spacing, and padding for consistency and readability. Improving code organization, such as separating concerns by using BEM methodology, modular CSS, or other best practices.

Community feedback

  • kassahunAmdie•100
    @kassahunAmdiePosted about 1 month ago

    Beautiful work Mohit, I liked your approach. The only two things I would change are

    1. On your mobile view the h1 is mashed together. The light font weight with the bold. I think one way to solve that is to use a <span> tag on one of them and turn it into a block.
    2. The font size of the h1 content stays the same on the range of screen sizes. To solve that you can use clamp() function in your CSS to change the font size on different screen sizes. Good job.
    1

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