basic html and css web-design

Community feedback

• 

  Rora Alem•370

  @Rgit915

  Posted 8 months ago

  Hi @0-scripter,

  I reviewed your code, and you've done a great job so far! I have a few suggestions that could make the solution even cleaner and more aligned with best practices:

  Semantic HTML Usage:

  Consider using meaningful headings like <h1> or <h2> for titles instead of <p> tags. This helps with both readability and accessibility. Group related elements using meaningful containers like <div> or <section> for better structure and styling.

  CSS organziation:

  Move the inline CSS(in index.html) for .attribution into the your external css.css file to separate concerns.

  Alt Text Improvements:

  Avoid repeating the image file path in the alt attribute. Instead, describe the image's function. For example:

  alt="QR code to visit Frontend Mentor"
  

  Ensure that the alt attribute accurately describes the purpose of the image rather than the file path.

  Personalization:

  Update "Coded by <a href="#">Your Name Here</a>" with your actual name to make the footer more personalized and authentic.

  Remove Repeated Lines:

  Lines 29 to 30 appear to repeat the content already found in lines 43 to 46. You could remove lines 29 to 30 to avoid duplication.

  These tweaks will improve your code’s readability and accessibility. Keep up the great work! 😊

  Best regards,

  Rora

  10
• 

  océane•290

  @Ocece77

  Posted 8 months ago

  Code Review for Your Frontend Mentor Challenge ✨

  1. File Naming Convention 📂:
     Usually, the main stylesheet is named style.css by convention, just like the main HTML file is typically named index.html. It’s a good practice to follow this approach and name additional files based on their specific purpose. It keeps your project organized and professional! 🗂️

  ---

  2. Text Structure Improvements ✍️:
     • At line 29, your text "Improve your front-end skills" looks like it’s the main title of your card. It would be better to wrap it in an <h1> tag to reflect its importance. Here's an idea for the CSS styling you could use:

  h1 {
    font-weight: bold;
    font-size: 26px; /*or maybe 24px 🧐*/
    color: hsl(218, 44%, 22%);
  }
  

  • For the smaller text below, it seems like a descriptive paragraph. Use a <p> tag for semantic correctness. Here's a suggestion for the CSS:

  p {
    font-size: 15px;
    font-weight: bold;
    opacity: 0.5; 
    /* or alternatively */
    color: hsl(212, 45%, 89%);
  }
  

  🎯 This approach makes your structure more accessible and easier for other developers (or you!) to read later. 👓

  ---

  3. Rounded Corners 🌟:
     Nice job with the rounded corners! 🥳 However, pay close attention to details—it looks like the QR code image also needs rounded edges. A quick CSS fix should do the trick:

  img {
    border-radius: 8px; /* Adjust value based on design specs */
  }
  

  🎨 Do not forget the background color that was in the style-guid was hsl(212, 45%, 89%)

  ---

  4. Attention to Detail Matters 💡:
     You’re doing great, but don’t forget to double-check the design specifications! 🔍 Take a close look at the style-guide.md file provided by Frontend Mentor. It’s your best friend for nailing the exact look and feel. 💪

  ---

  5. Planning Ahead 📝:
     Before jumping into coding, try to map out your project:
     • Sketch your layout 📄.
     • Identify the key elements you’ll use, like divs, headers, paragraphs, etc..
       This process will make the implementation smoother and more organized. 🎯

  ---

  Amazing effort! 🎉 Don’t feel discouraged by small mistakes—they’re part of the journey. Keep practicing, and soon you’ll be creating stunning, pixel-perfect designs in no time. 🚀 Remember: details make all the difference! 🌟 You’ve got this! 💪

  00