HTML Table

Hi! Lee Fentress. Welcome to the Frontend Mentor community!

I see that's the first challenge that you applied so I'll give you some tips.

1. Live Sites: for the live sites you can use Github Pages, Vercel or Netlify, this way you can show your solution to everyone. I prefer Vercel because I found it easier to use than the other options.

2. You can build this component using Flexbox or Grid.

With flexbox you'll need to wrap the photo in one div and in the other the content setting the flex-directio: row;

With Grid you'll need to set the container wrapping the 2 divs and set grid-template-columns: 1fr 1fr; that means that the card will have two columns with the same width.

1. When you'll need to make your mobile version for the same website, inside the media-query you'll need to change the direction of the container, if you've chosen flexbox use flex-direction: column; if you've used grid change the grid-template-columns: 1fr; this means that the component will have only one column.

2. Media queries is basically you indicating in the CSS when your page should have a different behavior, in media queries you put inside the tags what you want to change when your page become bigger or smaller, example below:

@media (max-width: 500px) { .container: background: blue)}

Learn more about media-queries here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

You can check my solution where I've used the GRID approach: https://product-preview-card-component-two.vercel.app/

If you have any question write me I'll be happy to help you!

Hi Len! I think you provided a wrong URL as your live URL