Skip to content
Submitted 3 months ago

HTML, CSS, Flexbox, CSS-GRID

Lisbeth Emperatriz Polidor Solano•10
@polidorl
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

What are you most proud of, and what would you do differently next time?

Using flexbox and css-grid, projects can be responsive without using media queries. What I would do differently: work better on the css design and learn how to structure my html files.

What challenges did you encounter, and how did you overcome them?

Could see that grids can be added within other grids, You can also use css-grid and flexbox in the same project. Always consulting Google Geminis (consulting artificial intelligence, AI).

What specific areas of your project would you like help with?

Understand the difference between using the background-image property in the css file and the img tag in the html file. In general, learn how to structure the html file, using BEM technology.

Community feedback

  • Joshtemi0•180
    @Joshtemi0Posted 3 months ago

    Hi Lisbeth Emperatriz Polidor Solano

    background image is used in css while img is for html

    hero {
  height: 50vh;
  background: url('./background.jpg') center/cover no-repeat;
  color: #fff;
  position: relative;
}

    Try reading this

    while for img 
<img src=" image" alt=""img >

    Hope this helps

    }

    Marked as helpful
    0
  • Aparnagopal•80
    @AparnagopalPosted 3 months ago

    Congratulations for completing the project.

    I am not sure if there are any background images in this challenge. There are other challenges that require background images like the one I just completed - Clipboard landing page. If you refer to the solutions submitted for that, you will get more insights.

    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