Skip to content
Submitted over 3 years ago

HTML CSS Practice - using basic CSS, CSS Flexbox, CSS Button Creator

kevinozyx•10
@kevinozyx
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

I am still new to HTML & CSS and I have only learned CSS Flexbox for this project for the first time. I have some questions that will be appreciated if someone can explain this or point me to the right direction:

  • How to master the use of flex container's width and its flex items width properties (static vs dynamic use)
  • Creating variables to change one variable instead of multiple variables manually
  • Alternative for IDs in HTML so that the code can be streamlined or compacted to avoid unnecessary codes and save time
  • Any tips to 'automate' the HTML/CSS process as it feels like the process is pretty tedious.

Community feedback

  • Joanne Wang•205
    @joanneccwangPosted over 3 years ago

    For flex-items, by given flex: 1 for each boxes, will give you the same effect to equally divide container's width into 3 columns. If you want to keep the 12rem to specify the min width of each column. flex: 1 0 12rem is what you're looking for. It stands for flex-grow: 1; flex-shrink: 0; flex-basis: 12rem. And for the same properties shared between each boxes, I'd suggest to define them in another class.

    0
    kevinozyx•10
    @kevinozyxPosted over 3 years ago

    @joanneccwang thank you so much for that, really appreciate it :)

    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