Skip to content
Submitted over 3 years ago

3 Responsive Columns Using Flex and Mobile-first workflow

Nikolas Matias•65
@NikolasMatias
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 decided to take advantage of first-child and last-child pseudo-classes to make some changes in the border-radius of my vehicles. I though this way cause I needed to change the border-radius only in the first and last element of the divs using ".vehicle" class. Since the border-radius just change in this both elements.

I thought about using another class for it, but I think this way using pseudo-classes was better. What do u think about it? Should I do it in another way?

Another thing I would love to understand better is the use of more advanced html tags. If u see my code u will see I used sections tag but I don't really know why I should do it and I don't know when I should do it. So, if u have any advice about it, It would be amazing!

I think that's it.

Community feedback

  • Halí V.•230
    @halivertPosted over 3 years ago

    I like how you use first-child and last-child pseudo-classes, that's a nice approach.

    If you want to use semantic HTML5, I recommend read this article https://developer.mozilla.org/en-US/docs/Web/HTML/Element

    Also I recommend to use Vue.js components, instead repeating tree times the same (or almost the same) code.

    Good job 👍🏽

    1
  • Nikolas Matias•65
    @NikolasMatiasPosted about 3 years ago

    Thanks! I will read it soon, and yeah I think I forgot about the Vue.js components. Next time I will use it more. Thanks again!

    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