Skip to content
OverviewSolutions
38
Comments
95
solvman
@solvman

All comments

  • tomblack9452•60
    @tomblack9452
    What are you most proud of, and what would you do differently next time?

    My version is nearly exactly the same as the original design. Next time I would try add some responsiveness to the sizing for different mobile devices, however it appears okay on my device at least already.

    What challenges did you encounter, and how did you overcome them?

    How to create the buttons. I ended up using a section tag to add semantic meaning to the link section. I then used a div styled separately in style.css linked with a class and then wrapped that div in an a tag to make it a link.

    Exact copy of the original brief

    1
    solvman•1,650
    @solvman

    Very well done! 🎊🎉 Your final result looks excellent 🚀

    I have a few suggestions for you:

    • ⭐️ Every HTML document should include the <main> element to wrap the primary content. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content.
    • ⭐️ Titles and headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. A card-like widget's most appropriate heading level is likely <h2>.
    • ⭐️ You do not need to wrap other elements in <div> to style them.
    • ⭐️ You could use an unordered list semantic tag to display the list of links or buttons.

    With that being said, I would redo your code as so:

    <body>
  <main>
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <card class="main-container">
      <img src="images/avatar-jessica.jpeg" alt="Jessica Icon Logo" />
      <h2>Jessica Randall</h2>
      <p class="location">London, United Kingdom</p>
      <p>"Front-end developer and avid reader."</p>
      <ul id="links">
        <li><a href="#GitHub" class="link-button">Github</a></li>
        <li>
          <a href="#FrontendMentor" class="link-button">Frontend Mentor</a>
        </li>
        <li><a href="#LinkedIn" class="link-button">LinkedIn</a></li>
        <li><a href="#Twitter" class="link-button">Twitter</a></li>
        <li><a href="#Instagram" class="link-button">Instagram</a></li>
      </ul>
    </card>
  </main>
</body>

    As mentioned above, the <h2> heading is the most appropriate for the card-like widget. To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class for the <h1> :

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    Learn more about semantic HTML elements here

    Please remember that block-level elements stack one on top of the other. So you do not need to encapsulate them into an extra <div> to apply styles or use <br /> to break the line. The only element that is not block level within the card is <img>, which could be "converted" to block level through a simple reset, which should be used almost on every project anyways:

    img {
    display: block;
    max-width: 100%;   /* ensures images does not overflow the container */
}

    Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶

    Marked as helpful
  • P
    🔅 Yuliya 🐈•330
    @O-Julia-O
    What are you most proud of, and what would you do differently next time?

    Finally, I placed the image with faces on the page similarly, as shown in the design.

    What challenges did you encounter, and how did you overcome them?

    Challenges related to layouts, flexboxes, and grids. Difficulties in understanding the best names for blocks and elements.

    What specific areas of your project would you like help with?

    Hi everyone ✋

    Feedback on my website's layout and suggestions for improvement

    I would appreciate your feedback on both its layout and the usage of HTML tags. I'm particularly interested in whether I've used the correct tags for structuring content and any suggestions for improving the layout.

    What a better way to put the circle with number

    How better to place the image with faces

    I used a div block and css background-image for that, but I'm interested in knowing if there is a better way to place it on a webpage.

    Here is a snippet of the code I'm using:

    HTML:

    CSS:

    .image_faces {
    background-image: url("./assets/tablet/image-hero.png");
    width: 100%;
    height: 200px;
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: top center;
}

    Please help with naming blocks and elements in HTML.

    Thanks a lot in advance:) Any feedback is important :)

    Meet landing page html css

    4
    solvman•1,650
    @solvman

    Great job! 🎊

    I have a small suggestion about placing the hero image for you. It is not responsive as it sits right now. One way to do it is to have three images on the page, show the left and right images on the desktop design, with the center image hidden, and hide the left and right images for the smaller size and only show the center image. HTML layout for that might look something like this:

     <section class="hero">
        <img
          src="./assets/desktop/image-hero-left.png"
          alt
          class="hero__img-desktop"
          aria-hidden="true"
        />
        <img
          src="./assets/tablet/image-hero.png"
          alt
          width="820"
          height="303"
          class="hero__img"
          aria-hidden="true"
        />
        <div class="hero__content">
          <h1 class="hero__title">
            Group Chat<br />
            for Everyone
          </h1>
          <p class="hero__text wrapper wrapper--sm">
            Meet makes it easy to connect with others
            <span class="no-wrap">face-to-face</span> virtually and collaborate
            across any device.
          </p>
          <nav>
            <button class="button">Download <span>v1.3</span></button>
            <button class="button button--sm button--accent">
              What is it?
            </button>
          </nav>
        </div>
        <img
          src="./assets/desktop/image-hero-right.png"
          alt
          class="hero__img-desktop"
          aria-hidden="true"
        />
      </section>

    You may utilize display: none, display: block and media query to hide and show different images for various screen sizes:

    
