My first frontend challenge.

Community feedback

• 

  luking•230

  @alululululuerPosted over 1 year ago

  Hello! Congratulations on starting your first frontend journey. Give you some advice from my perspective.

  • HTML

    • put your .Outside-box into <main>
    • put your .attribution into <footer>
    • use <h1> instead of <p> for the text "Improve your..." as the accessibility report said that "Page should contain a level-one heading"

  • CSS

    • remove width and height and margin of .Outside-box
    • add max-width to .Outside-box
    • to center the .Outside-box in the body you can use flex or grid layout to instead.
      • for the beginner, I suggest you can use flex layout first.
        • remember to add a height to the body at first.

    html,body {
      height: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    

    • remove width and margin to the <img>, to make <img> fit the .My-img you can do the bottom. Look at the img reset

    img {
      display: block;
      max-width: 100%;
    }
    

    • always follow the style-guide as you can, your second-para's color is poor visibility.👀

  Hope it's helpful to you and happy coding.

  0
• 

  Neemias araujo•160

  @NeemiasEeepPosted over 1 year ago

  hey, this is almost perfect, you can only change the img atributes, like this in this away your image element will be insede your card

  0