QR code component

Community feedback

• 

  Kacper Kwinta•1,405

  @kacperkwintaPosted over 1 year ago

  Some tips:

  1.Use a consistent naming convention: Choose a naming convention for classes, IDs, and variables that is consistent throughout your codebase. For example, you can use hyphenated class names instead of camel case or underscores. This improves readability and maintainability.

  2.Use descriptive class names: Instead of using generic class names like "container", "image", and "text", consider using more descriptive class names that convey the purpose or meaning of the element. This makes it easier for other developers to understand your code and helps in future updates.

  3.Organize your CSS properties: It's a good practice to organize your CSS properties in a consistent and logical order. For example, you can group related properties together such as layout properties (e.g., display, position), box model properties (e.g., padding, margin), and typography properties (e.g., font-size, color). This makes it easier to scan and understand your code.

  4.Optimize your CSS code: There are several techniques you can use to optimize your CSS code:

  • Use shorthand properties whenever possible. For example, instead of padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;, you can use padding: 10px 20px;. This reduces the amount of code and improves performance.
  • Minify and concatenate your CSS files for production to reduce the file size and improve page load time.
  • Use media queries to apply different styles based on different screen sizes. This allows your website to be responsive and adapt to different devices.
  • Consider using a CSS preprocessor like Sass or Less to take advantage of features like variables, mixins, and nesting, which can make your CSS code more maintainable and reusable.
  • Remove any unused CSS rules to reduce the file size and improve performance.

  5.Consider using a CSS framework: If you find yourself writing a lot of repetitive CSS code, you might consider using a CSS framework like Bootstrap or Tailwind CSS. These frameworks provide pre-built components and utility classes that can speed up development and ensure consistency across your project.

  In addition to these tips, here are some additional resources that can help you improve your CSS code:

  • CSS Guidelines
  • Google HTML/CSS Style Guide
  • Airbnb CSS / Sass Styleguide
  • SMACSS - Scalable and Modular Architecture for CSS

  Marked as helpful

  0
• 

  Rebecca Padgett•1,840

  @bccpadgePosted over 1 year ago

  Hello @Uvejsii. Welcome to Frontend Mentor Community!! 👋🏼

  I have a few tips to improve your solution.

  HTML

  Every website should have one landmark like a <main> tag

  • So you can wrap all your content using <main> tag instead of <div> tag

  More info 📚

  W3Schools article ⏬

  HTML Semantic Elements

  HEADING TAGS

  I see that you are not using the correct heading tag. In future projects, make sure you use heading tags in chronological order.

  To fix the issue you can change the <h2> to a <h1>

  More info 📚

  Search Engine Journal article ⏬

  Header Tags

  CSS

  If you want to use a CSS Reset, you might look into Josh Comeau CSS Reset or Eric Myers CSS Reset

  Make sure you use <rem> or <em> units for font size

  • Pixels are an absolute unit that remains constant regardless of the screen size.

  More info 📚

  PX or Rem in CSS

  Overall your solution looks great and keep it up 👏

  Hope this helps you and don't hesitate to reach out to me if you have any questions

  Marked as helpful

  0