Skip to content
Submitted 4 months ago

3-Column-Preview-Card with HTML and CSS

#pure-css
Rahana Suleiman•190
@Rahana23
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Am most proud of completing this project.

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

Am getting more better at doing this now and didn’t encounter any problem with this project.

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

All suggestions on how to improve are welcomed.

Community feedback

  • P
    Huy Phan•3,430
    @huyphan2210Posted 4 months ago

    Hi, @Rahana23

    I checked out your solution and I have some thoughts:

    Use Semantic HTML

    Consider replacing generic div elements with more semantic tags to enhance accessibility and maintainability. For example:

    • .container → main
    • .attribution → footer
    • .cards → articles

    Clean Up Unused Code

    There's a large portion of commented-out HTML in your code. If it's not being used, it’s best to remove it to keep your codebase clean and readable.

    Font Import Placement

    I noticed you imported your font within a style tag in your HTML. Moving it to your CSS file would help keep your code more organized.

    CSS Class Naming

    The class names in your CSS could be more meaningful and descriptive. Researching CSS naming conventions, like BEM, could help you create a more structured and maintainable stylesheet.

    Hope this helps!

    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