Skip to content
OverviewSolutions
2
Comments
2

Park Byung Eun

@ethan-geekkorea seoul40 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

  • Blog preview card

    Park Byung Eun•40
    Submitted 3 months ago
    1 comment

  • QR Code Component Solution

    #accessibility#pure-css
    Park Byung Eun•40
    Submitted 3 months ago

    I would like to know how CSS experts define variables, name classes (e.g., using BEM methodology), and handle responsive design. Specifically, I’m curious about how to improve the structure of my CSS code and if there are any better ways to organize or optimize it. Feedback on these aspects would be greatly appreciated.

    3 comments

Latest comments

  • Park Byung Eun•40
    @ethan-geekPosted 3 months ago

    1. Consistency in Global Units

      • Consider using rem instead of mixing px, %, and others. For instance, replace 384px with 24rem (assuming 16px as the base font size), and 24px with 1.5rem.

    2. Semantic Markup & Class Names

      • .article-image and .blog-card-detail are clear and readable, but you could also use semantic tags like <article> or <section> for better structure.
      • If the project grows, consider adopting a naming convention such as BEM (Block, Element, Modifier) for maintainability.

    3. Accessibility (A11y)

      • Provide descriptive alt text for images. Empty alt attributes (alt="") don’t convey meaning for screen readers.
      • Check color contrast between text and background (especially yellow vs. white/gray) to meet WCAG standards.

    4. Line-Height & Spacing

      • Define a unitless line-height (e.g., line-height: 1.4;) for paragraphs and titles to improve readability.
      • Adjust line-height or padding for elements like .badge to ensure consistent visual spacing.

    5. Font Loading Strategy

      • Using font-display: swap; is good for performance and user experience.
      • Specifying fallback fonts (e.g., font-family: 'Figtree', sans-serif;) helps if the custom font fails to load or is delayed.
    0
  • Liliana Escobar•30
    @Liliana993Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    De poder lograr lo más parecido al diseño propuesto.

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

    Solamente acomodar la imagen a un tamaño que encuadre con la tarjeta.

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

    El diseño de la imagen.

    Utilizando CSS

    #accessibility
    1
    Park Byung Eun•40
    @ethan-geekPosted 3 months ago

    #Feedback on Code Conventions:

    • "The current index.html has some issues with code conventions. Code conventions are crucial for maintaining consistency within the team and making it easier for others to understand and modify the code. Here are some suggestions for improvement:" The indentation of HTML tags is inconsistent, which affects readability. Using either 2 spaces or 4 spaces consistently would help.

    #Feedback on Style Guide:

    • "There are some discrepancies between the implementation and the style guide. The style guide is a critical document for ensuring the entire team follows a consistent approach. Please double-check the following points"
    Marked as helpful
    0