Responsive landing page using HTML and Css

Community feedback

• 

  Ortaly•1,190

  @ortalyarts

  Posted about 1 year ago

  Hey @Selik254!

  Congratulations on completing the challenge!

  I have a few suggestions:

  1. I use this Box sizing rule which allow easy working with width when having paddings. Just paste it at the top of your CSS:

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  

  2.div.container - set it to:

  • margin:auto instead of fixed value of 50px. This will place your div in the middle of the screen.
  • max-width: 250px; - this will allow the container to shrink on very narrow screens. As this is the container of the image, the image will match it's width accordingly to it (if you follow the steps below).

  3. The img element:

  • In html alway include alt attribute (for accessibility).
  • Also always include width and height in the html (this is good for the loading of the page). If you want your image to be responsive, you put the maximal value in the html (take this value from the design file) and then handle the "responsiveness" in the CSS (as described below).
  • In CSS set the img to max-width:100%; height: auto; This will make the image match it's container and preserve it's ratio.
  • float: center; is an invalid property, you don't need it.

  3. Fonts -Try using the provided fonts ("Outfit" in this project).

  • It is best practice to use local fonts, meaning you upload the fonts together with the other app files to the server and use @font-face in CSS.
  • You can lear more about it here.

  4. Set the body element to have the background as in the design file: body {background:#d6e1ef; }.

  I hope you find this helpful! Cheers :)

  00