Skip to content
OverviewSolutions
4
Comments
4

Damian Kurzydlo

@dayu420Harpenden, UK.60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

CSS, React, Databases

Latest solutions

Latest comments

  • Damian Kurzydlo•60
    @dayu420Posted about 2 months ago

    Suggestions for improvements:

    Accessibility:

    1. Provide a descriptive alt text for the image (e.g., "A simple omelette on a plate" instead of an empty string).

    2.Fix the typo in the <h2> tag in the instructions-section (capitalize "Instructions"). Ensure consistent capitalization in all headings and labels (Preparation time, Calories, etc.).

    1. Consider using a <table> element instead of multiple <div> and <a> tags to display the nutrition information. A table is semantically more appropriate for tabular data, like nutritional values, and provides better structure and accessibility. Using a table makes it easier for screen readers to interpret the data and improves maintainability.

    Overall looks good. +

    0
  • Giovanni Emilio Ramirez Berrocal•30
    @GERB-DEVELOPERSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Me hubiera gustado agregar animaciones a los botones.

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

    Diferencias bien por los colores dark.

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

    Estructura html

    Card Social HTML-CSS

    1
    Damian Kurzydlo•60
    @dayu420Posted 2 months ago

    Your HTML and CSS code is well-structured and follows best practices in several areas, but I would note a few areas for improvement.

    Mobile First Approach:

    Consider making your CSS mobile-first, starting with smaller screens and using media queries to adjust the layout for larger screens. Right now, you're styling it for larger screens first and making adjustments later.

    Global Resets:

    Your * selector reset (margin: 0; padding: 0; box-sizing: border-box;) is a good practice for eliminating browser default styling. However, consider using a more modern reset (check Andy Bell he has a good one[You can search him on internet]) for better cross-browser consistency.

    0
  • Tonmoy Sarker•120
    @tonmoysarkerSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I liked how it turned out. I had fun.

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

    Initially I was confused about given font files and looked through how to use downloaded fonts. But, then I just imported the font from google fonts.

    I also learned how to set font-size in a range.

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

    None for this one.

    Responsive Blog Preview Card flex-box

    1
    Damian Kurzydlo•60
    @dayu420Posted 2 months ago

    Things to look at:

    1. If the blog cover photo is purely decorative (i.e., it doesn’t add meaningful content or context to the blog post), it’s better to set the alt attribute to an empty string (alt=""). This ensures that screen readers skip the image, avoiding unnecessary distractions for users relying on assistive technologies.

    1. It's generally not recommended to place an <h3> element before an <h2> element in your HTML structure. Heading elements in HTML should follow a hierarchical order to maintain both semantic meaning and accessibility.

      -<h1> (typically used for the main page title)

      -<h2> (used for major sections or subsections)

      -<h3> (used for subsections under <h2>)

      -<h4>, <h5>, and <h6> (for deeper levels of sub-sections)

    1. It's better to use a proper CSS reset rather than just applying ( {})* to ensure consistent styling across all browsers and avoid potential issues with default styles. Andy Bell have a good one. You can search it on internet.
    1. I noticed you're using the position property to control the layout within your flexbox structure. While this works, it's not necessary when you're using Flexbox. Instead of relying on position: absolute or similar properties, you can simplify the layout by wrapping the entire content in a .wrapper or just adding class .wrapper to main tag element and setting it to display: flex with flex-direction: column. This allows the elements to naturally flow and adjust.

    Here’s a more efficient approach:

    1.Wrap the content: Put everything inside a .wrapper element.

    css

    .wrapper {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it takes up the full available height */
}

    2.First Child (Main Content): Set flex-grow: 1 on the first child element (usually your main content). This makes it expand to take up all the available space.

    css

    .wrapper > .main-content {
    flex-grow: 1;
}

    3.Footer: For the footer, use margin-top: auto to push it to the bottom of the wrapper, making sure it only takes up as much space as needed.

    css

    .wrapper > .footer {
    margin-top: auto;
}

    With this structure:

    The blog-preview-card element grows to fill all available space, while the footer will remain at the bottom, taking up only the space it needs. No need for position: absolute or position: relative when you're working with Flexbox; this method is cleaner and more maintainable.

    1. The calc() expression you're using (100vw - 375px) might be unnecessarily complex unless you're targeting a very specific range of devices. clamp() itself is already a powerful tool, and adding calc() may add extra complexity that’s harder to maintain in the long term.

    You could achieve similar results by simply using clamp() with a percentage or viewport width without the need for a custom calc() calculation.

    Marked as helpful
    0
  • Damian Kurzydlo•60
    @dayu420Posted 2 months ago

    The card component youve just build looks good to me but I would advise you to put footer element at the bottom of the page making it clean design.

    1