Webpage about a perfume made by HTML and CSS

Community feedback

• 

  Jenna•230

  @NandiniCooppenPosted 4 months ago

  Hi there,

  Congratulations on completing this challenge. 👏

  Regarding the Google fonts, to use them, first of all, you need to look up and select both from the Google Fonts site

  There is an icon at the top right, indicating, how many fonts you have got, select all fonts you need before clicking the embed code button.

  You will have something similar to

  "@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');"
  

  Copy it into your CSS file, at the start.

  You will be able to use the fonts where needed.

  Example:

  body {
    font-family: "Montserrat", sans-serif;
  }
  
  h2 {
    font-family: "Fraunces", serif;
  }
  
  

  If I may suggest some improvements :

  1. Semantic structure

  Use the semantic HTML5 in your structure. To improve the document structure and in return improve its accessibility, consider using <header>, <main>, <article>, and <footer> elements where applicable.

  Read more about semantics here

  Read more about accessibility here

  Read more about headings here

  2. Centring elements using CSS grid or Flexbox

  To centre the design both horizontally and vertically, you can use CSS flexbox as follows on the body.

  body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  }
  

  or grid

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

  3. Always do a reset for your CSS

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  4. Using CSS variables

  Try using CSS variables on your next challenge.

  Read more about CSS custom properties here

  For reference, you may check my submission here

  Do not hesitate, if you have any questions.

  I hope these will be helpful to you 😉

  Good luck onwards and happy coding 🙂

  0