Community feedback

• 

  o-k-harmash•140

  @o-k-harmash

  Posted about 2 months ago

  💬 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);
  }
  

  2. Then, use this container:

  .container {
    align-self: center;
    padding: 1.75rem;
    width: 25.125rem;
    min-width: 17.1875rem;
  }
  

  3. 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

  • ChatGPT – for brainstorming or just lifting your mood 😄
  • BEM Methodology – CSS naming conventions
  • Learn HTML
  • Learn CSS – very complete but can be overwhelming for beginners
  • Text Wrapping & Flexbox – a helpful article I found

  ---

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

  00
• 

  kulkarni997•20

  @kulkarni997

  Posted about 2 months ago

  Yes the comparison was helpful as he/she has used different ways to do the same web page.

  00