Solution HTML CSS Responsive carte

Community feedback

• 

  Farid_Danilo•140

  @FaridDanilo

  Posted about 1 month ago

  Hello KKen007,

  I indicate the parts that should be improved or changed in your HTML:

  1. Duplicate upload of Google Fonts:

  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?...&family=Young+Serif&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?...&family=Young+Serif&display=swap" rel="stylesheet">

  This is not necessary and This may affect performance, so please only maintain one version.

  Styles.css:

  Improvements and fixes:

  1. You are repeating the "body" property twice:

  body { /* 4. Add accessible line-height / line-height: 1.5; / 5. Improve text rendering */ -webkit-font-smoothing: antialiased; }

  body { background-color: var(--Cream); padding: 2rem 1rem; color: var(--Grey); font-family: var(--ff-base); font-weight: var(--fw-base); height: 100vh; }

  Although CSS allows multiple definitions of the same selector, it's best to unify everything into a single body declaration to avoid:

  • Unnecessary duplication.

  • Cognitive overhead.

  • Maintenance difficulty.

  Unified Version:

  body { /* Typography */ font-family: var(--ff-base); font-weight: var(--fw-base); color: var(--Grey); line-height: 1.5;

  /* Rendering */ -webkit-font-smoothing: antialiased;

  /* Background and dimensions */ background-color: var(--Cream); height: 100vh;

  /* Spacing */ padding: 2rem 1rem; }

  00