Challenge 1 QR Code

Community feedback

• 

  Osman Bay•690

  @osmanbay90Posted 9 months ago

  Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

  Centering the Card: To center the card horizontally and vertically, you need to make sure the parent container (<div class="container">) occupies the full viewport height (100vh) and uses flexbox to center its contents. Your current implementation seems correct, but ensure that there are no conflicting styles or elements affecting the centering.

  Responsive Design: Your media query for smaller screens is a good start, but you may need additional adjustments for various screen sizes. Consider testing your design on different devices and screen resolutions to ensure it looks good across a range of devices.

  CSS Best Practices:

  Avoid inline styles: You've defined some styles inline within the HTML file (e.g., .attribution). It's generally better to keep all styles in a separate CSS file for better organization and maintainability.

  Group related styles: Organize your CSS rules logically to make it easier to understand and maintain.

  Use meaningful class names: Class names like .img and .text are quite generic and may lead to confusion later on. Try to use more descriptive class names that convey the purpose of the elements they're applied to.

  HTML Structure: Your HTML structure looks fine, but consider adding semantic HTML elements where appropriate (e.g., <header>, <main>, <footer>) to improve accessibility and SEO.

  Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

  Marked as helpful

  2
• 

  P

  Wojtek Brejnak•110

  @wojtekbrejnakPosted 9 months ago

  Hello, @danniadelap! Good job on building your first project! I’d like to offer some constructive feedback. Allow me to share valuable tips that will serve you well in your future projects:

  I. HTML Structure: Like @osmanbay90 said in his great feedback, remember to properly structure your HTML documents using tags like <main>, <article>, <section>, <header>, <footer>, and <nav>. These elements enhance accessibility and maintainability.

  II. Heading Order: Maintaining the correct order of headings (from <h1> to <h6>) is crucial. It ensures semantic clarity and assists screen readers. In your code you used <p class="title"> and <p class="info-scan" it would be better if you used just <h1> for the title and <p> for info-scan text.

  III. Simplify CSS Selectors: Whenever possible, use element selectors to avoid unnecessary complexity in your code. For instance, if you’re targeting a title class, consider leveraging the HTML structure (as mentioned in point II) and directly target the h1 {}.

  IV. Custom Properties (Variables): Introduce custom properties (CSS variables) to enhance code readability and maintainability. While they may not be critical for smaller projects, adopting them early establishes good habits and makes your code more adaptable.

  V. Avoid Absolute Units: Instead of using fixed units like px, opt for relative units such as em and rem. This approach ensures responsiveness across different devices and screen sizes.

  VI. GitHub Documentation (README.md): Invest time in creating clear and informative README files for your projects. Following the Frontend Mentor blueprint is a great approach. Good documentation makes you a better developer and helps others understand your work.

  VII. Meaningful Commit Titles: When committing changes, it’s helpful to provide descriptive titles. Instead of generic ones like ‘Done,’ opt for specifics such as ‘Center the QR code component.’ Clear commit messages benefit both you and your future collaborators. Remember to commit every change you’ve made to your project, ensuring that it has been tested and works. Commits are a great way to showcase your workflow and progress in building projects.

  You did really well using flexbox to center the QR component. Another great way is to use grid on the container:

  .container {
  	display: grid;
  	place-items: center;
  }
  

  Kevin Powell is an excellent teacher, and he recently uploaded a video titled A Practical Guide to Responsive Web Design on his YouTube channel YouTube video link. I highly recommend watching not only this video but also exploring his entire channel and his website Kevin Powell's website link, which is a valuable resource for frontend developers. Additionally, consider checking out the following great resources:

  • The Odin project
  • MDN
  • Scrimba
  • freeCodeCamp
  • and of course Articles and Resources on our Frontend Mentor website

  Keep up the great work, and best wishes on your coding journey! If you ever have any questions, feel free to reach out—I’m here to help. You can find my contact information in my profile. Keep coding and stay curious!

  Marked as helpful

  1