html css responsive

Community feedback

• 

  Andreas Remdt•950

  @andreasremdt

  Posted over 2 years ago

  Hey @mclanecorp,

  Congrats on solving the challenge! I like the fact that you used semantic HTML, considered accessibility, and don't have any HTML issues in your solution. Also, it's not far from the design. A couple of things you could improve:

  • Use focus styles for keyboard users. Right now, your interactive elements only have hover styles, which can hurt accessibility.
  • You've imported many different web fonts in styles.css, but only use 2 of them. @import statements are expensive performance-wise, so it's advisable to use them as sparingly as possible and without loading resources you don't need.
  • You could improve your layout by centering everything on the page. One easy way is to wrap the entire application code in a div.container, set a max-width and align everything inside the body using the below code:

  body {
    display grid;
    place-items: center;
    min-height: 100vh;
  

  • Try using other CSS units, such as em or rem, especially for sizing and spacing. These units are more flexible when it comes to zoomed in viewports and scaling your UI based on font size. This video gives a good explanation of choosing the right units.
  • You don't need to wrap your button in a div, this element can be removed.
  • On smaller screen sizes, the footer icons are stuck to the bottom. Giving them some more spacing would improve the design.

  Hope this helps, let me know if you have any questions :)

  10

  Marked as helpful