All solutions

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

@media (max-width: 500px) {
  .container {
    display: flex;
    flex-direction: column;
    height: 50rem;
    margin: 2rem;
    
  }

  .img-container {
    height: 50%;
  }

  .img-container img {
    height: 100%;
    object-fit: cover;
    border-radius: .5rem .5rem 0 0;
  }
}

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

I had challenges deploying my application. First time deploying a react app.

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

Learning how to deploy different applications to free sources would be nice,

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

This was another hard one to do with out any fimga designs. This time I challenged my self to use BootStrap.JS for css styling.

Next time I want to try using CSS grid and get more comfortable using that.

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

I encountered an issue with my mobile design. The image did not automatically adjust.

@media (max-width: 425px) {
  .container {
    max-width: 425px;
    height: 100rem;
  }

  .container .container-img {
    height: 250px;
    width: 100%;
    border-radius: 10px;
    margin-top: 2rem;
  }
}

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

Yes, I am not sure how to properly align the order list items with the heading div. I am thinking removing either margin or padding but was not able to figure that out,.

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

This was a bit difficult with out Figma. Trying to guess the distance between each object is hard

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

Styling the buttons in the card. The font size is a bit off. I was able to get the width and the padding down.

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

references to frontend stylings.

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

I utilized advice from my first challenge to efficiently size center my blog.

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Figtree;
    background: var(--bg-color);
}

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

My biggest challenge getting the avatar and Greg text on the same line.

I used flex and padding to align the items.

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

I would more help learning figma. Maybe a youtube link,

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

I took my time to create the elements and organize them in a div. Next time i would use a grid layout for centering.

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

I had challenges centering my content in my card container. I overcame this challenge using by using display flex and setting the flex direction to center.

.card-container{
    background: #FFFFFF;
    width: 320px;
    height: 497px;
    margin: 20rem auto;
    border: none;
    border-radius: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

My understanding of flex will help with deciding how to align my content.

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

I took my time to create the elements and organize them in a div. Next time i would use a grid layout for centering.

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

i had challenges centering my content in my card container. I overcame this challenge using by using display flex and setting the flex direction to center.

.card-container{
    background: #FFFFFF;
    width: 320px;
    height: 497px;
    margin: 20rem auto;
    border: none;
    border-radius: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

None so far.