Skip to content
OverviewSolutions
7
Comments
8
Łukasz Gwarda
@lgwarda

All comments

  • nilmus•100
    @nilmusSubmitted 13 days ago
    What specific areas of your project would you like help with?

    I couldn't really mirror the design's wide margin around the grid, in the desktop view, because when I tried increasing the margin, the grid overflowed

    Testimonials Grid Section

    1
    Łukasz Gwarda•160
    @lgwardaPosted 10 days ago

    To fix the overflow and mirror the wide margin design correctly, here’s the approach:

    Apply a Reset/Normalize Stylesheet: Reset all default margins, paddings, and box-sizing to prevent unwanted behavior.

    Use box-sizing: border-box; to include padding and borders inside the element’s width and height, preventing overflow.

    Set box-sizing: border-box; Globally: This is a common practice to ensure all elements’ padding and borders are included in their total width and height, which helps avoid overflow issues.

    Adjust the margin and padding Carefully: Once the reset is applied, you can confidently control the margin and padding without worrying about overflow.

    0
  • Łukasz Gwarda•160
    @lgwardaPosted 14 days ago

    You've made some excellent choices with the technology stack for the four-card feature card. Vite, React, HTML, CSS, and SCSS are all powerful tools for building modern and responsive user interfaces. Your project is off to a great start, and it's evident that you've put in a lot of effort.

    One area that could further enhance your project is focusing on accessibility and SEO improvements. By implementing proper semantic HTML, you can make your project more accessible to users with disabilities and easier for search engines to crawl and index. Adding appropriate aria- attributes and ensuring keyboard navigation support will significantly enhance the user experience for individuals who rely on assistive technologies.

    In addition, optimizing headings, meta tags, and alt text for images will boost your project's SEO performance, resulting in higher visibility and engagement.

    Overall, your project is well-executed and shows great potential. By prioritizing accessibility and SEO, you'll create a more inclusive and discoverable product that caters to a diverse audience. Keep up the fantastic work, and best of luck with your continued development!

    Marked as helpful
    0
  • Car•140
    @Lukas3162000Submitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of figuring out object-fit:cover; to solve the problem of viewing the product picture in an responsive environment.

    What challenges did you encounter, and how did you overcome them?

    I didn't quite get it how to wrap the contents in contents into containers that don't make things too complicated.

    And how did i overcome it? I didn't, i made it comlicated and wokred throug so that it at least works and i'll try to improve over the next couple of tasks as i go :D

    What specific areas of your project would you like help with?

    I'd really like to understand, why me content-part of the card in mobile view (below 600px width) doesn't use any margin or padding to the right side & overflows.

    I just couldn't figure it out :/

    Responsive Product Card

    1
    Łukasz Gwarda•160
    @lgwardaPosted 21 days ago
    1. Semantic HTML:

    • Use more semantic elements: Consider using tags like <section> or <article> to further enhance the semantics of your HTML.

    • Improve image accessibility: Use descriptive alt text for <img> elements. For example, alt="Bottle of Gabrielle Essence Eau De Parfum" instead of alt="Parfume".

    • Add aria-label to buttons: Describe button actions more clearly for assistive technologies. For example, <button aria-label="Add to cart">Add</button>.

    1. Code Structure and Readability:
    • Group related styles: Organize your CSS by grouping related styles for better readability.
    • Use classes instead of IDs: Rely on classes for styling to enable better reusability, following CSS best practices.
    1. Design Consistency:
    • Alignment with design: Compare spacing, font sizes, and colors with original mockups and adjust as necessary.
    • Visual hierarchy: Ensure headings, subheadings, and body text have a clear visual hierarchy.

    By addressing these areas, you can enhance the overall quality and usability of your component. Focus on semantics and design consistency, aligning with provided mockups or guidelines when applicable. Implementing these suggestions will lead to a more user-friendly and visually appealing result. Good luck!

    1
  • Sabina•10
    @SabinaZusSubmitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that I still remembered most of the basics of HTML although I learned it 2 months ago for only two weeks.

    Next time I would probably clean/delete some unnecessary code regularly throughout coding. Only by the end of making finishing touches I noticed there were some lines that didn't have to be there. It simply started piling up and at one point it started to be a bit chaotic and unclear.

    What challenges did you encounter, and how did you overcome them?

    I had difficulty including the last section of the recipe card (Nutrition) into the rest of the card. It was standing alone from the rest and it took me awhile to figure it out. Eventually I noticed that the case sensitivity was the issue the whole time and it solved the whole problem.

    What specific areas of your project would you like help with?

    Is there a simpler way to code the responsive design for other devices? Although my way works I feel it's a bit cumbersome.

    Recipe page

    1
    Łukasz Gwarda•160
    @lgwardaPosted 23 days ago

    Hi there! Here are three handy tips for a smoother responsive design workflow:

    1. Flexbox is Your Friend If you're looking for an easy way to create a one-dimensional layout (either row or column), Flexbox is a great tool to have in your CSS arsenal. It can help make your designs more adaptable across different screen sizes.
    2. Choose Relative Units When it comes to units in CSS, try using relative units like em, rem, %, or vh/vw instead of fixed pixels. These units can adjust according to the screen size, making your designs more responsive and saving you time in the long run.
    3. Think Mobile First A great approach to responsive design is to start by designing for mobile devices. Once you have your mobile design down, you can then use media queries to adapt your design for larger screens. This keeps your CSS simpler and more organized! Hope these tips help you out!
    Marked as helpful
    1
  • Łukasz Gwarda•160
    @lgwardaPosted 28 days ago

    Your HTML document already has a good foundation, but here are specific assessments and suggestions regarding semantic HTML, accessibility, responsiveness, code structure, and design consistency:

    1. Semantic HTML Current Use: You use <main>, <h1>, <h2>, <ul>, and <ol>, which are great for structure. Improvements: Use <header> for the title section and <section> for distinct parts (like ingredients, instructions, etc.). Consider wrapping the main content in a <article> tag if it's meant to be a self-contained piece.
    2. Accessibility Current Status: You have some alt text for images, but it's quite basic. Improvements: Enhance alt text to describe the image in more detail. Ensure color contrast meets WCAG standards for readability. Use ARIA roles if necessary, though the semantic HTML should suffice for most cases.
    Marked as helpful
    0
  • Łukasz Gwarda•160
    @lgwardaPosted about 1 month ago

    Overall, you’ve laid a good foundation for your project. Here are some suggestions to improve your HTML structure and accessibility:

    Use semantic HTML elements to enhance readability and accessibility. For example, wrap your main content in a <main> tag, and consider using an <article> tag for the profile section.

    Headings: Avoid using multiple <h2> and <h3> tags in a row without a clear hierarchy. Instead, you can use <h2> for the main title and <h3> for subsections, ensuring that they reflect a logical order.

    Image Attributes: Add width and height attributes to your <img> tag to prevent layout shifts and improve performance.

    Accessibility: Instead of using <label> inside buttons, consider using just the button element or style the anchor tags directly. Labels are generally used with form elements.

    0
  • Łukasz Gwarda•160
    @lgwardaPosted about 1 month ago

    Overall, this solution demonstrates strong foundational skills in both HTML and CSS. The use of CSS variables and media queries enhances maintainability and responsiveness. However, the link to the live demo does not work, which could hinder the presentation of the project. Additionally, ensure that the design matches the original specifications more closely, particularly in terms of size of the card width. Improving semantic HTML and ensuring all accessibility features are in place will further elevate the quality of this project. Great job, and keep refining your skills! If you have any specific questions or need further guidance, feel free to ask!

    Marked as helpful
    1
  • Łukasz Gwarda•160
    @lgwardaPosted about 1 month ago

    Overall Impressions

    Your solution is well-structured and visually appealing, with a clean layout. It effectively meets the requirements of the QR code challenge. Here’s some specific feedback on key areas:

    1. Semantic HTML

    • Use of Semantic Elements: The structure could benefit from additional semantic elements. Consider using <header>, <main>, and <footer> tags to enhance the HTML semantics. For example, wrapping the main content in a <main> tag can improve the document's structure and accessibility.

    2. Accessibility

    • Image Alt Text: The alt attribute of the image could be more descriptive. Instead of "QR DE LA PAGINA FRONTEND MENTOR," consider using "QR code linking to Frontend Mentor website" to provide context for screen reader users.
    • Heading Structure: Since you have a heading (<h1>), make sure that it’s the primary heading of the page. If there are multiple sections, consider using <h2> for subsections to maintain a proper heading hierarchy.
    • Contrast: Check the color contrast between the text and background to ensure it meets accessibility standards. Tools like the WebAIM contrast checker can help you with this.

    3. Responsive Design

    • Media Queries: Your media query adjusts the card size well for smaller screens. However, consider testing it on a range of devices to ensure it looks good across various screen sizes.
    • Flexibility: You might want to explore using percentage-based widths or flexible units (like vw or vh) to enhance the adaptability of your layout.

    4. Code Structure and Readability

    • CSS Organization: The CSS is generally clear and well-organized. For improved readability, consider grouping related styles together and adding comments to explain sections or complex styles.
    • Reusability: To enhance reusability, you could create utility classes for common styles (e.g., margin and padding) instead of applying them directly in specific classes. This could reduce redundancy in your CSS.

    5. Design Consistency

    • Design Differences: Ensure the visual design closely matches any provided specifications (if applicable). While the overall design looks good, verify that font sizes, colors, and spacing match the intended design.

    Additional Suggestions

    • Testing with Screen Readers: Try testing your page with a screen reader to see how the content is read. This will help identify any areas for improvement in accessibility.
    • Performance: If the image size is large, consider optimizing it for better performance, especially for mobile users.
    0