.hero__img-desktop {
  display: none;
}

.hero__img {
  width: 108%;
  height: auto;
  position: relative;
  left: -4%;
}


@media screen and (min-width: 968px) {
  .hero__img {
    display: none;
  }

  .hero__img-desktop {
    display: block;
    width: 33%;
    height: auto;
    position: relative;
  }

  .hero__img-desktop:first-child {
    left: -3%;
  }

  .hero__img-desktop:last-child {
    right: -3%;
  }
}

    I hope you find it useful! Great job otherwise! 🎉

  • Junior Duque•140
    @juniorjavierduquevalera
    What are you most proud of, and what would you do differently next time?

    Estoy más orgulloso de haber implementado un formulario de contacto completamente funcional con validación en tiempo real, mensajes de éxito y error, y un diseño accesible y atractivo. Este proyecto me permitió profundizar en el manejo de formularios en React, mejorar mis habilidades en Tailwind CSS y asegurarme de que la experiencia del usuario sea fluida y sin inconvenientes.

    Lo que haría diferente la próxima vez sería optimizar la gestión del estado y la validación de los formularios. Me gustaría explorar el uso de librerías como Formik o React Hook Form, que podrían simplificar el manejo de formularios complejos y mejorar aún más la claridad y mantenibilidad del código.

    What challenges did you encounter, and how did you overcome them?

    Lo más complicado fue personalizar el CSS de los campos de entrada del formulario. Para superar esto, utilicé Tailwind CSS, aplicando clases específicas para manejar estados de enfoque y errores. Esto aseguró consistencia y mejoró la usabilidad y estética del formulario.

    What specific areas of your project would you like help with?

    Me gustaría usar server actions como una mejora para mi proyecto. Invito a que me compartan sugerencias sobre cómo implementar esta funcionalidad para manejar la lógica de envío del formulario en el servidor, mejorando la seguridad y eficiencia. Cualquier consejo sobre mejores prácticas y ejemplos específicos sería muy útil.

    Form-UX

    #next#react#tailwind-css
    1
    solvman•1,650
    @solvman

    Good job completing the project!

    I've noticed that your radio buttons need to be styled. Using Tailwind CSS could be tricky for styling form elements. There is an official Tailwind CSS plugin to style forms @tailwindcss/forms. After installing this plugin, you could add styles to form elements to your global.css file and apply it globally, overwriting the base layer as so:

    @tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  [type="checkbox"],
  [type="radio"] {
    @apply h-5 w-5 border-2 border-secondary-500/50 text-primary-600 focus:shadow-none focus:outline-none focus:ring-transparent;
  }
  [type="radio"] {
    @apply text-white checked:bg-radio;
  }
  [type="checkbox"] {
    @apply text-white checked:bg-checkbox;
  }
}

    You might have noticed that SVG files are provided for the radio buttons and checkboxes. The styles above checked:bg-radio and checked:bg-checkbox use a custom background, which should be defined in your tailwind.config.ts file like so:

    ...  

