Skip to content
OverviewSolutions
14
Comments
5
Joseph Haddad
@joehaddad1000

All comments

  • Joseph Haddad•220
    @joehaddad1000Posted 5 months ago

    Hello, the title "Improve Your Front-End Skills by Building Projects" differs from the design color. Other than that, it's a great effort in coding. Keep up the good work!

    0
  • Joseph Haddad•220
    @joehaddad1000Posted 5 months ago

    Hello, ensure that index.html is displayed when building the website, as currently, only the images of the design preview are visible.

    0
  • Joseph Haddad•220
    @joehaddad1000Posted 8 months ago

    Here's my feedback on your solution:

    1. Semantic HTML: Your HTML is well-structured and makes good use of semantic elements. The main tag is used to wrap the main content, and the div tags are used appropriately for grouping elements. The img tag is used for the image, and the a tag is used for the links. Good job!

    2. Accessibility: The img tag is missing an alt attribute, which is important for accessibility. Screen readers use the alt attribute to describe the image to users with visual impairments. Consider adding a descriptive alt attribute to the img tag.

    3. Responsive Design: Without seeing the CSS for different screen sizes, it's hard to say how well the layout would adapt to different devices. Consider using media queries to ensure your layout looks good on a range of screen sizes.

    4. Code Structure: Your code is well-structured and readable. The CSS is organized with clear, descriptive class names, which makes it easy to understand what each style rule is doing. The use of CSS variables for colors is a good practice as it improves maintainability.

    5. Improvements: Consider adding :focus styles to your links for better keyboard accessibility. Users who navigate with a keyboard or other input device should be able to see which element has keyboard focus.

    Overall, your solution is well-implemented with a few areas for improvement. Keep up the good work!

    Marked as helpful
    1
  • Joseph Haddad•220
    @joehaddad1000Posted 8 months ago

    The HTML could be more semantic by using <main> and <section> tags. The <img> tag needs an alt attribute for accessibility. The CSS is responsive, but testing on various screen sizes is recommended. The CSS uses id selectors, which are not reusable. Consider using class selectors for reusability and organizing the CSS properties in a consistent order for readability. Keep up the good work!

    Marked as helpful
    0
  • Corey•90
    @cjay44Submitted about 2 years ago

    My first FEM project - YAY! Any feedback is welcome! This was my first time using variables, I found it really helpful! I also need to become more aware of Accessibility and keeping things mobile responsive

    QR Code Component - First Project

    3
    Joseph Haddad•220
    @joehaddad1000Posted about 2 years ago

    Hello @cjay44, Your webpage is great and well done 👍

    You could add the <main> tag for accessibility:

    <main>
<div class="card">
  ......
</div>
</main>

    And attribution in the <footer> tag:

    <footer>
<div class="attribution" style="bottom:0px; position:absolute">
...
</div>
</footer>

    And with the <img> tag, you can remove the srcset. That's it, hope you're having a great time always!

    Marked as helpful
    0