Skip to content
OverviewSolutions
14
Comments
6
Craig Johnson
@craigdev937

All comments

  • Craig Johnson•260
    @craigdev937

    Great job on finishing the challenge. One thing that you might consider is to change the color for the hover.

    &:hover {

     background-color: var(--green);

    }

    That way it stands out. Keep up the great work!

    Marked as helpful
  • Craig Johnson•260
    @craigdev937

    Hey, nice job. You might consider using object-fit for the image. Great job finishing your project!

    Marked as helpful
  • Aditya Rao•190
    @thisisadityarao
    What are you most proud of, and what would you do differently next time?

    This challenge was easy, so I'm not sure if I'd do something differently.

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

    Nothing in particular was challenging in this project.

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

    Fortunately, I don't think I'll need any help. Though I'm open to any suggestions.

    Social links profile using HTML & CSS

    #bem
    1
    Craig Johnson•260
    @craigdev937

    Great job on your solution. One thing that you might want to try is to link to the images in your Assets folder. For example:

    /assets/images/avatar-jessica.jpeg

    That will show the image on your webpage. Keep up the great work!

    Marked as helpful
  • Angélica Viana•50
    @angelica-viana
    What are you most proud of, and what would you do differently next time?

    Ter conseguido desenvolver o projeto com mais agilidade e conseguir ver minha evolução.

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

    Desafios com a estilização, consegui superar fazendo algumas pesquisas.

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

    No momento nenhuma área.

    Cartão de visualização do blog

    2
    Craig Johnson•260
    @craigdev937

    Congratulations on finishing the project!

    You might consider using replacing the <div> tags with semantic HTML tags: <section>, <aside>, etc.

    Another option would be to use a CSS naming convention such as BEM (Block Element Modifier). Here is a link with more info: https://www.frontendmentor.io/articles/understanding-css-naming-conventions-bem-oocss-smacss-and-suit-css-V6ZZUYs1xz

  • The Braudalf•50
    @thebraudalf
    What are you most proud of, and what would you do differently next time?

    You can make this card through rather than css flexbox via margin and padding.

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

    Firstly, I most difficult challenge I overcome, which was to make a responsive layout.

    Responsive layout through media query and use of css flexbox

    1
    Craig Johnson•260
    @craigdev937

    Hi I waned to check your website but there. You might want to try deploying your website on a free service like Netlify. Here is a link to a video demonstration. I hope that this helps?

    https://youtu.be/y71SR-KcZCg?si=MQxivkj8ZFQ5ne8C

  • Craig Johnson•260
    @craigdev937

    Nice job on this challenge!

    One suggestion is to change the width to 100%

    .img-container img {
    display: block;
    width: 100%;
    height: 321.875px;
    border-radius: 7px;
    opacity: 1;
}

    The image will take up the full width of the container. I hope that helps?
    Keep up with the coding! 🙂

    Marked as helpful