Skip to content
OverviewSolutions
13
Comments
457
Ahmed Faisal
@afrussel

All comments

  • Ahmed Faisal•5,095
    @afrussel

    Hello, @TedJenkler

    Overall, your effort is commendable. However, during the review, I observed several areas that require attention to enhance the overall quality of your work.

    1. Coding Errors:

    • While examining the code, I identified a few instances of coding errors that need rectification to ensure optimal functionality and compliance with best practices.

    2. Missing Font Family:

    • The absence of a defined font family might impact the visual consistency and readability across your web content. It's crucial to specify a suitable font stack to maintain a cohesive and aesthetically pleasing design.

    3. Image Hover Effect:

    • Incorporating a hover effect on images can significantly enrich user interaction and engagement. Implementing this enhancement can elevate the visual appeal and interactivity of your website, creating a more immersive user experience.

    4. Footer Height Adjustment:

    • Optimizing the footer height can contribute to a more balanced layout and overall aesthetics. Lowering the footer height might refine the website's visual structure, providing a more cohesive and aesthetically pleasing design.

    Addressing these aspects will not only resolve the noted issues but also contribute to an improved user experience, design consistency, and code quality across your web project.

    I encourage you to consider these points as opportunities to refine and elevate the quality of your work further.

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    Hello @davidlayobo, Overall, not bad for a novice. The vision that responds well is likewise good. To solve the problem, I applied the hover effect. Please have a look at my solution; it might be able to assist you identify the problems you're having. Additionally, I used a seamless hover effect transition.

  • Ahmed Faisal•5,095
    @afrussel

    Hello @ahmedafsa, good job for a novice. Here are some comments I've made to aid you in the future.

    The specific issues in your code lie mainly in accessibility and the lack of semantic structure:

    1. Missing Alt Attributes: Images are missing alt attributes (alt="..."). These attributes provide alternative text for screen readers and are essential for accessibility purposes.

    2. Semantic HTML Elements: The structure could benefit from more semantic HTML elements like <header>, <main>, <section>, or <article>. They help screen readers and search engines understand the content and improve accessibility.

    3. Responsive Images Handling: Although you're using different images for desktop and mobile, directly inserting both images may not ensure the best performance or adaptability across devices. Employing the <picture> element with <source> tags and media queries allows for more precise control over image loading based on device size or resolution.

    4. CSS File Linking: Ensure that the path to your CSS file (style.css) is correct and that the CSS rules defined in that file are appropriately applied to the HTML elements.

    5. Form Accessibility: If the button is part of a form, incorporating proper form elements (<form>, <input>, <label>) with the appropriate semantics and ARIA attributes would improve accessibility and user experience.

    Addressing these concerns will enhance the accessibility, semantics, and overall structure of your HTML, making it more compliant with best practices and standards.

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    Hi @hadreemustaffa

    Your code appears to use the <picture> element correctly for responsive images by utilizing <source> tags with different media queries to provide different image sources based on screen sizes. However, without specific details about the problem you're facing, it's challenging to pinpoint the issue accurately.

    Here are a few general pointers to check:

    1. File Paths: Verify that the paths to your images are correct (src and srcset attributes). Ensure the images are in the specified locations relative to your HTML file.

    2. Media Queries: Double-check your media queries in <source> tags to confirm they match the intended screen sizes. This ensures the correct image is loaded based on the device's resolution.

    3. Fallback <img> Tag: Confirm that the <img> tag inside each <picture> element provides a default image (src) for browsers that don't support the <picture> tag or media queries.

    If images are not displaying as expected, check your browser's developer tools for any console errors or warnings that might provide insights into the issue.

    By addressing these points, you might identify and resolve the problem with your <picture> tags. If you have specific errors or unexpected behaviors, providing that information would help in giving more precise assistance.

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    Hello, @stefanappdev I display your codes. You should probably learn how to use React to create multistep forms with validation capabilities and CSS. It's somewhat difficult to walk through every step, but if you simply verify the developer's solution, we can quickly identify the issues.

    The following is a reference link to the solution to your question: Sure, here's a brief explanation of min-content, max-content, and fit-content in the context of CSS.

    • min-content: This value sets the size of a box to the minimum size required to contain its content without overflowing. It allows the box to shrink to the smallest size possible based on its content.

    • max-content: This value sets the size of a box to the maximum size required to contain its content without overflowing. It allows the box to expand to the maximum size possible based on its content.

    • fit-content: This value sets the size of a box to fit the content along a specified axis (width or height), up to a maximum size defined by another property or value. It is similar to min-content, but it lets you set a maximum size for the content to expand within.

    These values are commonly used in CSS for sizing elements, particularly in grid layouts and with the width or height properties. They provide flexibility in creating responsive designs that adjust based on the content they contain.

    Reference: MDN Web Docs on CSS min-content, max-content, and fit-content: MDN Web Docs

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    Hi, Overall good work as a newbie. The responsive view is also good. On my solution, I used and hover effect. I would like to request you please take a look at my solution it may help you to find your issues. Also I used smooth transition on hover effect.

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    Hi, Overall good work as a newbie. Use cursor: pointer on image hover. More over you can this this below code for over effect with transition

     .card-view::after {
     --aqua: hsla(178, 100%, 50%, 0.5);
     content: url(./images/icon-view.svg);
     background: var(--aqua);
     position: absolute;
     inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: all 0.25s ease;
}
 .card-view:hover::after {
     opacity: 1;
}

    I would like to request you please take a look at my solution it may help you to find your issues.

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    Hi, Overall good work as a newbie. There are some issues on box width area in responsive view. Also Text color is not match in <p>. I would like to request you please take a look at my solution it may help you to find your issues. Also I used smooth transition on hover effect.

  • Ahmed Faisal•5,095
    @afrussel

    Hi, Overall good work as a newbie. There are some issues on box width area in responsive view. Also your main container is not horizontally align. I would like to request you please take a look at my solution it may help you to find your issues. Also I used smooth transition on hover effect.

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    Wow good work. Pixel perfect design for desktop view. There is a problem in small tablet view. There is a horizontal scroll in this view. Please fix this.

  • Ahmed Faisal•5,095
    @afrussel

    Over wall good work. Social icons are not center aligned. Use some more box shadow property like mock up.

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    HI, I am afraid to tell you that there are lots of areas which you need to improve, specially in section-2. Use can use a common class for each box using common CSS. Also there are padding issue as well. Please check the mock up once again.

  • Ahmed Faisal•5,095
    @afrussel

    Overall good work as a newbie. There are some issues on box width area in responsive view. Also your main container is not vertically align. I would like to request you please take a look at my solution it may help you to find your issues. Also I used smooth transition on hover effect.

  • Ahmed Faisal•5,095
    @afrussel

    HI, I think you submit a wrong solution my mistake. Please check it again and resubmit this solution

  • Ahmed Faisal•5,095
    @afrussel

    As a first project good work. There is some width and height mismatch on the card. Also, It will better to add an :hover effect on button. I would like to request you please take a look at my solution it may help you to find your issues

  • Ahmed Faisal•5,095
    @afrussel

    Wow, nice work.Pixel perfect design. :)

  • Ahmed Faisal•5,095
    @afrussel

    Overall good work as a newbie. There are some issues on box width area and font family or font size. I would like to request you please take a look at my solution it may help you to find your issues.

    Marked as helpful
  • Ahmed Faisal•5,095
    @afrussel

    Overall good work as a newbie. There are some issues on box width area. Try to make those like design. Otherwise all good. There are also problem on bg color and box shadow. Also this will better if you add a ':hover' effect on button

    Marked as helpful