Skip to content
Submitted about 2 years ago

3-column-preview card using CSS grid

Elena•30
@ElenaUJ
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

Tadaaa! This is my first frontendmentor challenge (and my second HTML/CSS project ever). I am still very new to this but had lots of fun building this component. But I'm sure it can be improved a lot! Any input appreciated. But I also have a few specific questions.

  1. I feel like I created the layout very very clumsily. Adjusting positions using different margin/padding values felt arbitrary and complicated to me. I am sure there are more simple ways to position elements, and in a more uniform way, too.

  2. I am also very unsure about the responsiveness of the layout with different screen sizes. I used a cutoff of 900px. If the device width is smaller, the layout will change to a column. The card does not change its size otherwise, and a part would be off screen. Is this how it's done? Would it be better to decrease the container's size along with the width of the screen?

  3. I used a combination of BEM and ITCSS methodologies to structure my CSS file. I know this is absolutely unnecessary for this tiny of a project, but I am trying to find a good way to structure my CSS files and practice it. Did I do it correctly? Does anyone have better suggestions as to how to structure CSS files well?

Any input appreciated.

Thanks a lot!

Elena

Community feedback

  • Adriano•38,390
    @AdrianoEscarabotePosted about 2 years ago

    Hi Elena, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

    if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    0
  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey there!👋 Congrats on completing your first challenge! 🎉

    Here are some suggestions to help improve your code:

    • To identify the main content of you site you will want to encase your entire component inside a Main Element.

    • The headings in your component are being used incorrectly. Since the <h1> Heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an <h2> Heading, since it is reusable and it will give each heading the same level of importance.

    • Implement a Mobile First approach 📱 > 🖥

    With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

    If you have any questions or need further clarification, let me know.

    Happy Coding! 👻🎃

    Marked as helpful
    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