Frontend Newbie QR Code Card with pure HTML & CSS

Community feedback

• 

  P

  Huy Phan•3,420

  @huyphan2210Posted about 2 months ago

  Hi @medina325,

  I've seen your solution and I'd like to share my thoughts:

  CSS Simplification

  In your CSS, I noticed this snippet:

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

  This can be simplified to:

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

  The ::before and ::after pseudo-elements are only applied when explicitly defined in your CSS for specific elements. Since they're not used in this challenge (and likely in similar ones), keeping your code concise improves clarity.

  Semantic HTML

  Your HTML is semantic, which is great! One small suggestion: always start with an <h1> before using <h2>, <h3>, etc., to create a proper heading structure. For example:

  <h1>Main Heading</h1>
  <h2>Subheading</h2>
  

  This helps screen readers and search engines better understand the content hierarchy.

  Font Imports

  You correctly imported the "Outfit" font with this:

  <link href="https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@400..700&amp;family=Outfit:wght@100..900&amp;display=swap" rel="stylesheet">
  

  However, it looks like you also imported "Edu NSW ACT Foundation" unnecessarily. It’s likely an accidental addition while browsing fonts. A cleaner version would be:

  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&amp;display=swap" rel="stylesheet">
  

  Alternatively, you can import fonts in your CSS file like so:

  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
  

  Colors and Variables

  When it comes to colors, using CSS variables (--var-name) can help organize and reuse values efficiently. For instance:

  :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
  }
  
  button {
      background-color: var(--primary-color);
  }
  

  However, if a color is only used once, it’s fine to avoid creating a variable.

  CSS Units

  I separate CSS units into two categories:

  1. Absolute Units:

  • Use px for precise sizing (e.g., borders or icons). However, it doesn't scale well for responsiveness.

  2. Relative Units:

  • rem: Relative to the root font size (default 1rem = 16px but customizable).
  • vw/vh: Relative to the viewport's width or height.
  • %: Relative to the size of the parent element (for most properties).

  For responsiveness, I recommend combining units like vw, vh, and % with tools such as:

  • CSS properties: min-width, max-height.
  • Functions: calc(), clamp(), min(), and max().
  • Media queries: To adapt layouts for different viewport sizes.

  Browser DevTools

  Your browser's Developer Tools (DevTools) are incredibly helpful for debugging and testing. They allow you to:

  • Inspect HTML and CSS elements
  • Simulate devices with different viewport sizes (a viewport is the visible area of a webpage)
  • Test responsiveness

  While simulations are not a perfect replacement for testing on real devices, they’re cost-effective and useful for quick checks.

  Hope this helps!

  Marked as helpful

  2

  ---

  

  Gabriel Medina Braga•10

  @medina325Posted about 2 months ago

  @huyphan2210 Wow! Thank you so much for the feedback, I admit I was expecting to be ignored for a very long time after submiting the solution to this first challenge😂.

  Thanks for the all the tips, I'll definitely remember them.

  1