Skip to content
Submitted about 1 year ago

3-column-preview-card-component-main

waltertaya•110
@waltertaya
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

Community feedback

  • Ahlam•300
    @AhlamAb22Posted about 1 year ago

    Great work! you can also remove the buttons' borders to match the design

    Marked as helpful
    0
    waltertaya•110
    @waltertayaPosted about 1 year ago

    Thanks

    0
  • Mayank Arora•430
    @mayankdrvrPosted about 1 year ago

    Congratulations waltertaya for completing this challenge. Your design matches the solution very well.

    Here are a few observations-

    1. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
    2. The h1 heading can only be utilized once on a single page, yet in your code, it is employed multiple times.
    3. Below 909px width of screen, your design is not responsive. In contemporary web development, the standard approach involves beginning with mobile-first content construction. This entails styling for small screens initially and subsequently employing media queries to adapt the design for larger screens, thus emphasizing performance and responsiveness. Try to create a design using css flexbox column-wise for small screen and then add media queries to design using css flexbox row-wise for larger screens.
    4. Add some padding between the contents inside the containers and the border of the containers.
    5. Hovering over "Learn more" buttons is supposed to change the button color with a small delay in transition.
    6. Setting min-height: 100vh; on the body element in your CSS is a common technique used to ensure that the body of your web page takes up at least the full height of the viewport (the visible area of the browser window). This is often used to create layouts where the content expands to fill the entire screen, which can be particularly useful for single-page applications or websites with a full-screen design.
    7. Using css reset is also a good practice. A CSS reset is a set of CSS rules or styles that are applied to your web page at the beginning to reset or neutralize the default browser styles. This is done to ensure a more consistent starting point for your own CSS styles, as different browsers have different default styles for elements like headings, paragraphs, lists, etc. By resetting these defaults, you have more control over how your website appears across various browsers.
    8. Google Fonts provides the option to load fonts via <link> tags or an @import statement. The <link> code snippet includes a preconnect resource hint and therefore will likely result in faster stylesheet delivery than using @import version. Importing google fonts in the html head section is a good practice instead of importing them in the css file-
    <head>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&family=Outfit:wght@400;700&display=swap" rel="stylesheet">
</head>

    Awesome solution and keep it up.

    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