theme: {
    extend: {
      backgroundImage: {
        radio: "url(/images/icon-radio-selected.svg)",
        checkbox: "url(/images/icon-checkbox-check.svg)",
      },

...

    You might also want to style your other form elements through global.css; that way, you do not have to repeat yourself on every input element. There is a great video that goes over the details of how to use `@tailwindcss/forms Styling Forms with Tailwind CSS

    I hope you find my comments useful!

  • solvman•1,650
    @solvman

    @chleighton1, great job completing the project!

    I agree with @Mikoyzskie; there is no need to use the state to toggle the responsive layout. Alternatively, to tailwind classes, you may use the HTML<picture> tag to source a different image for various viewport sizes. It could be implemented with a static component as so:

    import mobileImage from "../assets/images/illustration-sign-up-mobile.svg";
import desktopImage from "../assets/images/illustration-sign-up-desktop.svg";

const ResponsiveImage = () => {
  return (
    <picture>
      <source media="(min-width: 768px)" srcSet={desktopImage} />
      <img src={mobileImage} alt="" />
    </picture>
  );
};

export default ResponsiveImage;

    Use this <ResponsiveImage /> element in place of the image within your <MainCard />

    There is an excellent MSDN Article that goes over responsive images: Responsive Images

    I hope it helps!

  • solvman•1,650
    @solvman

    Hi Rebecca,

    It is a very well-done project! Several aria attributes must be used to make the accordion fully accessible, such as aria-expanded, aria-controls, aria-labeledby, and region. If you are interested in the recommended way of doing accessible accordion, the ARIA Authoring Practices Guide (APG) offers an example in Accordion Example. I hope you find it useful!

    Otherwise, your implementation is pixel-perfect! 🤩

  • solvman•1,650
    @solvman

    Very well done project! 🫶 Congratulations! 🎉

    • ⭐️ Great use of semantic HTML 🙌
    • ⭐️ Global variables 👌
    • ⭐️ Use of REM units 👍
    • ⭐️ Grid and Flex 💪

    I have a couple of tiny suggestions for you:

    • ⭐️ <div class="blog-owner"> could be re-done using semantic <figure> element like so:
          <figure class="blog-owner">
        <img src="images/image-avatar.webp" alt="avatar">
        <figcaption>Greg Hooper</figcaption>
      </figure>
    • ⭐️ There is a <time> semantic HTML element. It would be best if you utilize it whenever it is appropriate:
    <p class="card__published">Published <time datetime="2024-01-28">28 Jan 2024</time></p>
    • ⭐️ There is nothing wrong with using <h1> within the card. However, this card-like widget will probably be used with multiple other cards within some bigger content pages. Though multiple <h1> elements on a page, one per <section> or <article>, are within the HTML5 specifications, it is discouraged due to use by assistive technologies. Having a single <h1> per page is a widely accepted practice. Think ahead about what content/arrangement, whatever you are designing, is going to be placed in. With that said, The <h2> heading is the most appropriate for the card-like widget. To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users:
    <main>
    <h1 class="sr-only">Frontend Mentor blog card project submission.</h1>
    <article class="blog-card">
      ...
      <h2>HTML & CSS foundations</h2>
      ...

    Visually hidden class:

    .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    Otherwise, quality project submission! 🤩 Attention to detail is stunning. 👏 Pixel perfect! 👌 Keep it up!👏 I hope you find my comments useful 🫶

  • solvman•1,650
    @solvman

    It is an admirable attempt at completing the project 🎉 Great job 👍 It seems you might lack fundamental knowledge of HTML structure and CSS. I would suggest getting a refresher. There is an excellent free resource that I used myself personally and enjoyed. It is a free course and freeCodeCamp.org called Responsive Web Design. After locking in some solid fundamentals, try a couple of simple projects first, get feedback, improve, and only then move on to a little more complicated project.

    I wish you the best 🫶

  • solvman•1,650
    @solvman

    Well done!

    I have only one small suggestion. The recipe preparation section is not full-width on the mobile layout. Consider doing:

    .recipe-preparation {
    width: 100%;
    padding: 1rem 2rem;
}

    Otherwise, 🚀 Impressive! 🎉 Keep it up! 👍 I hope you find my comments helpful 🫶

  • solvman•1,650
    @solvman

    You did well on recreating colors, font size, and layout.

    I’m afraid your design does not feel responsive at all. It jumps from one layout to another without softly adjusting to width changes. Please don't hard set the width of containers; instead, use min/max height and let it flow. Remember, HTML documents are responsive by default; we do not need to stay in the way of it by hard-coding widths.

    I highly recommend checking out the newly published article "A practical guide to responsive web design".

    Consider reviewing how others did the same project.

    Otherwise, very well done! 🚀 Impressive! 🎉 Keep it up! 👍 I hope you find my comments helpful 🫶

    Marked as helpful
  • Olanrewaju•80
    @LANRIE-DEV
    What are you most proud of, and what would you do differently next time?

    I am proud of my hunger for more insight and knowledge. and each time I embark on a challenge, I make sure I apply my corrections and learn more from them.

    What challenges did you encounter, and how did you overcome them?

    No challenges whatsoever.

    What specific areas of your project would you like help with?

    Accessibility and hierarchy rules.

    QR-code component

    #accessibility
    1
    solvman•1,650
    @solvman

    Very well done! 🎊🎉🚀

    I have a few suggestions for you:

    • ⭐️ Great job using semantic HTML! Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content.

    • ⭐️ A card-like widget's most appropriate heading level is likely <h2>. Great job!

    To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class (it is also called sr-only which is "screen reader only") for the <h1> :

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    You could add it above the card like so:

    <body>
  <main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <article class="card">
...

    • ⭐️ Consider using REM units for margin, padding, and font size.

    • ⭐️ Consider the use of custom global variables. 👍

    Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶

    Marked as helpful
  • solvman•1,650
    @solvman

    The link to your code base is empty. Please update.

  • solvman•1,650
    @solvman

    Very well done! 🎊🎉🚀

    I have a few suggestions for you:

    • ⭐️ Great job using <main>. I suggest you look into other semantic elements as well. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content.

    • ⭐️ Titles and headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. A card-like widget's most appropriate heading level is likely <h2>.

    With that being said, I would redo your code as so:

    <body>
  <main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <article class="card">
      <img src="./images/image-qr-code.png" alt="QR Code">
      <h2>Improve your front-end skills by building projects</h3>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
  </main>
  <footer class="attribution">
      ... attribution goes here
  </footer>
</body>

    As mentioned above, the <h2> heading is the most appropriate for the card-like widget. To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class (it is also called sr-only which is "screen reader only") for the <h1> :

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    Learn more about semantic HTML elements here

    Please remember that block-level elements stack one on top of the other. The only element not block level within the card is <img>, which could be "converted" to block level through a simple reset. You should not hard-set the image size since it makes images unresponsive. You could use the following reset:

    img {
    display: block;
    max-width: 100%;   /* ensures images does not overflow the container */
}

    • ⭐️ Great job using Flex to place the card in the center. Due to the 100vh height, you have a slight clipping issue on smaller heights. To fix it, you may use height: max(500px, 100vh); instead.

    • ⭐️ Consider using REM units for margin and padding.

    • ⭐️ Great job using custom global variables. 👍

    Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶

  • solvman•1,650
    @solvman

    The link to your code is broken. Please fix.

  • solvman•1,650
    @solvman

    Very well done! 🎊🎉🚀

    I have a few suggestions for you:

    • ⭐️ I suggest the use of semantic elements instead of just <div> and <span> (both are non-semantic). Semantic elements significantly improve the SEO and accessibility of your project. First, the <main> landmark element represents the primary content of the document and expands on the central topic of the document. You should wrap your content in <main>. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content.

    • ⭐️ Titles and headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. A card-like widget's most appropriate heading level is likely <h2>.

    With that being said, I would redo your code as so:

    <body>
  <main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <article class="card">
      <img src="./images/image-qr-code.png" alt="QR Code">
      <h2>Improve your front-end skills by building projects</h3>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
  </main>
  <footer class="attribution">
      ... attribution goes here
  </footer>
</body>

    As mentioned above, the <h2> heading is the most appropriate for the card-like widget. To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class (it is also called sr-only which is "screen reader only") for the <h1> :

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    Learn more about semantic HTML elements here

    Please remember that block-level elements stack one on top of the other. The only element that is not block level within the card is <img>, which could be "converted" to block level through a simple reset, which should be used almost on every project anyways:

    img {
    display: block;
    max-width: 100%;   /* ensures images does not overflow the container */
}
    • ⭐️ Though doing position: absolute with transform: translate... does the job of centering the card, it takes it out of the normal document flow, which could have some repercussions. To place the card in the middle of the screen, you could use Flex or Grid. I prefer the Grid since it is only a line shorter:
    body {
    height: max(500px, 100vh);
    display: grid;
    place-content: center;
}

    • ⭐️ Consider using REM units for margin, padding, and font size.

    • ⭐️ You do not need to use <br> all over the text. It makes the text unresponsive to width change unless that is what you want. If the font is sized right, the text should break to match the design.

    • ⭐️ Consider the use of custom global variables. 👍

    Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶

  • solvman•1,650
    @solvman

    Very well done! 🎊🎉🚀

    I have a few suggestions for you:

    • ⭐️ I suggest the use of semantic elements instead of just <div> and <span> (both are non-semantic). Semantic elements significantly improve the SEO and accessibility of your project. First, the <main> landmark element represents the primary content of the document and expands on the central topic of the document. You should wrap your content in <main>. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content.

    • ⭐️ Titles and headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. A card-like widget's most appropriate heading level is likely <h2>.

    With that being said, I would redo your code as so:

    <body>
  <main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <article class="card">
      <img src="./images/image-qr-code.png" alt="QR Code">
      <h2>Improve your front-end skills by building projects</h3>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
  </main>
  <footer class="attribution">
      ... attribution goes here
  </footer>
</body>

    As mentioned above, the <h2> heading is the most appropriate for the card-like widget. To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class (it is also called sr-only which is "screen reader only") for the <h1> :

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    Learn more about semantic HTML elements here

    Please remember that block-level elements stack one on top of the other. The only element that is not block level within the card is <img>, which could be "converted" to block level through a simple reset, which should be used almost on every project anyways:

    img {
    display: block;
    max-width: 100%;   /* ensures images does not overflow the container */
}
    • ⭐️ You set the body as a Flex container but then try to play with position: absolute to center the card. Though it does the job, it looks way more complicated than it needs to be, adding clipping issues on smaller heights. To place the card in the middle of the screen, you could use Flex or Grid. I prefer the Grid since it is only a line shorter:
    body {
    height: max(500px, 100vh);
    display: grid;
    place-content: center;
}

    • ⭐️ Consider using REM units for margin, padding, and font size.

    • ⭐️ Consider the use of custom global variables. 👍

    Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶

    Marked as helpful
  • solvman•1,650
    @solvman

    Very well done! 🎊🎉🚀

    I have a few suggestions for you:

    • ⭐️ I suggest the use of semantic elements instead of just <div> and <span> (both are non-semantic). Semantic elements significantly improve the SEO and accessibility of your project. First, the <main> landmark element represents the primary content of the document and expands on the central topic of the document. You should wrap your content in <main>. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content.

    • ⭐️ Titles and headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. A card-like widget's most appropriate heading level is likely <h2>.

    With that being said, I would redo your code as so:

    <body>
  <main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <article class="card">
      <img src="./images/image-qr-code.png" alt="QR Code">
      <h2>Improve your front-end skills by building projects</h3>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
  </main>
  <footer class="attribution">
      ... attribution goes here
  </footer>
</body>

    As mentioned above, the <h2> heading is the most appropriate for the card-like widget. To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class (it is also called sr-only which is "screen reader only") for the <h1> :

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    Learn more about semantic HTML elements here

    In your case, align-items: center on .container does nothing. It controls the layout for Grid or Flex, which you do not need. Please remember that block-level elements stack one on top of the other. The only element that is not block level within the card is <img>, which could be "converted" to block level through a simple reset, which should be used almost on every project anyways:

    img {
    display: block;
    max-width: 100%;   /* ensures images does not overflow the container */
}
    • ⭐️ To place the card in the middle of the screen, you could use Flex or Grid. I prefer the Grid since it is only a line shorter:
    body {
    height: max(500px, 100vh);
    display: grid;
    place-content: center;
}

    • ⭐️ Consider using REM units for margin, padding, and font size.

    • ⭐️ Consider the use of custom global variables. 👍

    Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶

    Marked as helpful
  • solvman•1,650
    @solvman

    Very well done! 🎊🎉🚀

    I have a few suggestions for you:

    • ⭐️ I suggest the use of semantic elements instead of just <div> and <span> (both are non-semantic). Semantic elements significantly improve the SEO and accessibility of your project. First, the <main> landmark element represents the primary content of the document and expands on the central topic of the document. You should wrap your content in <main>. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content.

    • ⭐️ Titles and headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. A card-like widget's most appropriate heading level is likely <h2>.

    You do not need to wrap elements in extra <div> elements. With that being said, I would redo your code as so:

    <body>
  <main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <article class="card">
      <img src="./images/image-qr-code.png" alt="QR Code">
      <h2>Improve your front-end skills by building projects</h3>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
  </main>
  <footer class="attribution">
      ... attribution goes here
  </footer>
</body>

    As mentioned above, the <h2> heading is the most appropriate for the card-like widget. To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class (it is also called sr-only which is "screen reader only") for the <h1> :

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    Learn more about semantic HTML elements here

    Please remember that block-level elements stack one on top of the other. The only element that is not block level within the card is <img>, which could be "converted" to block level through a simple reset, which should be used almost on every project anyways:

    img {
    display: block;
    max-width: 100%;   /* ensures images does not overflow the container */
}
    • ⭐️ To place the card in the middle of the screen, you could use Flex or Grid. I prefer the Grid since it is only a line shorter:
    body {
    height: max(500px, 100vh);
    display: grid;
    place-content: center;
}

    • ⭐️ Consider using REM units for margin, padding, and font size.

    • ⭐️ Consider use of custom global variables. 👍

    Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶

  • solvman•1,650
    @solvman

    Very well done! 🎊🎉🚀

    I have a few suggestions for you:

    • ⭐️ Great job using <footer>. I suggest the use of more semantic elements instead of just <div> and <span> (both are non-semantic). Semantic elements significantly improve the SEO and accessibility of your project. First, the <main> landmark element represents the primary content of the document and expands on the central topic of the document. You should wrap your content in <main>. Such widgets as cards are more suited to be constructed with the <article> element, which encapsulates reusable, self-contained content.

    • ⭐️ Headings are usually denoted by <h1>, <h2>, <h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by <p>. A card-like widget's most appropriate heading level is likely <h2>.

    With that being said, I would redo your code as so:

    <body>
  <main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <article class="card">
      <img src="./images/image-qr-code.png" alt="QR Code">
      <h2>Improve your front-end skills by building projects</h3>
      <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
  </main>
  <footer class="attribution">
      ... attribution goes here
  </footer>
</body>

    As mentioned above, the <h2> heading is the most appropriate for the card-like widget. To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class (it is also called sr-only which is "screen reader only") for the <h1> :

    .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    Learn more about semantic HTML elements here

    You do not need a Flex container inside the card. Please remember that block-level elements stack one on top of the other. The only element that is not block level within the card is <img>, which could be "converted" to block level through a simple reset, which should be used almost on every project anyways:

    img {
    display: block;
    max-width: 100%;   /* ensures images does not overflow the container */
}

    • ⭐️ Consider using REM units for margin, padding, and font size.

    • ⭐️ Consider using custom global variables for colors and typography. They add tons of value to a larger project 👍

    Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶

    Marked as helpful