Skip to content
OverviewSolutions
10
Comments
6
Oscar Miras
@omiras

All comments

  • Oscar Miras•160
    @omirasPosted almost 2 years ago

    Here's a direct link to the README explaining a little bit the creation process and the pros and cons of Tailwind for this project: Link to README repo

    0
  • Sora_9801•90
    @Sowaiba-01Submitted almost 2 years ago

    Hi! This is my second solution on FrontEnd Mentor. I have designed a Card Component challenge using Flex, Grid and CSS animations. Any suggestions are highly appreciated.

    Card Component

    2
    Oscar Miras•160
    @omirasPosted almost 2 years ago

    Hi Sora,

    Good implementation overall! Sections are well distributed and there is a clever use of flex and grid.

    Some suggestions:

    • Consider using the "gap" property to move each item away from the other in the stats section for mobile view: https://oscarm.tinytake.com/msc/NzcxNDk3NF8yMDczMTkyNw
    • You could also use a CSS naming convention of your choice to make your CSS names more consistent: https://dev.to/ziizium/css-naming-conventions-5gd6

    Great work!

    Marked as helpful
    0
  • Oscar Miras•160
    @omirasPosted almost 2 years ago

    I recommend you learn about media queries and responsive design.

    Also, follow along with a nice mobile-first tutorial such as this: https://www.youtube.com/watch?v=B2WL6KkqhLQ

    Marked as helpful
    0
  • Des2Dev•70
    @Des2DevSubmitted over 2 years ago

    Hello! guys 👋

    I have completed the product preview card component challenge successfully. And I found difficulty in using BEM, please feel free to give feedback if you know how to improve BEM. I appreciate any feedback, thank you in advance 🙏

    Responsive mobile-first card component using flexbox

    2
    Oscar Miras•160
    @omirasPosted almost 2 years ago

    I loved your solution: how the CSS code is structured and the use of CSS variables.

    I learned how to use the <picture> HTML tag effectively, thanks!

    0
  • Oscar Miras•160
    @omirasPosted almost 2 years ago

    Good work! It seems that you are missing the mobile design, tough.

    You also should implement active states when clicking the button (notice that the button becomes a darker green when clicked. Check design/active_states.jpg in the project folder).

    https://www.w3schools.com/cssref/tryit.php?filename=trycss_sel_active

    Marked as helpful
    0
  • Prathmesh Godse•80
    @prathmeshgodseSubmitted about 3 years ago

    Since this is my first challenge on Frontend Mentor, any Feedback is appreciated. Had some trouble with the colors, figuring out what the colors are when the payment button is hovered. Also the positioning of the 'Annual Plan' and Plan Price was something I'm unsure about. I have tried my best to match it with the template, do let me know if there's an easier/efficient way to do the same.

    Plane HTML CSS Solution

    1
    Oscar Miras•160
    @omirasPosted about 3 years ago

    Hi!

    Very good work! Here's my simple suggestion: you may use max-width to determine the max width of the container; so the plan details do not look too wide when the viewport increases:

    https://oscarm.tinytake.com/msc/NTcwOTY5NV8xNzY0NTA3Ng

    Regards,

    Marked as helpful
    0