Skip to content
OverviewSolutions
5
Comments
5

o-k-harmash

@o-k-harmash90 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!

Latest solutions

Latest comments

  • o-k-harmash•90
    @o-k-harmash

    Hi, I'm not a professional front-end developer, and these are not recommendations — just ideas.
    I'd appreciate it if you could also review my codebase.

    1. Semantics of <p> for Price Elements
      Using <p> tags for price values is not semantically ideal. Consider using more appropriate elements like <span>, <strong>, or even <data> with a value attribute, depending on context. <p> is intended for paragraphs of text, not inline data like pricing.

    2. Clipped Image Angles with overflow: hidden
      Good approach. Applying overflow: hidden on a parent container is a clean way to cut image corners or apply shape effects. Make sure that the container has a proper position and border-radius if needed.

    3. Inline Block-Size Styles and Width/Height Rules
      It's valid to use inline-size and block-size for responsive control, but mixing them with traditional width/height in one codebase can create inconsistency. To avoid style conflicts, define a clear sizing strategy in your style guide (e.g., always use logical properties for layout, and traditional properties for media queries or specific cases).

    4. .image img vs .image_preview
      Prefer using a single, clear and specific class like .image_preview rather than cascading selectors like .image img. It improves readability and maintainability. Only use nested selectors when necessary for scope control or override specificity.

    5. Aspect Ratio Handling for Flexible Images
      Relying solely on aspect-ratio and object-fit is not always fully flexible. When combined with width: 100% and block/inlined layout, results may vary across browsers or image formats. To ensure consistent behavior, wrap the image in a responsive container, and apply aspect-ratio with care. Also validate image dimensions are not hardcoded by parent containers.

    Marked as helpful
  • o-k-harmash•90
    @o-k-harmash

    💬 Personal Feedback

    Hi! I'm not a production-experienced frontend developer. This commentary is more about my thoughts rather than direct recommendations.

    The solution view looks good and for sight meet the main requirements. I like your compact variable names, and incapsulating layout style in reusable .container stylesheet. Your active state management tracking different events (active, focus, and so on) — I need to add this in my solution too 😊.

    🔍 About margin: auto Inside Flex Parents

    This was a surprising case I encountered when comparing different codebases.

    Repro steps

    1. Use this body style:
    body {
  display: flex;
  text-align: center;
  height: 100vh;
  font-family: var(--font-family);
  background-color: var(--backgroud_primary);
}
    1. Then, use this container:
    .container {
  align-self: center;
  padding: 1.75rem;
  width: 25.125rem;
  min-width: 17.1875rem;
}
    1. In DevTools, emulate a device and reduce the screen height.

    You’ll notice that margin-block: auto; can center the card vertically, even when screen height is less than card height.

    But align-items in the flex parent pushes it below the view in the same case.

    So yes, margin behaves differently than align-items, especially when content overflows a strict height like 100vh.

    🧩 Something about code

    • I see that you changed some part of code like <li> tags inside <a> to proper structure, but GitHub Pages uses old version of repository.

    • The following CSS rule:

    ul {
  list-style: none;
  margin: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  margin-top: auto;
}

    margin-top: auto; will shift to the bottom if the height changes — if it’s wanted behavior, it’s okay.

    But I am interested in duplicating margin: 0.5rem; and margin-top: auto; — maybe there are some extra behaviors triggered because of the cascade.

    • About media query:
    @media screen and (min-width: 1440px) {
  .social-card {
    width: 17rem;
    padding: 1rem 2rem;
  }
}

    I couldn’t understand this rule because 1440px is the max possible size in the style guide, but in the rule it activates above 1440 — maybe it was intended for devices less than that width?

    If you use mobile first, define the base rule on the container like:

    .social-card {
  width: 15rem;
}

    Then write media query like:

    @media screen and (min-width: 550px) {
  .social-card {
    width: 20rem;
    padding: 1rem 2rem;
  }
}

    To set 20rem if screen width is more than standard mobile — I think that’s the behavior you wanted.

    • I couldn’t understand why we need a height property in .card:
    .social-card {
  background-color: var(--grey-800);
  display: flex;
  flex-direction: column;
  height: 25rem;
  width: 15rem;
  border-radius: 16px;
  padding: 1rem;
  align-items: center;
}

    I think the content should define the height by its own margin and spacing. Fixed height can break on small screens, but in our case it’s less than the guide, so it’s okay.

    📸 My Interesting Observation

    The profile pic inherits text-align and is centered without explicit margin on inline elements.

    .profile-pic {
  border-radius: 100%;
  width: 62px;
  margin: 0 auto 1rem auto;
}

    📚 Some Thoughts on Structure and Styling

    If you're interested, feel free to check out my GitHub or some of the links I've shared below. I'm not part of a Discord community, but we can always communicate through this platform.

    I reviewed the HTML and CSS using browser Developer Tools and wanted to share a few ideas that came to mind while trying to understand and recreate the layout.

    When I’ve worked on similar projects using React, I’ve realized that what I really care about is building a solid foundation with clean HTML and CSS. That’s where I like to start — getting the structure and styling right at the base level.

    Of course, there are many ways to implement things, and multiple approaches can be valid at the same time. What matters most is that it makes sense to you first (hehe), and that it’s logical and semantically sound.

    For learning best practices in structuring CSS, I recommend reading up on methodologies like BEM.

    🌱 A Few Concepts I Use

    • Layout elements – usually div, used for structural containers and positioning.
    • Semantic elements – like section, article, figure, etc. These improve readability for both developers and machines (like screen readers or SEO).
    • Wrappers – styled containers that group content and encapsulate specific layout or styles for reuse.

    📐 Positioning Elements

    To center something (like in this task), I usually use a layout element with margin: auto, flexbox alignment, or translate depending on what fits best.

    For basic 2D alignment, flex is often enough, but grids are useful for more complex layouts.

    🃏 Card Content

    I wrap grouped content (like a blog card) inside a semantic or wrapper element and give it base styling such as padding. This simplifies internal layout for child elements.

    💡 Some Lessons I’ve Learned

    • I’ve started using relative units (rem, em) and CSS variables, even in small projects. It helps with consistency and makes future adjustments easier (e.g., for themes or documentation).
    • I use combined selectors like .card__body p instead of assigning classes to every element. It feels cleaner in small to mid-size projects.

    ⚠️ One Tricky Issue

    If a text-wrapping element is inside a flex child, it often needs an explicit min-width: 0 or overflow rule — otherwise, text might not wrap as expected.

    Also, when using inline-flex elements, font-size or line-height might behave unexpectedly. These values don’t always inherit properly due to how layout calculations work.

    🔗 Useful Links

    Hope this helps or inspires you in some way.
    Thanks for reading! ✨
    — o-k-harmash

    Marked as helpful
  • o-k-harmash•90
    @o-k-harmash

    💬 Personal Feedback

    Hi! I'm not a production-experienced frontend developer. This commentary is more about my thoughts rather than direct recommendations.

    The solution looks like template and adaptivnes by the main vertical requirements.

    🔍 About margin: auto Inside Flex Parents

    This was a surprising case I encountered when comparing different codebases.

    Repro steps

    1. Use this body style:
    body {
  display: flex;
  text-align: center;
  height: 100vh;
  font-family: var(--font-family);
  background-color: var(--backgroud_primary);
}
    1. Then, use this container:
    .container {
  align-self: center;
  padding: 1.75rem;
  width: 25.125rem;
  min-width: 17.1875rem;
}
    1. In DevTools, emulate a device and reduce the screen height.

    You’ll notice that margin-block: auto; can center the card vertically, even when screen height is less than card height.

    But align-items in the flex parent pushes it below the view in the same case.

    So yes, margin behaves differently than align-items, especially when content overflows a strict height like 100vh.

    💡 Code Observations

    • I noticed a CSS rule where .card h3 and p were grouped together with a padding-inline property.
      .card h3,
  p {
    padding-inline: 15px;
  }

    You probably intended to apply padding only to h3 and p inside .card,
    but due to selector grouping, the style also applies to all p tags across the entire document.

    To fix this, you can list each selector separately with .card prefixed.

    More info: CSS Selectors – web.dev

    • There's a useful CSS property called text-align that controls how text is aligned within its container.
      For example, text-align: center will center text horizontally.
      This is useful for centering headers or content within a layout.

      Reference: CSS Typography – web.dev

    📚 Some Thoughts on Structure and Styling

    If you're interested, feel free to check out my GitHub or some of the links I've shared below. I'm not part of a Discord community, but we can always communicate through this platform.

    I reviewed the HTML and CSS using browser Developer Tools and wanted to share a few ideas that came to mind while trying to understand and recreate the layout.

    When I’ve worked on similar projects using React, I’ve realized that what I really care about is building a solid foundation with clean HTML and CSS. That’s where I like to start — getting the structure and styling right at the base level.

    Of course, there are many ways to implement things, and multiple approaches can be valid at the same time. What matters most is that it makes sense to you first (hehe), and that it’s logical and semantically sound.

    For learning best practices in structuring CSS, I recommend reading up on methodologies like BEM.

    🌱 A Few Concepts I Use

    • Layout elements – usually div, used for structural containers and positioning.

    • Semantic elements – like section, article, figure, etc. These improve readability for both developers and machines (like screen readers or SEO).

    • Wrappers – styled containers that group content and encapsulate specific layout or styles for reuse.

    📐 Positioning Elements

    To center something (like in this task), I usually use a layout element with margin auto, flexbox alignment, or translate depending on what fits best.

    For basic 2D alignment, flex is often enough, but grids are useful for more complex layouts.

    🃏 Card Content

    I wrap grouped content (like a blog card) inside a semantic or wrapper element and give it base styling such as padding. This simplifies internal layout for child elements.

    💡 Some Lessons I’ve Learned

    • I’ve started using relative units (rem, em) and CSS variables, even in small projects. It helps with consistency and makes future adjustments easier (e.g., for themes or documentation).

    • I use combined selectors like .card__body p instead of assigning classes to every element. It feels cleaner in small to mid-size projects.

    ⚠️ One Tricky Issue

    If a text-wrapping element is inside a flex child, it often needs an explicit min-width: 0 or overflow rule — otherwise, text might not wrap as expected.

    Also, when using inline-flex elements, font size or line height might behave unexpectedly. These values don’t always inherit properly due to how layout calculations work.

    🔗 Useful Links

    Hope this helps or inspires you in some way. Thanks for reading! ✨
    — o-k-harmash

  • Mahmud1Available•420
    @Mahmud1Available
    What are you most proud of, and what would you do differently next time?

    the css most especially

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

    the css most especially

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

    the css most especially

    Responsive using flex box

    1
    o-k-harmash•90
    @o-k-harmash

    💬 Personal Feedback

    Hi! I'm not a production-experienced frontend developer. This commentary is more about my thoughts rather than direct recommendations.

    I understand you might have many other tasks, and my comment may already be outdated by the time you read it.

    📚 Some Thoughts on Structure and Styling

    If you're interested, feel free to check out my GitHub or some of the links I've shared below. I'm not part of a Discord community, but we can always communicate through this platform.

    I reviewed the HTML and CSS using browser Developer Tools and wanted to share a few ideas that came to mind while trying to understand and recreate the layout.

    When I’ve worked on similar projects using React, I’ve realized that what I really care about is building a solid foundation with clean HTML and CSS. That’s where I like to start — getting the structure and styling right at the base level.

    Of course, there are many ways to implement things, and multiple approaches can be valid at the same time. What matters most is that it makes sense to you first (hehe), and that it’s logical and semantically sound.

    For learning best practices in structuring CSS, I recommend reading up on methodologies like BEM.

    🌱 A Few Concepts I Use

    • Layout elements – usually div, used for structural containers and positioning.

    • Semantic elements – like section, article, figure, etc. These improve readability for both developers and machines (like screen readers or SEO).

    • Wrappers – styled containers that group content and encapsulate specific layout or styles for reuse.

    📐 Positioning Elements

    To center something (like in this task), I usually use a layout element with margin auto, flexbox alignment, or translate depending on what fits best.

    For basic 2D alignment, flex is often enough, but grids are useful for more complex layouts.

    🃏 Card Content

    I wrap grouped content (like a blog card) inside a semantic or wrapper element and give it base styling such as padding. This simplifies internal layout for child elements.

    💡 Some Lessons I’ve Learned

    • I’ve started using relative units (rem, em) and CSS variables, even in small projects. It helps with consistency and makes future adjustments easier (e.g., for themes or documentation).

    • I use combined selectors like .card__body p instead of assigning classes to every element. It feels cleaner in small to mid-size projects.

    ⚠️ One Tricky Issue

    If a text-wrapping element is inside a flex child, it often needs an explicit min-width: 0 or overflow rule — otherwise, text might not wrap as expected.

    Also, when using inline-flex elements, font size or line height might behave unexpectedly. These values don’t always inherit properly due to how layout calculations work.

    🔗 Useful Links

    Hope this helps or inspires you in some way. Thanks for reading! ✨
    — o-k-harmash

  • o-k-harmash•90
    @o-k-harmash

    It looks good enough, especially in terms of following the design files.
    Describing CSS variables based on the style guide and using class selectors is a common practice for projects that are rich in components.

    I'm not corporately experienced in this field, so I’ll leave a surface-level review, but here are some key points:

    • The solution includes semantic HTML structure.
    • The layout is flexible and meets the requirements by using relative units and CSS Grid for positioning.
    • I was able to parse the code without any issues — it's readable and clean enough.