Skip to content
Submitted almost 2 years ago

Responsive card component with flexbox

Alexis Checura•40
@alexisrulo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, although I made other web pages I believe than I have bad practice, so I trying to improve that, this challenge was very interesting to do it, if you see some mistakes or bad practice, please, let me know, I appreciate any feedback, thanks.

Community feedback

  • Devesh shukla•280
    @deveshshuklaPosted almost 2 years ago

    HI ALEXIS, You did gr8 job by starting out... Here are some tips to improve your following project's outcome.

    Error: It's highly recommendable to give simple & human readable alt: text in img-tag So that its accessibility will improve. They were used in the text-to-speech mode.

    Warning: You can get over this by just using proper HTML Structuring like =>

    <html>
 <head>
<body> <main>"Put all your contents in this main tag only" </main></body>
</html>

    I hope it's useful... 👍

    Marked as helpful
    1
    Alexis Checura•40
    @alexisruloPosted almost 2 years ago

    hi @deveshshukla, I tried to improve the alt text, but I think that I should learn how to write the alternative text correctly 😁, thanks..!!

    1
  • S MD suleman•3,530
    @sulemaan7070Posted almost 2 years ago

    hey Alexis Checura😄, congratulations on completing the first challenge🎉🎉 regarding the best practices the ones which I have noticed are.

    1. you have to use min-height : 100vh instead height:100vh.
    2. instead using plain img tags for images you can use the picture element where you can write the media queries in the html element itself.
    <picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

    more about picture element📚 here. happy coding🔥🔥

    Marked as helpful
    1
    Alexis Checura•40
    @alexisruloPosted almost 2 years ago

    Hi @sulemaan7070, I already add the picture element and change the height for min-height, I didn't know about the picture element, was a little difficult to change 😆, but its done, thanks..!!

    1
  • WiredSenpai•40
    @WiredSenpaiPosted almost 2 years ago

    Awesome job on your project, your work really looks good. you could have used a bit of spacing to separate your info, and a margin-top to create a bit of space on the top.

    1
    Alexis Checura•40
    @alexisruloPosted almost 2 years ago

    hi @WiredSenpai, I centered it with flex, but I left the footer, so it wasn't vertically aligned, I put the footer with the position absolute and now it's have the correct alignment, thanks..!!

    1

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